Как сконвертировать 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 в коде письма: 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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