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

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

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

    Предложение должно быть кратким и конкретным, по существу. Вы должны сообщить своим читателям, что вы продвигаете. Призыв к действию - это текст / кнопка, которая пригласит вашего потребителя на ваш сайт. Короткие фразы, такие как «Shop Now (купите сейчас)» или «Subscribe (подпишитесь)», являются отличными зацепками. В этом уроке мы разработаем вертикальный баннер на полстраницы, который включает в себя все необходимые элементы. Мы применим этот дизайн к всплывающим баннерам, и это станет отличным примером того, как вы в дальнейшем будете создавать шаблоны баннеров.   Не готовы создать баннер в фотошопе? Placeit - отличный онлайн-производитель рекламы, который прост в использовании и который легко настраивается.   Вариантов на выбор сотни, и вы обязательно найдете шаблон баннера, который соответствует вашим потребностям. Envato Elements также предлагает удивительные и эффективные шаблоны веб-баннеров и фотографии, которые помогут вам создать потрясающую маркетинговую кампанию. Скорей проверь их!   Что вам понадобится?   Вам понадобится доступ к Adobe Photoshop. Если у вас нет программного обеспечения, вы можете загрузить пробную версию с веб-сайта Adobe. Вам также понадобятся эти элементы как:   Abacus (Счеты) Блондинка в стиле ретро Шрифт Awosem Шрифт Morton Загрузите все это и убедитесь, что шрифт установлен в вашей системе перед запуском. Когда вы будете готовы, начнем создавать баннер вашего сайта!   Настройка файла для дизайна веб-баннера   Шаг 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 Перетащите изображение блондинки в стиле ретро в документ. Ширина изображения должна соответствовать ширине баннера. Если вам нужно изменить размер, нажмите 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 В 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ннер Перейдите на панель «Слои», выберите призыв к действию и «Копировать папки». Щелкните правой кнопкой мыши и выберите Duplicate Layers. В окне параметров «Дублировать слои» установите для документа значение «Веб-баннер» Нажмите «ОК».   Шаг 8 Вернитесь к файлу Web-баннер 2. Выберите папку «Копировать» и нажмите Command-T для преобразования, перемещая текст в верхний левый угол. Откройте папку и измените цвет текста «Продажа» на #fceece.   Шаг 9 Поместите кнопку призыва к действию выше нижнего поля.   Как экспортировать ваш дизайн web-баннера Перейдите в File> Save и сохраните файл, как обычно. Чтобы сохранить файл JPEG для веб-файла, выберите «Файл»> «Save for Web» или Shift-Option-Command-S. Выберите тип файла, в котором вы хотите сохранить документ - я выбираю JPEG - и установите 100 для качества. В разделе Размер изображения (Image size) вы можете изменить размер изображения в пикселях, если у вас есть ограничения по размеру.   В нижней левой части вы можете увидеть предварительный просмотр размера файла. Это полезно, когда на веб-сайте существуют ограничения по размеру, и вам необходимо снизить качество или размер изображения.   Нажмите Сохранить, чтобы выбрать местоположение в новом окне, и нажмите Сохранить снова.   Отличная работа! Вы закончили свой шаблон веб-баннера! На этом уроке вы узнали, как сделать дизайн баннера. Мы рассмотрели инструменты, которые помогут вам разработать веб-баннеры для вашей следующей маркетинговой кампании. Сегодня вы научились:   настраивать баннер для сайта использовать слой-маски (Layer Masks) систематизировать слои в папки экспортировать готовый файл JPEG   Если вы новичок в Photoshop и вам необходим готовый шаблон баннера или рекламные шаблоны, то перейдите в Envato Elements и GraphicRiver. Если вы торопитесь, не забудьте проверить Placeit. У нас есть много вариантов для изучения!     Если вам понравился этот урок, тогда мы можем также предложить вам эти:

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