24 Дек 2018
Как сконвертировать psd в html шаблон
О дизайне емейл-рассылок написано не одна сотня статей. Хорошо продуманная и сбалансированная визуальная часть письма повышает количество кликов в письме и количество ваших продаж. Поэтому преобразование шаблона, подготовленного вашим дизайнером в формате psd, один из важных и сложных этапов в подготовке емейл-рассылки.
Качество преобразования psd в html влияет на то, как ваша рассылка отобразится на экранах ноутбуков, планшетах и ​​мобильных телефонах клиентов.

Зачем создавать шаблон письма в Photoshop?

Обычно с шаблоном в формате psd проще поставить ТЗ верстальщику. В Photoshop отображаются все необходимые элементы: размер и название шрифтов, слои с различными элементами письма. Верстальщики “читают” такой макет и на его основании создают письмо в виде HTML.

Почему отправка письма должна быть в HTML?

Начнем с того, что не все сервисы для отправки писем даже будут поддерживать такой формат, поэтому вероятнее всего его придется сконвертировать в png или jpeg. Но если ваше письмо будет состоять только из картинок - с ним может возникнуть гораздо больше проблем. Есть ряд причин для конвертации электронного письма из PSD в HTML.

 

  1. Отображение ваших рассылок. Продуманный и тщательно отрисованный дизайн не будет ничего стоить, если в почте письмо “поедет” или не отобразится. Чтобы письмо корректно отображалось в почтовых ящиках получателей рассылки, оно должно быть правильно сверстано. Просто порезав psd и собрав его в редакторе в кучу, вы можете получить совсем противоположный результат.
  2. Блокировка писем только из картинок. Большинство спам-фильтров на почтовых серверах блокируют сообщения, состоящие из одной картинки. К тому же, во многих браузерах и почтовых клиентах есть функция блокировки картинок.
  3. Адаптивность письма. Большая половина ваших клиентов будет просматривать почту на экране своего мобильного телефона. Это означает, что вы не можете позволить себе разочаровать своих мобильных пользователей
  4. Существуют более 50 современных почтовых клиентов, в любом из которых ваши письма должны отображаться правильно. Html дает возможность учесть практически все особенности почтовых клиентов, чтобы письмо отображалось корректно.
  5. HTML даёт возможность анализировать результаты. Чтобы использовать любой сервис для отправки рассылки, вам нужно будет письма  преобразовать в формат HTML. Сервисы рассылок позволяют отслеживать эффективность ваших емейл-кампаний по клику на каждую ссылку в письме. 
  6. Больше возможности для персонализации. Хорошее письмо - это письмо, актуальное для получателя. Поэтому ваша рассылка должна быть персонализированной. Для этого в коде письма используются переменные и динамический контент, что опять-таки невозможно сделать в письме из одной картинки. 

Давайте рассмотрим на примере, как оптимально перенести макет письма в систему рассылок.

Получаем макет письма в формате PSD

 

Макет



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

Основные требования к шаблону следующие:

 

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

 

  • Табличная верстка  
Из-за того, что у почтовых сервисов нет общих правил отображения html писем,  используется табличная верстка. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная верстка гарантирует, что письмо будет корректно отображено на всех платформах и не “расползется”. 

 

  • Шрифты – это важно!
Существует достаточно ограниченное количество поддерживаемых почтовиками шрифтов, поэтому используем стандартные: Arial, Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana. Текст необходимо разбивать на смысловые абзацы, использовать разный размер шрифта, заголовки и подзаголовки.

 

  • Соотношение текстовой части и изображений.
Учитывая то, как много почтовых клиентов по умолчанию блокируют загрузку картинок, может получиться так, что текстовое содержание единственная вещь которую увидят ваши получатели. Проверяйте соотношение текста и картинок, идеально - 50:50 или 60:40, не делайте письмо одним изображением.  


Адаптируем макет psd для рассылки

Давайте рассмотрим на примере, как правильно адаптировать psd для email-рассылки. 

