Как создать эффективный web-баннер?

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



Предложение должно быть кратким и конкретным, по существу. Вы должны сообщить своим читателям, что вы продвигаете. Призыв к действию - это текст / кнопка, которая пригласит вашего потребителя на ваш сайт. Короткие фразы, такие как «Shop Now (купите сейчас)» или «Subscribe (подпишитесь)», являются отличными зацепками. В этом уроке мы разработаем вертикальный баннер на полстраницы, который включает в себя все необходимые элементы.

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



Не готовы создать баннер в фотошопе? Placeit - отличный онлайн-производитель рекламы, который прост в использовании и который легко настраивается.



Вариантов на выбор сотни, и вы обязательно найдете шаблон баннера, который соответствует вашим потребностям. Envato Elements также предлагает удивительные и эффективные шаблоны веб-баннеров и фотографии, которые помогут вам создать потрясающую маркетинговую кампанию. Скорей проверь их!



Что вам понадобится?



Вам понадобится доступ к Adobe Photoshop. Если у вас нет программного обеспечения, вы можете загрузить пробную версию с веб-сайта Adobe. Вам также понадобятся эти элементы как:



Abacus (Счеты)

Блондинка в стиле ретро

Шрифт Awosem

Шрифт Morton

Загрузите все это и убедитесь, что шрифт установлен в вашей системе перед запуском. Когда вы будете готовы, начнем создавать баннер вашего сайта!



1. Настройка файла для дизайна веб-баннера



Шаг 1

В Photoshop перейдите в «Файл»> «Создать». Назовите документ web-баннер. Установите для файла следующие параметры:



Ширина до 300 пикселей

Высота до 600 пикселей

Ориентация «ПОРТРЕТ»

Разрешение до 72 пикселей

Цветовой режим в RGB

Нажмите «Создать»



Шаг 2

Создайте поля в документе, перейдя в View> New Guide. В окне параметров «New Guide» выберите «Горизонтально» и установите «Position (Положение)» на 20 пикселей. Нажмите ОК. Перейдите в View> New Guide, на этот раз установив Положение (Position) на 580 px.



Чтобы создать вертикальные линии, перейдите в View> New Guide. В окне параметров выберите Вертикальный и установите Положение на 20 пикселей. Нажмите ОК.

Перейдите в «Просмотр»> «New Guide (Новое руководство)», на этот раз установите «Position (Положение)» на 280 пикселей.



2. Разработка вашего веб-баннера

Шаг 1

Перетащите изображение блондинки в стиле ретро в документ. Ширина изображения должна соответствовать ширине баннера. Если вам нужно изменить размер, нажмите Command-T для преобразования.



Шаг 2

Нажмите I, чтобы выбрать инструмент «Пипетка (Eyedropper)». Пример желтого цвета представлен картинке. Перейдите на панель «Слои» и выберите «Создать новый заливочный или корректирующий слой»> «Сплошной цвет». Образец переднего плана должен быть установлен автоматически. Если нет, используйте следующий код: # fcf1d3. Нажмите ОК. Переместите слой сплошного цвета под слой изображения.



Шаг 3

Создайте новый слой на панели «Слои», нажав Shift-Command-N. Используя Brush Tool (B) и # fcf1d3 для переднего плана, нарисуйте верхний правый угол изображения. Это создаст цельный вид.



Шаг 4

Выделите все слои, удерживая клавишу Shift и выбирая самый первый и самый последний слои. Нажмите на кнопку «Создать новую группу». Дважды щелкните папку и переименуйте ее в «Фон».



Шаг 5

Выберите инструмент Text Tool (T) на панели инструментов. Добавьте предложение или информацию о том, что вы рекламируете. В этом случае я добавлю «Spring» другим шрифтом, чем остальная часть баннера, чтобы подчеркнуть именно этот сезон.



Перейдите на панель символов (Character) (Тип> Панели> Панель символов).

Установите шрифт Awosem, а размер - 175 pt. Нажмите на образцы цвета и выберите черный.

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



Шаг 6

Используя Text Tool (T), добавьте остальную часть вашей копии. В этом случае добавьте в конце предложения: «Распродажа, скидка до 50% на выбранные товары. Только онлайн».

Вы можете сделать это на одном или нескольких слоях. Перейдите в панель символов и используйте следующие настройки:

ПРОДАЖА: Шрифт Morton Bold, размер 110 пт.

Установите образец цвета и установите его на # d82a2e. До 50%: шрифт Morton Bold, размер 110 пт, ведущий 40 пт. Установите образец цвета на черный. ВЫКЛ. ВЫБРАННЫЕ ПУНКТЫ: Шрифт Morton Bold, размер 25 пт, ведущий 25 пт.

ТОЛЬКО ОНЛАЙН: шрифт Morton Bold, размер 40 пт, ведущий 35 пт. Поместите этот слой под слой Spring. Выберите оба слоя и создайте новую папку с названием " Copy".



Шаг 7

