Как сделать баннер в фотошопе

Как сделать рекламный баннер в фотошопе для сайта

ноя 6, 2020

  • Какой программой воспользоваться
  • Принцип создания рекламного баннера
  • Создаем базовый фон
  • Наложение фона на белую основу
  • Вырезаем и устанавливаем картинку
  • Создаем рекламную надпись
  • Создаем кнопку "Заказать"

Рекламная акция для продвижения продукции компании является важным инструментом успешного ведения бизнес-проекта. Это же правило распространяется и на просторах интернета. Для популярности сайта, какой-либо интернет услуги для бизнеса, товара широко используются специальные рекламные баннеры в маркетинге. Стоимость на услуги создания креативов и изготовление рекламных баннеров неуклонно растет. Профессиональные мастера за создание рекламного баннера запрашивают высокую стоимость. Что делать, когда не хватает бюджета на заказ рекламного баннера у мастеров-профессионалов. Выход один —изготовить баннер для сайта самостоятельно.

Какой программой воспользоваться

Существует несколько специализированных программных приложений, посредством которых легко нарисовать баннер качеством высокого уровня. У профессиональных мастеров пользуется популярностью программа "Adobe Photoshop". Именно, в ней мы и будем создавать наш первый рекламный баннер своими руками.

В нашем случае будем делать рекламу пиццы на баннере с размерностью 600 на 400 пикселей.

Принцип создания рекламного баннера

Весь ход работы состоит из следующих этапов:

  • Создание базового фона нужного формата.
  • Наложение необходимого фона.
  • Вырезание картинки от фона и ее размещение.
  • Создание рекламной надписи.
  • Создание кнопки "заказать".

Создаем базовый фон

Алгоритм действий следующий:

  • С левой стороны верхней панели кликаем по кнопке "Файл", потом "Создать" (фото 1).
  • В открывшемся белом окне задаем необходимые размеры будущего баннера для рекламного места (фото 2).
  • С получившегося белого фона снимаем "замок", перетянув соответствующий значок в корзину (фото 3).

Наложение фона на белую основу

Чтобы выполнить наложение цветного фона на базовую основу, следует выполнить следующие действия:

По уже знакомой нам кнопке "Файл" кликаем единожды "левой мышкой". Из выпавшего окна выбираем подпункт "Открыть" (фото 4).

  • Находим нужное фото с цветным фоном. Перетягиваем цветной фон на белый прямоугольник (фото 5).
  • Уменьшаем цветной фон до нужных размеров, чтобы он четко лег на белый прямоугольник. Уменьшение цветного фона выполняем зажатой кнопкой "Alt" и "левой мышью".

Вырезаем и устанавливаем картинку

Перед выставлением фотографии пиццы на цветной фон, необходимо отделить провести ее вырезание. Для этого достаточно воспользоваться кнопкой «Волшебный ластик» (фото 6). Нажимая левой кнопкой мышки на области вокруг объекта, удаляем старый фон.

По такой же схеме, как и в предыдущем пункте, выставляем фотоизображение пиццы:

  • Выставляем картинку на цветном фон в том месте, где это необходимо.
  • Определяемся с оптимальным размером фотоизображения, зажимая "Alt" и левую кнопку мышки.
  • Выбрав оптимальное место картинки, нажимаем "Enter" на клавиатуре (фото 7).

Создаем рекламную надпись

Этап создания надписи на рекламном баннере заключается в следующих этапах:

  • Находим и выбираем на левой панели рабочей рамки значок "Текст" (фото 8).
  • В нужном месте баннера интернет рекламы устанавливаем курсор для набора текста.
  • Вбиваем требуемый слоган любым шрифтом. После этого, курсором и зажатой "левой мышью" выделяем надпись для баннера. Выбираем в соответствующем меню подходящий шрифт и его размер (фото 9). При необходимости переноса текста на другой участок, нажимаем комбинацию из кнопок "Ctrl" + "T". Происходит выделение надписи на баннере. Курсором переносим обозначенный текст с необходимую область баннера.

Создаем кнопку "Заказать"

Дополнить баннер для текста следует специальной кнопкой «Заказать», позволяющей будущему покупателю перейти непосредственно к заказу товара.

Для того, чтобы сделать кнопку «Заказать», проводим следующие действия:

  • Выбираем кнопку «Прямоугольная область» (фото 10).
  • Выбираем цвет будущей кнопки (фото 11 и 12).
  • Курсором наносим прямоугольник нужного размера, кликаем «Enter».
  • Кликаем по кнопке «Текст», выбирая функцию тестового набора.
  • Выбираем понравившийся шрифт, зайдя в соответствующее меню.
  • Выбираем размер шрифта.
  • Вбиваем слово «заказать» в цветной прямоугольник.

Работа выполнена! Итоговый результат можно посмотреть на фото 13. Теперь рекламный баннер сайта можно выставлять в интернет.