Ознакомление с макетом

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

 

ширина письма


Макет стандартный, состоит из хедера, контентной части и футера:

 

структура письма


Чтобы получать информацию об отдельных объектах макета, включаем инструмент «Автовыделение»:

 

Автовыделение

 

Теперь мы можем кликнуть по любому элементу макета и он будет выбран в панели слоев. С помощью автовыделения получаем информацию о шрифтах.
Используемый шрифт текста - Arial, размер шрифта для текста 12 px, для заголовка - 24 px. Цвет заголовка #484a43, 

 

пример
 

цвет шрифта контента #333333, цвет ссылок #6d7e44

пример
 

Инструменты Photoshop позволяют сохранять изображения в формате .jpg c помощью вкладки “Набор изображений” (Файл → Генерировать → Набор изображений) 
Цвет фона всего письма и хедера: #f0f2ea.
В нашем макете изображения уже подготовлены отдельно, что немного упрощает задачу. 
Основные данные из макета получены, теперь нужно сформировать html шаблон для рассылки. 

Перенос макета в редактор

Редакторы создания сообщений встроены практически во все сервисы рассылок. Принцип работы большинства таких редакторов - Drag&Drop, то есть мы выбираем нужный блок и переносим его на рабочую область. Наша задача - кастомизировать стандартный шаблон под существующий макет. 
Для создания письма можно выбрать любой из стандартных шаблонов eSputnik: 

 

выбор шаблона


Для создания письма я выбрала первый шаблон “Промописьмо”:

 

Промо

 

Создание оформления


Начинаем работу с вкладки “Оформление”, в которой прописываем полученную информацию о шрифтах и фоне письма. Заполняем разделы “Общие”, “Заголовки”, “Хедер”, “Футер”.
На вкладке “Общие” заполняем цвет фона и контента письма, подставляем информацию о типе, размере и цвет шрифте согласно шаблону.

 

Общие

 

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

 

Отступы

 

В разделе “Заголовки” прописываем тип, размер и цвет шрифта заголовков согласно макету:

 

Заголовки

 

В разделе “Хедер” прописываем тип, размер и цвет шрифта заголовков согласно макету, заполняем данные о фоне письма и контента:

 

Хедер

 

По аналогии заполняем информацию в разделе “Футер”:

 

футер

 

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

Прописываем отображение письма на мобильных устройствах на вкладке “Адаптивность”.

 

Адаптивность

 


Вся информация, добавленная в “Оформление”, отображается в разделе CSS в коде письма: 

 

css

 

После того, как мы прописали всю информацию на вкладке “Оформление”, переходим на вкладку “Контент”.

 

Создание контентной части письма

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

Полоса

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

Создаем шапку письма: добавляем лого и текст.

хедер


Не забываем прописать альтернативный текст и ссылку на ваш сайт в логотипе:


Переходим к контентной части письма и добавляем полосу для контента. В структуру добавляем блок “Картинка”:

Картинка


Для заголовка добавляем еще одну структуру с блоком “Текст”:

Текст

К тексту применяем форматирование, ставим Заголовок 2:

Заголовок


Для следующей части письма выбираем структуру из 2-х частей:

2 колонки


Уравниваем контейнеры структуры между собой для корректного отображения, нажав в меню на знак равно:

Знак равенства

В структуру добавляем блок “Картинка” и 2 блока для текста:

2 блока


Заполняем данными:

контент

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

структура


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

Футер

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

Предварительный просмотр


Обратите внимание, что помимо вкладки “Адаптивность”, отображение письма на мобильном устройстве можно корректировать непосредственно в процессе создания письма:

Отображение


Посмотреть результат.

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

Просмотр


Хотите потренироваться? Шаблон в формате psd доступен по ссылке.

Вам понравился материал? Оцените:

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

Смотрите также:

С этим читают:

113
5
Дмитрий Спунтик | января 16, 2019
272
6
Наталья Устименко | января 14, 2019
187
5
Даша Зенченко | января 10, 2019