Теперь пришло время создать кнопку "призыва к действию". В данном случае мы назовем ее «Купить сейчас». С помощью инструмента «Текст» (T) добавьте призыв к действию и используйте следующие настройки: шрифт Morton Bold, размер 110 пт, уплотнение (Tracking) 100 пт. Установите образец цвета на черный. Используя Rectangle Tool (U), создайте прямоугольник. Перейдите к панели управления и установите белый цвет, ширину - 145 пикселей, высоту - 35 пикселей.



Шаг 8

Для того, чтобы выделить призыв к действию, добавим тень. На панели «Слои» щелкните правой кнопкой мыши слой «Прямоугольник» и выберите «Параметры наложения». В окне параметров слоя отметьте и выберите параметр «Тень». В настройках «Тень» установите «Непрозрачность» на 35%, «Угол» на 130, «Расстояние» на 10 пикселей и «Размер» на 20 пикселей. Нажмите ОК. Выделите слои текста и прямоугольника и объедините их в одну папку под названием «Призыв к действию».





3. Применение вашего веб-баннера для других размеров



Здесь нет правильного или неправильного способа применить ваш дизайн веб-баннера для других размеров. Ниже я покажу вам пример простого применения полстраничного баннера к размеру всплывающего окна. Используйте это как вдохновение и интерпретируйте по-своему. И потом покажите нам свой дизайн в разделе комментариев ниже!

Шаг 1 В Photoshop перейдите в «Файл»> «Создать». Назовите документ Web-Баннер 2. Задайте для документа следующие параметры:



Ширина до 500 пикселей

Высота до 350 пикселей

Ориентация «Портрет»

Разрешение до 72 пикселей

Цветовой режим в RGB

Нажмите Создать.



Шаг 2

Создайте поля документа. Перейдите в Вид> Новое руководство (View > New Guide). В окне параметров «Новое руководство (New Guide)» выберите «Горизонтально» и установите «Положение» на 20 пикселей. Нажмите ОК. Перейдите в View> New Guide, на этот раз установив Position на 580 px.Чтобы создать вертикальные линии, перейдите в View> New Guide. В окне параметров выберите Вертикальный и установите Положение на 20 пикселей. Нажмите ОК. Перейдите в «Просмотр»> «Новое руководство (New Guide)», на этот раз установите «Положение» на 280 пикселей.



Шаг 3

Удалите изображение блондинки в стиле ретро и нажмите Command-T для трансформации. Перейдите к панели управления и установите ширину и высоту на 75%.

Поместите изображение слева от баннера. Хорошим ориентиром может служить, когда локоть касается края границ (на данном изображении).



Шаг 4

Перейдите на панель «Слои» и выберите «Создать новый заливочный или корректирующий слой»> «Сплошной цвет». Установите сплошной цвет для следующего кода: # ff634b. Нажмите ОК.



Шаг 5

Создайте новый слой на панели «Слои», нажав Shift-Command-N.

Используя Brush Tool (B) и # ff634b в качестве цвета для переднего плана, обрисуйте края изображения и сделайте сплошной цвет, чтобы создать цельный вид.



Шаг 6

Выделите все слои, удерживая клавишу Shift и выбирая самый первый и самый последний слои. Нажмите на кнопку Создать новую группу. Дважды щелкните папку и переименуйте ее в «Фон».





Шаг 7

Вернитесь к файлу Web-бaннер

1. Перейдите на панель «Слои», выберите призыв к действию и «Копировать папки». Щелкните правой кнопкой мыши и выберите Duplicate Layers.

В окне параметров «Дублировать слои» установите для документа значение «Веб-баннер»

2. Нажмите «ОК».



Шаг 8

Вернитесь к файлу Web-баннер 2.

Выберите папку «Копировать» и нажмите Command-T для преобразования, перемещая текст в верхний левый угол.

Откройте папку и измените цвет текста «Продажа» на #fceece.



Шаг 9

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



4. Как экспортировать ваш дизайн web-баннера

Перейдите в File> Save и сохраните файл, как обычно. Чтобы сохранить файл JPEG для веб-файла, выберите «Файл»> «Save for Web» или Shift-Option-Command-S. Выберите тип файла, в котором вы хотите сохранить документ - я выбираю JPEG - и установите 100 для качества. В разделе Размер изображения (Image size) вы можете изменить размер изображения в пикселях, если у вас есть ограничения по размеру.



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



Нажмите Сохранить, чтобы выбрать местоположение в новом окне, и нажмите Сохранить снова.



Отличная работа! Вы закончили свой шаблон веб-баннера!

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



ü настраивать баннер для сайта

ü использовать слой-маски (Layer Masks)

ü систематизировать слои в папки

ü экспортировать готовый файл JPEG



Если вы новичок в Photoshop и вам необходим готовый шаблон баннера или рекламные шаблоны, то перейдите в Envato Elements и GraphicRiver. Если вы торопитесь, не забудьте проверить Placeit. У нас есть много вариантов для изучения!

Made on
Tilda