Как создать баннер для сайта бесплатно
Хотели бы вы полностью контролировать свой онлайн бизнес? Быть независимым от незнакомых людей, которых вы нанимаете для выполнения каких-либо задач? Полностью владеть всеми фишками и тонкостями этой кухни? Сейчас покажу, как можно сэкономить ни одну тысячу рублей на покупке рекламных баннеров для своего сайта или блога. Разберем как сделать баннер бесплатно. Кстати, данный баннер не будет блокироваться сервисом AdBlock. Вам интересно узнать, как бесплатно создать уникальный анимированный баннер под любой продукт и цели?
Для начала понадобится программа Adobe Photoshop. Скачать можете на их официальном сайте. Или на просторах интернета. Сейчас не об этом. Начнем создавать баннер. Открываем фотошоп. Нажимаем на вкладку файл. Создать.
В открывшемся окне вводим размер баннера. Для примера сделаем баннер 240×400 пикселей.
Размеры баннеров:468×60, 728×90, 250×250, 200×200, 336×280, 300×250, 120×600, 160х600, 300×600, 240х400, 970х90, 970х250, 320х100, 320×50
Теперь копируем слой. Зажимаем левую кнопку мыши. Перетаскиваем вниз, как показано на картинке.
Появился новый слой. Нажимаем на него. Выбираем инструмент заливка.
Заливаем наш слой. Цвет можете выбирать любой.
В нашем случае, я изменил цвет на фиолетовый. Далее нажимаем на два раза между названием и картинкой слоя.
В открывшемся окне перетаскиваем ползунок «непрозрачность заливки» на 0 %.
Теперь, когда у нас непрозрачность завивки равна 0 %, нажимаем на вкладку «выполнить обводку«.
Открывается новое окно. Выбираем размер. На ваше усмотрение. Я выберу 1 пиксель. Далее положение меняем на «внутри«. Так же выбираем подходящий цвет. Нажимаем ОК.
Как сделать баннер в фотошопе
Отлично. Получилась рамка для нашего будущего баннера.
Теперь на время отключим рамку. Для этого просто нажимаем на глаз, рядом со слоем.
После нажатия на глаз, рамка пропала. И просто выделяем слой, который находится ниже.
Теперь нужно выбрать подходящую картинку. Процесс выбора картинки не буду показывать, все просто. В поисковике вбиваете название, тему картинки и сохраняете ее. Далее просто перетаскиваем картинку для баннера на слой в фотошопе.
Подгоняем картинку по размеру. Нажимаем Enter.
Теперь нужно создать текст. Выбираем инструмент текст, буква Т. Выделяем область для текста, растягиваем. Выбираем размер текста.
Надпись готова. Теперь немного ее преобразим. Сделаем обводку. Нажимаем два раза между текстом и картинкой слоя.
В новом окне нажимаем на «выполнить обводку«. Ставим нужный размер. Выбрать положение «снаружи«.
Получилась обводка надписи сверху. Теперь скопируем этот слой. Для этого перетаскиваем его вниз на листик «копировать«.
Слой скопировался. Теперь нажимаем между надписью и картинкой слоя. Проделываем аналогичные действия. Только меняем цвет на другой.
Теперь будем делать анимированную кнопку для баннера. Создаем новый слой.
На панели инструментов находим «прямоугольник со скругленными углами«.
Зажимаем левую кнопки мыши и растягиваем в нужном месте. Получается простая кнопка.
Теперь выберем цвет для кнопки. Просто нажимаем на цвет.
Для примера выберем желтый цвет.
Цвет изменился. Теперь скопируем данный слой. Для этого перетаскиваем его на листик «копировать«.
В новом слое меняем цвет.
Делаем цвет немного темнее.
Теперь нужно сделать надпись для нашей кнопке. Для этого создам новый слой.
Нажимаем на инструмент текст, буква Т.
Зажимаем левую кнопку мыши, растягиваем в нужной области. В нашем случае, нужно разместить текст в рамке. Подгоняем размеры.
Придумываем текст.
Теперь самое время включить слой с рамкой. Для этого на нажимаем место, где был глаз.
Как сделать анимированный баннер
Настало время придать нашему баннеру анимацию. Для этого на вкладках фотошопа выбираем «окно«. В открывшемся меню нажимаем на шкалу времени.
Открылась шакала времени. Для первого фрагмента отключаем копии слоев с текстом и кнопкой.
Теперь копируем фрагмент. Для этого перетаскиваем на листик «копировать«.
Выделаем новый фрагмент. Проделываем такую же процедуру, как и с первым фрагментом. Только меняем местами видимость слоев.
Нажимаем на плей. Смотрим на результат.
Отлично! Анимированный баннер готов. Теперь нужно его правильно сохранить. Для этого нажимаем на вкладку «файл«. Далее «экспортировать«. Сохранить для Web.
В новом окне обязательно выбираем тип GIF. Нажимаем сохранить.
Теперь вы можете с легкостью ответить на вопрос как сделать баннер буквально за несколько минут. Нужно лишь проявить фантазию и креативность. Кстати, вот тот самый анимированный баннер, который не блокирует сервис AdBlock. Можете смело проверить.
Ну а если вы хотите не только научиться создавать простые баннеры. А познать что-то больше. То для вас есть 4 бесплатных подарка бонкуса. Пока доступ еще открыт, смелее переходите по ссылке и забирайте свои комплекты абсолютно бесплатно!
Хорошая статья. Но если бы вы видео записали, было бы вообще супер! Но и так впринципе все понятно! Спасибо.
Очень интересная и подробная статья. Описано все подробно. Но я предпочитаю делать банеры в Канве. Там меньше заморочек.