Хорошо разработанный баннер является основой вашей емейл рассылки. От него зависит, будет ли дальше адресат читать электронное письмо или закроет рассылку и безвозвратно отпишется от нее. Я советую вам больше сосредоточиться на дизайне баннера и попытаться выйти за рамки того, что делают ваши конкуренты.
В этой статье я хочу поделиться опытом, который в дальнейшем пригодится вам при создании баннеров для емейл-рассылки и научить вас делать свой первый баннер в программе Photoshop.
Где брать идеи для создания баннера?
У вас есть продукт или услуга, которую вы хотите показать людям в электронной рассылке. Несомненно этой работой должны заниматься маркетологи и дизайнеры. Но что делать, когда такой команды у вас нет?
В начале вы можете столкнуться с проблемой поиска идеи для баннера, поверьте, все дизайнеры рано или поздно с ней сталкиваются. И решается она достаточно просто. Есть уйма ресурсов в интернете, где можно вдохновиться самыми креативными идеями, из основных бесплатных могу выделить:
Немаловажно использовать качественные изображения при создании баннера, лучше всего, когда фотографии для баннера сделаны вами. Если же таких нет, подходящие всегда можно найти на бесплатных фотостоках, их достаточно много:
- Pngtree (огромная база бесплатных изображений и готовых шаблонов).
- Freepik (немного меньше, чем Pngtree).
- Pixabay (лучший фотосток, есть поиск и доступны разные размеры для скачивания).
- IM Free (есть поиск, но архив не такой большой, как у Pixabay).
- Pickupimage (в тройке лидеров среди стоков).
- Creative Commons Search (это скорее не сток, а поисковик по стокам, но иногда очень здорово выручает).
На платных фотостоках изображений гораздо больше, но за них придется заплатить. Из основных могу выделить:
Перейдем к пошаговому созданию баннера, где я покажу, как создать крутой баннер для емейл рассылки.
Пошаговая инструкция по созданию баннера для емейл-рассылки интернет-магазина
Баннер — первое что увидит получатель письма, поэтому он должен оставить только положительное впечатление, это сделает емейл-рассылку эффективнее. Потратьте на его разработку немного больше времени и результат проделанной работы сразу даст о себе знать.
Мы уже писали о том, как должен выглядеть крутой баннер для емейл-рассылки, а сегодня я поделюсь с вами навыками, которые вы сможете использовать в дальнейшем при создании баннера практически для любого промописьма, не только интернет-магазина.
А теперь самое интересное
Сейчас на примере покажу, как правильно делать баннер. Для этого вам нужен установленный Photoshop. Баннер я буду создавать для магазина, занимающегося продажей одежды и сумок. Я подобрал подходящую картинку с интернета, она достаточно яркая и хорошо подходит для баннера:
Не буду нагружать вас теорией по изучению программы, а попытаюсь показать то, с чем сталкивается дизайнер в повседневной работе.
Открываем фотошоп и создаем документ, в котором будем работать.
Нужно учитывать то, что баннер нужен для емейл-рассылки, и максимально допустимая ширина изображения при работе с eSputnik — 600 пикселей.
Высоту можно выбрать любую, но в дизайне нашего баннера будем использовать 450 пикселей, при такой высоте баннер будет отлично смотреться в шапке письма, и получатель будет видеть кроме баннера еще часть текста.
Рабочий документ готов, ничего сложного, не так ли?
Если все сделано правильно, должен открыться документ с исходными параметрами по высоте и ширине.
Основные элементы интерфейса Photoshop, с которыми нам предстоит работать:
- Рабочая область, в которой отображаются все графические элементы при создании баннера.
- Панель “Инструменты”.
- Панель “Слои” со структурой документа, в которой последовательно будут отображаться графические элементы.
Перетягиваем изображение в рабочую область:
В рабочем документе и на панели “Слои” появится изображение. Эти действия нужно подтвердить клавишей Enter или галочкой, я ее тоже отметил на скриншоте.
Пройдемся по инструментам, с которыми будем работать:
- Инструмент “Перемещение” (с его помощью можно перемещать то, что находится в документе);
- Ластик.
- Заливка.
- Текст.
- Выбор цвета.
Более подробно со всеми инструментами вы можете ознакомиться на сайте Photoshop.
Работа с фоном картинки
Инструментом “Перемещение” двигаем изображение к краю рабочей области:
Фон, на котором находится девушка, мне нравится, но что делать, когда цвет фона не подходит к общему оформлению емейл-рассылки? Для этого нужен “ластик”, а точнее “волшебный ластик”. Выбрать его можно нажатием правой кнопки мыши по ластику.
Данный способ менее трудоемкий, он подходит для этого изображения, но работает только с однотонным фоном, в нашем случае он голубой. В другой ситуации вам придется работать с инструментом “перо”.
Теперь, когда мы выбрали “Волшебный ластик”, жмем в любом месте изображения, в появившемся окне выбираем “ок”. Изображение готово чтобы работать “волшебным ластиком”.
Жмем по голубому фону, если вы все правильно сделали, фон должен удалиться.
Удаляем таким же способом оставшийся фон с изображения.
У нас есть изображение без фона, а фон находится на отдельном слое, его цвет можно заменить на любой другой. Выбираем инструмент “заливка”. Для того чтобы не перекрасить в другой цвет слой с девушкой, нужно изменить активный слой. Выберем слой “фон”.
Цвет выбрать можно на панели инструментов.
Выберите необходимый цвет и приступайте к заливке основного фона.
Создаем текст и призыв к действию
Для добавления текста выбираем соответствующий инструмент:
После выбора инструмента “Шрифт” появится панель с настройками его параметров (тип шрифта, размер, дополнительные параметры).
В перечне шрифтов будут отображаться все установленные шрифты, если их недостаточно, можно скачать и установить необходимые.
Добавим кнопку, которая будет выполнять функцию призыва к действию.
Для этого, с помощью инструмента “прямоугольник”, рисуем кнопку и добавляем нужную надпись.
Если в дальнейшем нужно изменить размер кнопки, сделать это можно с помощью комбинации клавиш CTRL+t, изначально выделив слой с кнопкой на панели “Слои”. Потянув за нужный угол, можно растянуть кнопку по ширине и высоте. По завершению подтвердит действие “ок” или Enter.
Цвет кнопки можно изменить двойным щелчком мыши по слою с кнопкой.
Если текст не отображается, нужно на панели “Слои” выделить текстовый слой и переместить его выше слоя с кнопкой.
Чтобы расположить текст по центру кнопки, выделяем слой с текстом и кнопкой с помощью клавиши CTRL на панели “Слои”.
Включаем инструмент “Перемещение”, на появившейся панели центрируем текст относительно кнопки.
Давайте добавим небольшую тень кнопке, тем самым выделив ее на фоне общего изображения:
- Выбираем слой с кнопкой, нажатием правой кнопкой мыши из выпадающего меню выбираем “Параметры наложения”
2. В появившемся окне включаем “тень”
3. Меняем значения:
- непрозрачность в пределах 60-70%;
- смещение - 10-20 пикс;
- размер - 50-60 пикс.
И жмем “ок”.
NB! Не забываем про иерархию слоев, если какой-то слой не отображается, значит сверху него находится другой слой, который его закрывает. Для этого перемещаем вышележащий слой ниже.
Последние штрихи и баннер готов!
Давайте на панеле инструментов выберем эллипс:
Нарисованный эллипс будет выходить за границы рабочей области, но его можно всегда отредактировать, выделив на панеле слоев и нажав комбинацию клавиш CTRL+t.
Добавим небольшую тень, чтобы визуально получился эффект наложения эллипса.
Настройки тени выбираем такие :
- непрозрачность - 25%;
- смещение - 3%;
- размер - 15%.
Осталось только добавить логотип.
Теперь созданный баннер можно легко использовать в рассылках. Нужно только добавить его в шаблон письма, сделать это можно в нашем адаптивном редакторе. Письмо будет выглядеть так:
Поздравляю вас с полезным новым опытом! Надеюсь, что статья помогла вам в создании своего первого баннера, и ответила на вопросы, с которыми вы столкнулись в процессе, а приобретенные навыки работы в программе Photoshop помогут вам с новыми рассылками.
Кстати, мы сделали достаточно много, чтобы вам было комфортно работать с редактором и даже создавать красивые баннера, не выходя из письма. Все необходимые инструменты редактора всегда под рукой, да и работать с ними достаточно просто.
С помощью нашего редактора вы сможете:
- без труда добавить кнопку, текст и даже видео в шаблон емейл письма;
- работать с несколькими слоями, и это не вызовет у вас трудностей и дискомфорта;
- использовать готовые элементы (меню, разделители, соц. сети), которые имеют ряд функциональных и визуальных настроек;
- создать свой собственный баннер с помощью блока “Баннер”, когда под рукой нет Photoshop.
А ещё с этим читают: