Электронная почта не утратила своей актуальности. Она будет с нами еще долго. А потому новостные рассылки по почте становятся все популярнее и важнее. Если вы хотите привлечь внимание потенциальных и существующих клиентов, информационные рассылки – отличный способ распространить информацию среди большой аудитории.
В статье я расскажу вам, как создать собственный шаблон новостной рассылки по почте в Adobe Photoshop. Мы будем использовать некоторые общие шаблоны, которые, как я считаю, очень эффективны.
После того, как вы закончите процесс проектирования, то будете готовы перейти к написанию кода и стилизации этого шаблона.
Содержание
Конечный продукт
Вот пример того, как может выглядеть ваше информационное письмо, когда мы закончим этап проектирования:
1. С чего начать?
Как правило, лучше всего создать свой шаблон с фиксированной шириной вместо подвижной («жидкой»). Это поможет избежать использования горизонтальных полос прокрутки в результате неиспользования полной ширины экрана. Создайте шаблон шириной в 550–600 пикселей и убедитесь, что важная информация находится на высоте 300–500 пикселей, так как это размер средней области предварительного просмотра большинства обычных почтовых клиентов.
2. Настройка документа в Photoshop
Откройте Photoshop и создайте новый документ шириной 800 пикселей и высотой 1 000 пикселей с разрешением 72 dpi. Убедитесь, что установлен цветовой режим RGB.
Для примера выберем в качестве фона светло серый цвет. Создадим контейнер шириной 600 пикселей для размещения основного контента. Заполним его белым и расположим по центру документа.
3. Разрешите пользователю просматривать почту в любом браузере
Я предлагаю добавить это уведомление в начало шаблона, используя шрифт Myriad Pro, размер 10 pt. Важно дать людям несколько вариантов того, как именно просматривать новостное сообщение, поскольку некоторые почтовые клиенты могут не загружать изображения из электронной почты по умолчанию. Чтобы улучшить доступность информации, всегда включайте ссылку для просмотра шаблона письма в веб-браузере.
4. Создайте заголовок письма для новостной рассылки
В этом учебном пособии я создаю шаблон под названием The Pet Digest, который дополняет мой новый блог под названием The Pet Anthology. Цель состоит в том, чтобы держать заинтересованных читателей в курсе последних событий через еженедельный информационный пакет, который приходит подписчикам. Поскольку брендинг в моем блоге уже установлен, выбор шрифтов, цвета и графики моего бюллетеня должен быть простым.
Представленное выше изображение является заголовком блога. Я собираюсь сохранить его внешний вид и внести небольшие изменения. Я начинаю с выбора и перетаскивания талисмана в шаблон письма для рассылки. Оттуда я беру также имя и лозунг и перетаскиваю их на новый документ. С некоторыми незначительными изменениями в тексте письмо выглядит следующим образом:
Здесь использованы следующие шрифты: Slab Tall X для слов Pet Digest, Champagne & Limousines для слов Our Weekly Bundle и Learning Curve для the.
5. Создание основной части новостного письма
Начните с создания прямоугольника шириной 600 пикселей под заголовком и протяните его ближе к нижней части страницы.
Затем я собираю контент, который будет представлен в новостном письме на ближайшую неделю. Опять же, заимствуя атрибуты дизайна, уже представленные в моем блоге The Pet Anthology, я создаю заголовок с помощью Museo Sans, перетаскивая главное изображение, а также копирую и вставляю текст статьи. Пунктирная граница, расположенная ниже, будет разделять каждое поле статьи.
Затем я дважды дублирую первую запись и перемещаю ее, чтобы заполнить остальные места под новости для этого письма. Скоро я поставлю новый контент в местах дублирования информации.
Используя руководство, я вставляю оставшиеся две записи и удаляю дублирующийся контент.
6. Добавьте ссылки на социальные сети
Я считаю нужным добавить область для ссылок на социальные сети и значков RSS, а также возможность позволить подписчику делиться новостями с друзьями. Я начинаю с создания прямоугольника шириной 252 пикселя и добавляю текст, чтобы побудить подписчика следить за нами в социальных сетях. Я использую значки социальных сетей, меняя цвета вокруг, чтобы отразить мой брендинг. Учитывая удобство использования писем, я считаю, что все должно быть максимально просто.
Затем я дублирую прямоугольник и помещаю его вправо, включая в него надпись «Поделиться этим текстом с друзьями» шрифтом Museo сверху.
7. Добавьте нижний колонтитул
Для завершения, я создаю нижний колонтитул, который позволит получателям письма связаться со мной, и ссылку, позволяющую отказаться от подписки на новостную рассылку. У каждого информационного бюллетеня должна быть ссылка или кнопка, позволяющая читателю легко отписаться от информационного бюллетеня, если он захочет.
Вывод
Вот и все! Надеюсь, этот урок дал вам хорошее представление о том, как создать функциональный электронный бюллетень. Дайте мне знать, если у вас есть какие-либо комментарии или вопросы о процессе проектирования!