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

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

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

Где брать идеи для создания баннера?

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

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

• behance;

• dribbble;

• pinterest;

• eSputnik email-examples.

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

• Pngtree (огромная база бесплатных изображений и готовых шаблонов).

• Freepik (немного меньше, чем Pngtree).

• Pixabay (лучший фотосток, есть поиск и доступны разные размеры для скачивания).

• IM Free (есть поиск, но архив не такой большой, как у Pixabay).

• Pickupimage (в тройке лидеров среди стоков).

• Creative Commons Search (это скорее не сток, а поисковик по стокам, но иногда очень здорово выручает).

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

• Depositphotos.

• Shutterstock.

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

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

Баннер — первое что увидит получатель письма, поэтому он должен оставить только положительное впечатление, это сделает емейл-рассылку эффективнее. Потратьте на его разработку немного больше времени и результат проделанной работы сразу даст о себе знать.

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

А теперь самое интересное

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

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

Открываем фотошоп и создаем документ, в котором будем работать.

Нужно учитывать то, что баннер нужен для емейл-рассылки, и максимально допустимая ширина изображения при работе с eSputnik — 600 пикселей.

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

Рабочий документ готов, ничего сложного, не так ли?

Если все сделано правильно, должен открыться документ с исходными параметрами по высоте и ширине.

Основные элементы интерфейса Photoshop, с которыми нам предстоит работать:

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

2. Панель “Инструменты”.

3. Панель “Слои” со структурой документа, в которой последовательно будут отображаться графические элементы.

Перетягиваем изображение в рабочую область:

В рабочем документе и на панели “Слои” появится изображение. Эти действия нужно подтвердить клавишей Enter или галочкой, я ее тоже отметил на скриншоте.

Пройдемся по инструментам, с которыми будем работать:

1. Инструмент “Перемещение” (с его помощью можно перемещать то, что находится в документе);

2. Ластик.

3. Заливка.

4. Текст.

5. Выбор цвета.

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

Работа с фоном картинки

Инструментом “Перемещение” двигаем изображение к краю рабочей области:

Фон, на котором находится девушка, мне нравится, но что делать, когда цвет фона не подходит к общему оформлению емейл-рассылки? Для этого нужен “ластик”, а точнее “волшебный ластик”. Выбрать его можно нажатием правой кнопки мыши по ластику.

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

Теперь, когда мы выбрали “Волшебный ластик”, жмем в любом месте изображения, в появившемся окне выбираем “ок”. Изображение готово чтобы работать “волшебным ластиком”.

Жмем по голубому фону, если вы все правильно сделали, фон должен удалиться.

Удаляем таким же способом оставшийся фон с изображения.

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

Цвет выбрать можно на панели инструментов.

Выберите необходимый цвет и приступайте к заливке основного фона.

Создаем текст и призыв к действию

Для добавления текста выбираем соответствующий инструмент:

После выбора инструмента “Шрифт” появится панель с настройками его параметров (тип шрифта, размер, дополнительные параметры).

В перечне шрифтов будут отображаться все установленные шрифты, если их недостаточно, можно скачать и установить необходимые.

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

Для этого, с помощью инструмента “прямоугольник”, рисуем кнопку и добавляем нужную надпись.

Если в дальнейшем нужно изменить размер кнопки, сделать это можно с помощью комбинации клавиш CTRL+t, изначально выделив слой с кнопкой на панели “Слои”. Потянув за нужный угол, можно растянуть кнопку по ширине и высоте. По завершению подтвердит действие “ок” или Enter.

Цвет кнопки можно изменить двойным щелчком мыши по слою с кнопкой.

Если текст не отображается, нужно на панели “Слои” выделить текстовый слой и переместить его выше слоя с кнопкой.

Чтобы расположить текст по центру кнопки, выделяем слой с текстом и кнопкой с помощью клавиши CTRL на панели “Слои”.

Включаем инструмент “Перемещение”, на появившейся панели центрируем текст относительно кнопки.

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

1. Выбираем слой с кнопкой, нажатием правой кнопкой мыши из выпадающего меню выбираем “Параметры наложения”

2. В появившемся окне включаем “тень”

3. Меняем значения:

• непрозрачность в пределах 60-70%;

• смещение - 10-20 пикс;

• размер - 50-60 пикс.

И жмем “ок”.

Последние штрихи и баннер готов!

Давайте на панели инструментов выберем эллипс:

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

Добавим небольшую тень, чтобы визуально получился эффект наложения эллипса.

Настройки тени выбираем такие :

• непрозрачность - 25%;

• смещение - 3%;

• размер - 15%.

Осталось только добавить логотип.

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

Поздравляю вас с полезным новым опытом!  Надеюсь, что статья помогла вам в создании своего первого баннера, и ответила на вопросы, с которыми вы столкнулись в процессе, а приобретенные навыки работы в программе Photoshop помогут вам с новыми рассылками.

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

С помощью нашего редактора вы сможете:

• без труда добавить кнопку, текст и даже видео в шаблон емейл письма;

• работать с несколькими слоями, и это не вызовет у вас трудностей и дискомфорта;

• использовать готовые элементы (меню, разделители, соц. сети), которые имеют ряд функциональных и визуальных настроек;

• создать свой собственный баннер с помощью  блока “Баннер”, когда под рукой нет Photoshop.

А еще, я подготовил для вас приятный бонус ?. По ссылке находятся файлы, необходимые для создания баннера.

В новых релизах мы подготовим для вас еще больше полезных функций!