Как сделать баннер

Как создать баннер для сайта бесплатно

Хотели бы вы полностью контролировать свой онлайн бизнес? Быть независимым от незнакомых людей, которых вы нанимаете для выполнения каких-либо задач? Полностью владеть всеми фишками и тонкостями этой кухни? Сейчас покажу, как можно сэкономить ни одну тысячу рублей на покупке рекламных баннеров для своего сайта или блога. Разберем как сделать баннер бесплатно. Кстати, данный баннер не будет блокироваться сервисом 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 бесплатных подарка бонкуса. Пока доступ еще открыт, смелее переходите по ссылке и забирайте свои комплекты абсолютно бесплатно!

Скачать бесплатно и сохранить на рабочий стол!

Оцените статью
( 14 оценок, среднее 5 из 5 )
Поделиться с друзьями
Добавить комментарий

один × четыре =

  1. Стас

    Хорошая статья. Но если бы вы видео записали, было бы вообще супер! Но и так впринципе все понятно! Спасибо.

    Ответить
  2. Елена

    Очень интересная и подробная статья. Описано все подробно. Но я предпочитаю делать банеры в Канве. Там меньше заморочек.

    Ответить
Adblock
detector