Ирина Леонова

Ирина является автором множества статей и публикаций на тему интернет-рекламы, маркетинга, монетизации и продвижения сайтов с более чем 10-летним опытом. Благодаря консультациям, разговорам, публикациям, обучению и наставничеству, она пишет качественные статьи и публикации.

Похожие статьи

Как выгодно купить или продать место под баннер на сайте

Заработать можно на сайте с минимальной посещаемостью 500 хостов в сутки.

Основные тренды дизайна рекламы и онлайн контсрукторы баннеров

Тренды дизайна рекламы везде, они окружают нас постоянно. При покупке одежды, техники или машины, в приложениях и играх.

Как работает баннерообменная сеть и сервисы обмена баннерами?

Чтоб продвигать собственную баннерную рекламу, понадобится сервис для обмена баннерами.

Как сделать баннер в фотошопе

Баннер или шапка сайта HTML представляют собой графику, которая находится в верхней части сайта. На ней обычно отображается название компании. Часто это первое, что видит человек при посещении сайта. В этой статье мы расскажем, как сделать баннер в фотошопе.

Создание простого веб-баннера в Photoshop

Начнем с готового баннера. У нас есть базовый пример, используемые в нем цвета успокаивают глаза. Его можно размещать на сайте, посвященном моде и стилю, а также для персонального блога. Следуйте приведенным ниже инструкциям:

Откройте новый документ . Открываем в Photoshop новый документ нужного размера:

Нарисуйте прямоугольник с помощью инструмента « Прямоугольная область » . Перед тем, как сделать шапку сайта HTML , создайте на новом слое прямоугольник любого цвета:

Стиль слоя> Наложение градиента . Нажмите на стиль, а затем примените градиент:

Выбор формы кисти . После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL , кликните по фигуре прямоугольника. Активируйте кисть и настройте ее параметры, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:

Создайте новый слой . Создайте новый слой и выберите инструмент « Овальная область ». Измените настройки выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на « Перекрытие », создайте еще два дубликата этого выделения:

Измените режим смешивания на «Перекрытие» . Перед тем, как сделать баннер в шапку сайта HTML , переместите три дубликата, созданных ранее, и поместите их в соответствующих местах. Измените их режим наложения на « Перекрытие ». При этом обратите внимание, чтобы они не вышли за пределы прямоугольника:

Используйте кисть, чтобы удалить лишние области, поместите эти три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не очень большой. Установите « Жесткость » — 0% , « Непрозрачность » — 10% . Зарисуйте края этих эллипсов, чтобы смешать их, и уменьшите непрозрачность:

Выберите инструмент «Горизонтальный текст» и введите надпись шапки сайта HTML . Введите основную надпись баннера, а затем добавьте дополнительную информацию о сайте:

Создайте новый слой и создайте тень баннера . Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40% :

Создайте новый слой ниже слоя баннера . Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, « Жесткость » — 0% . Затем разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70% :

Поместите все слои в группу . Затем продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:

Заключение

Мы рассказали вам как сделать баннер в фотошопе. Надеюсь, что эта статья оказалась полезной для вас.

Всем привет. В текущей статье я покажу вам, как можно сделать gif баннер средствами Photoshop. Вообще, я привыкла делать баннеры и анимацию в Adobe Flash и Adobe Animate . Естественно, Photoshop не сравнится с данным пакетом по функционалу для анимации. Но все же достаточно простые и интересные баннеры в Photoshop делать можно, ведь в его новых версиях, начиная с CS5, насколько я знаю, появились возможности создавать анимацию прозрачности, масштабирования, перспективы и т.д. Рассмотрим процесс создания gif баннера в Photoshop на примере работы, расположенной в заголовке статьи. Если вас заинтересовал такой вариант баннеров и вы не можете сделать его самостоятельно, закажите у меня создание такой анимации — заполняйте форму обратной связи и я вам обязательно отвечу

Примеры анимированных баннеров в Photoshop

Примеры баннеров, которые можно сделать в Photoshop:

Создание анимированного баннера в Photoshop — инструкция

Создадим новый документ размером 600 на 200 px.

Для начала соберем баннер в статичном виде. Расположим на слое нашего главного персонажа – рыбу, где можно взять бесплатные ресурсы для своих работ я писала в статье « ТОП 8 сайтов с бесплатными ресурсами для дизайнера »:

С помощью инструмента «Произвольная фигура» расположим на слое выноску с диалогом.

Напомню, что отредактировать фигуру (векторный объект) можно с помощью инструмента «Выделение узла».

Так я и сделала – удалила ненужные элементы в слое с первой фигурой и добавила еще 3 Эллипса, чтобы сделать так, как-будто это облако диалога идет изо рта рыбы.

Теперь поместим текст на слоях документа, в порядке, в котором он будет появляться.

