Создание баннера

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

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 8 средняя оценка: 5 (рейтинг: 100%)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сейчас на примере покажу, как правильно делать баннер. Для этого вам нужен установленный 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 пикс.

И жмем “ок”.

 

Создание баннера

 

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

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

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

 

Создание баннера

 

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

 

Создание баннера

 

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

 

Создание баннера

 

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

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

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

  • размер - 15%.

 

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

 

Создание баннера

 

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

 

Создание баннера

 

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

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

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

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

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

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

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

 

Создание баннера

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

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

Добавить комментарий

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