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

Как создать эффективный 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 пикселей.

 

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

Шаг 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 пикселей. Нажмите ОК. Выделите слои текста и прямоугольника и объедините их в одну папку под названием «Призыв к действию».

 

 

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

 

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

Шаг 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.

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

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

 

Шаг 8

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

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

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

 

Шаг 9

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

 

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

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

 

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

 

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

 

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

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

 

  • настраивать баннер для сайта
  • использовать слой-маски (Layer Masks)
  • систематизировать слои в папки
  • экспортировать готовый файл JPEG

 

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

 

 

Если вам понравился этот урок, тогда мы можем также предложить вам эти:


Печать   Электронная почта