Так как текст у нас будет появляться поочередно, то, естественно, что в статичном варианте слои будут налезать друг на друга.

Я покажу все слои с отключенным последним текстовым слоем.

И обратите внимание, что текстовые слои у нас должны быть кадрированы по размерам слоя с фигурой диалогового облака, чтобы оно служило рамкой, из-за которой текст уже не будет видно.

Итак, все слои у нас готовы. Расположены в порядке их появления (снизу вверх). Можем приступать к анимации.

Выберите пункт Окно – Шкала времени .

В появившейся панели выберите кнопку Создать шкалу времени для видео.

В результате создастся временная шкала, со всеми нашими слоями, которые мы уже можем двигать и анимировать.

Так как слой Фон у нас с замочком, то отображаться он не будет на временной шкале, он будет присутствовать всегда неизменно.

Если вы хотите анимировать фон, то снимите блокировку на его слое, щелкнув 2 раза левой клавишей мыши.

Для каждого слоя на временной шкале предусмотрены атрибуты для анимации.

Их можно увидеть, если раскрыть список слева от названия слоя. Мы можем изменять позицию, непрозрачность, стиль.

Так же, если щелкнуть правой клавишей мыши по самому названию слоя на дорожке временной шкалы, откроется список дополнительных анимационных действий.

Активировать создание ключевых кадров для конкретной дорожки со слоем, можно, нажав на значок с часами напротив названия атрибута анимации.

Желтый ромб (пиктограмма ключевого кадра) появится там, где стоит временной указатель на шкале времени. Например, в начале.

Вы можете изменить значение атрибута объекта, например, позиции и ее значение будет сохранено для данного ключевого кадра.

Затем, чтобы задать новое значение и новый ключевой кадр, нужно переместить указатель времени на новое место.

Щелкнуть по значку с ромбом напротив названия атрибута (на временной шкале появится новая пиктограмма ключевого кадра) и задать новое значение атрибута.

Например, переместить объект в новое место.

Теперь попробуем применить полученные знания.

Наша рыба должна появиться слева направо и ее прозрачность должна поменяться с 0 до 100%. Так будет выглядеть шкала времени в данном случае.

После того, как рыба появилась, появится диалоговое облако по частям.

Сначала эллипсы, потом сама фигура.

Дорожки каждого слоя мы можем двигать на временной шкале, поэтому распределим их позиции так, чтобы они появлялись с нужным временным интервалом и зададим анимацию параметру Непрозрачность для каждого слоя.

Для фигуры применим те же действия.

Теперь создадим анимацию для текста, используя тот же алгоритм.

Только у текста будет параметр не Позиция, а Перспектива, при этом мы сможем не только изменять позицию, но и изменять масштаб от меньшего к большему, при начале движения текста.

Для этого используется стандартный инструмент трансформации объекта (Ctrl +T).

Так как изначально слои с текстом у нас кадрированы по форме фигуры, то они будут видимы только в ее пределах.

У второго текста я так же изменила стиль. Добавила градиент в параметрах наложения слоя.

Теперь сравняем все края дорожек в конце.

Для этого нужно потянуть за правый край каждой дорожки и подогнать все под одно время. Чтобы резко не пропадали все объекты.

Для каждой дорожки можно задать изменение непрозрачности в 0. Проиграть то, что получилось, можно нажав на клавишу пробел .

Чтобы сохранить результат, необходимо выбрать Файл – Сохранить для Web.

Выбрать формат Gif и указать, чтобы анимация повторялась постоянно.

Хоть Photoshop и не создан для какой-то сложной анимации (и это резонно), но с помощью вот таких нехитрых действий можно добиться достойного результата при создании gif баннера.

Особенно если вы чувствуете себя в Photoshop, как рыба в воде, нежели при работе во Flash.

Уверена, моя статья раскрыла вам завесу тайны того, как можно создавать анимированные баннеры в Photoshop, а не только использовать покадровую анимацию готового видео, например, при создании живого синемаграфичного эффекта .

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

  • Share on Facebook
  • Share on Instagram
  • Share on Vkontakte

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и новые уроки Photoshop.

  • Share on Facebook
  • Share on Twitter
  • Share on Pinterest
  • Share on LinkedIn
  • Share on Vkontakte
  • Share on Instagram

Похожие статьи:

  1. Живое фото для Инстаграм в Photoshop. Анаглиф-эффект + исходник
  2. Анимация движения на камеру в Adobe Animate (Flash)
  3. Иллюстрации на фотографии в Photoshop
  4. Двойная экспозиция с анимацией. Новый взгляд.
  5. Синемаграфия. Как создать живое фото в Adobe Photoshop

2 комментарии на “ Анимированный баннер в Photoshop ”

Олег :

Спасибо за помощь!

Anna Dmitrieva :

Ссылка на основную публикацию