Результативное продвижение бизнеса в интернете!

г. Москва, м. Сокольники, ул. Маленковская, д. 32, стр. 3

с 10:00 до 19:00, пн.- пт. (сб./вс. - выходной)

Как создать шаблон новостной рассылки – 7 простых шагов

Электронная почта не утратила своей актуальности. Она будет с нами еще долго. А потому новостные рассылки по почте становятся все популярнее и важнее. Если вы хотите привлечь внимание потенциальных и существующих клиентов, информационные рассылки – отличный способ распространить информацию среди большой аудитории.

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

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

Конечный продукт

Вот пример того, как может выглядеть ваше информационное письмо, когда мы закончим этап проектирования:

Пример письма с новостной рассылкой
Рис. 1. Пример письма с новостной рассылкой

1. С чего начать?

Как правило, лучше всего создать свой шаблон с фиксированной шириной вместо подвижной («жидкой»). Это поможет избежать использования горизонтальных полос прокрутки в результате неиспользования полной ширины экрана. Создайте шаблон шириной в 550–600 пикселей и убедитесь, что важная информация находится на высоте 300–500 пикселей, так как это размер средней области предварительного просмотра большинства обычных почтовых клиентов.

2. Настройка документа в Photoshop

Откройте Photoshop и создайте новый документ шириной 800 пикселей и высотой 1 000 пикселей с разрешением 72 dpi. Убедитесь, что установлен цветовой режим RGB.

Начало создания новостной рассылки в Photoshop
Рис. 2. Начало создания новостной рассылки в Photoshop

Для примера выберем в качестве фона светло серый цвет. Создадим контейнер шириной 600 пикселей для размещения основного контента. Заполним его белым и расположим по центру документа.

Настройка цветовой палитры в Photoshop
Рис. 3. Настройка цветовой палитры в Photoshop

3. Разрешите пользователю просматривать почту в любом браузере

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

Я предлагаю добавить это уведомление в начало шаблона, используя шрифт Myriad Pro, размер 10 pt. Важно дать людям несколько вариантов того, как именно просматривать новостное сообщение, поскольку некоторые почтовые клиенты могут не загружать изображения из электронной почты по умолчанию. Чтобы улучшить доступность информации, всегда включайте ссылку для просмотра шаблона письма в веб-браузере.

4. Создайте заголовок письма для новостной рассылки

В этом учебном пособии я создаю шаблон под названием The Pet Digest, который дополняет мой новый блог под названием The Pet Anthology. Цель состоит в том, чтобы держать заинтересованных читателей в курсе последних событий через еженедельный информационный пакет, который приходит подписчикам. Поскольку брендинг в моем блоге уже установлен, выбор шрифтов, цвета и графики моего бюллетеня должен быть простым.

Заголовок блога The Pet Anthology
Рис. 5. Заголовок блога The Pet Anthology

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

Пример заголовка новостного письма The Pet Digest для блога The Pet Anthology
Рис. 6. Пример заголовка новостного письма The Pet Digest для блога The Pet Anthology

Здесь использованы следующие шрифты: Slab Tall X для слов Pet Digest, Champagne & Limousines для слов Our Weekly Bundle и Learning Curve для the.

5. Создание основной части новостного письма

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

Создание основной части новостного письма
Рис. 7. Создание основной части новостного письма

Затем я собираю контент, который будет представлен в новостном письме на ближайшую неделю. Опять же, заимствуя атрибуты дизайна, уже представленные в моем блоге The Pet Anthology, я создаю заголовок с помощью Museo Sans, перетаскивая главное изображение, а также копирую и вставляю текст статьи. Пунктирная граница, расположенная ниже, будет разделять каждое поле статьи.

Добавление контента в основную часть новостного письма
Рис. 8. Добавление контента в основную часть новостного письма

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

Дублирование контента в новостном письме для последующего макетирования
Рис. 9. Дублирование контента в новостном письме для последующего макетирования

Используя руководство, я вставляю оставшиеся две записи и удаляю дублирующийся контент.

Окончательный вид основной части новостного письма
Рис. 10. Окончательный вид основной части новостного письма

6. Добавьте ссылки на социальные сети

Я считаю нужным добавить область для ссылок на социальные сети и значков RSS, а также возможность позволить подписчику делиться новостями с друзьями. Я начинаю с создания прямоугольника шириной 252 пикселя и добавляю текст, чтобы побудить подписчика следить за нами в социальных сетях. Я использую значки социальных сетей, меняя цвета вокруг, чтобы отразить мой брендинг. Учитывая удобство использования писем, я считаю, что все должно быть максимально просто.

Вставленные ссылки на социальные сети и «Поделиться этим текстом с друзьями»
Рис. 11. Вставленные ссылки на социальные сети и «Поделиться этим текстом с друзьями»

Затем я дублирую прямоугольник и помещаю его вправо, включая в него надпись «Поделиться этим текстом с друзьями» шрифтом Museo сверху.

7. Добавьте нижний колонтитул

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

Добавление нижнего колонтитула к новостной рассылке
Рис. 12. Добавление нижнего колонтитула к новостной рассылке

Вывод

Вот и все! Надеюсь, этот урок дал вам хорошее представление о том, как создать функциональный электронный бюллетень. Дайте мне знать, если у вас есть какие-либо комментарии или вопросы о процессе проектирования!

 

Источник

 

Прорабатываем продукт, выделяем его на рынке и привлекаем целевых клиентов для компаний, которые устали конкурировать акциями и скидками. Велком!

Поделиться:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Условиями использования