Проектирование рождественской электронной рассылки в Photoshop

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

Учебные активы 

Для того, чтобы следовать уроку вам понадобятся некоторые (свободно доступные) активы:

• Open Sans шрифт из Font Squirrel
• Playfair Dislay шрифт из Font Squirrel
• Bokeh of String Lights on Tree фото из Good Stock Photos
  
• Новогодние цитаты из BrainyQuote

Получаем готовый документ

Шаг 1

Начните с создания нового документа Photoshop (Файл > Создать...), используя настройки, показанные ниже. Большинство информационных бюллетеней электронной почты имеют определенную ширину около 620 пикселей. Обычно я использую 600 пикселей, но все, что ниже 620 пикселей нормально. Когда это будет построено в HTML, оно может быть адаптивным в любом случае.

Шаг 2

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

Примечание: Направляющие используемые для этого урока: вертикальные на 40 пикселей, 80 пикселей, 340 пикселей, 600 пикселей и 640 пикселей.

Совет: Вы также можете использовать GuideGuide плагин для Photoshop, чтобы сделать этот процесс еще быстрее.

Шаг 3

Придерживаясь этикета в Photoshop, мы будем держать все в порядке и поэтому легко ориентироваться и редактировать. Создадим три группы слоев с названием «Заголовок», «Сообщение», «Лучшее» и «Цитата».  Чтобы создать группы, перейдите в Слой > Новый > Группа... и дайте каждому название как указано. Для быстрого создания группы просто щелкните значок папки. 

Подготовка фона 

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

Шаг 1

Давайте сначала зададим фон электронного листа. Измените цвет переднего плана на очень светло-голубой # f6f9fb и нажмите Alt + Backspace, чтобы заполнить слой «Фон». Вы можете использовать любой другой оттенок для своего листа, но лучше использовать этот тонкий цвет, который не отвлекает получателя, но все же создает другое настроение.

Шаг 2

Теперь пришло время установить фон в безопасной зоне, где будет размещен весь контент электронного листа. Выделите Инструмент "Прямоугольник" (U) и нарисуйте белый #FFFFFF прямоугольник между первой и последний направляющей, разделенными на 600 пикселей.

Проектирование заголовка 

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

«Направьте отправителя, выкиньте воду и подведите прямо к делу».

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

Шаг 3

Откройте группу «Заголовок» и выберите инструмент «Горизонтальный текст» (T). Возможно, вам лучше написать название своей компании, а не использовать логотип, потому что, как уже упоминалось ранее, изображения могут быть отключены когда ваше письмо будет открыто, и это испортит восприятие, поскольку ваш логотип не будет виден.

Выберите шрифт, который вы используете для своего бренда, и напишите название своей компании, поместите его на левую верхнюю часть и оставьте немного пространства вокруг. В моем случае я использовал Open Sans (Bold) 18 пикселей размер и темно-серый # 434343 для цвета.

Шаг 4

Очень важно предоставить ссылку, которую люди могут  нажать и открыть письмо в своем браузере, если оно не очень хорошо отображается на почтовом клиенте. Просто простая текстовая ссылка будет выполнять эту работу, размещенная вверху экрана, чтобы читатели сразу встретили ее. Я использовал тот же шрифт Open Sans (Semibold) и изменил цвет на более яркий серый цвет #666666 и уменьшил размер шрифта до 13 пикселей. Наконец, поместите его в правый верхний угол письма. 

Шаг 5

Замечательно! Теперь нам нужно разместить изображение, чтобы привлечь внимание получателя.  Мы будем использовать рождественскую тематическую фотографию, добавим эффект градиента и вставим фото над всем этим.

Возьмите инструмент "Прямоугольник" (U) и нарисуйте прямоугольник размером 600x300 пикселей между первой и последней направляющей. Затем создайте новый слой поверх него и удерживайте клавишу Alt и наведите курсор на слой с фотографией, пока не увидите маленькую стрелку, указывающую вниз.  Когда вы увидите это, щелкните по нему, и вы создадите обтравочную маску.  Теперь выберите инструмент "Градиент" (G) и выберите градиент по умолчанию от красного до зеленого.

Теперь сделайте градиент, перетащив мышью с левого верхнего угла в нижний правый. Вы получите что-то вроде приведенного ниже примера. 

Шаг 6

После этого загрузите фото Bokeh of String Lights on Tree из Good Stock Photos и поместите его над слоем градиента, создающим обтравочную маску для этого слоя. Наконец нажмите Ctrl + T и измените размер фотографии.

Профессиональный совет: удерживайте нажатой клавишу Shift для пропорционального рисования / изменения размера.

Шаг 7

Теперь установите режим наложения слоев на Перекрытие.

Шаг 8

Наконец, давайте напишем наше основное сообщение.  Я использую белый #FFFFFF с жирным, но элегантным шрифтом Playfair Display (Полужирный курсив) размером 52 пикселя, чтобы изобразить праздничное чувство. При разработке электронной рассылки обязательно делайте свое сообщение коротким и понятным, чтобы пользователи сразу его получили.

Проектирование области сообщения

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

Шаг 9

Умно располагать дизайн ваших писем в одном столбце и выравнивать по центру, чтобы он мог быть легко адаптирован. Откройте группу «Сообщение» и выберите инструмент «Горизонтальный текст» (T). Я буду повторно использовать слой используемый для названия компании, увеличу размер шрифта до 32 пикселей и изменю ширину на Extrabold.

Шаг 10

Теперь пришло время сказать что-то более подробно, не слишком долго и попытаться привлечь внимание читателя, заставив читателя нажать кнопку призыва к действию, которую мы разработаем за мгновение.  Используя тот же инструмент "Горизонтальный текст" (T), запишите свой текст, я же использовал тот же цвет, что и для ссылки «Открыть в браузере» #666666 и Open Sans (Regular) размером 18 пикселей.

Шаг 11

Замечательно! У вас есть внимание читателя, и теперь пришло время вставить кнопку действия, чтобы ваше письмо приводило к чему-то полезному. Создайте новую группу под названием «CTA» и возьмите инструмент "Прямоугольник" (U), после чего измените цвет переднего плана на красный #de1816, который представляет рождественское настроение и нарисуйте прямоугольник. В моем случае это размер 240x40 пикселей. Затем выберите инструмент "Горизонтальный текст" (T) и введите сообщение кнопки. Я использовал белый #FFFFFF Open Sans (Bold) размер 14 пикселей.

Наконец, нам нужно закрыть блок, отделив его линией; Установите цвет переднего плана на светло-серый #eeeeee и выберите инструмент "Линия" (U) с шириной установленной в 1 пиксель. После этого нарисуйте горизонтальную линию между первой и последней направляющей. Оставьте некоторое пространство над линией. 

Профессиональный совет: удерживайте Shift, чтобы рисовать абсолютно прямые линии.

Проектирование области "Лучшее"

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

Шаг 12

Дублируйте ранее используемый слой заголовка, нажав Ctrl + J и перетащите его в группу «Лучшее» . После этого измените название и поместите его под линию по центру, чтобы поддерживать вертикальный ритм.

Шаг 13

Теперь мы перечислим некоторые лучшие статьи года.  Для этого урока я просто использую изображения статей, заголовки и описания из Tuts + Web Design.

Создайте новую группу под названием «Статья».  Возьмите инструмент "Прямоугольник" (U) и, удерживая клавишу Shift, нарисуйте квадрат размером 140x140 пикселей. Затем выберите изображение статьи и перетащите его в окно Photoshop, после чего создайте обтравочную маску, как и раньше, и измените размер изображения, если это необходимо.

Шаг 14

Прекрасно! Теперь нам нужно ввести заголовок статьи и краткое описание, чтобы читатель мог получить быстрый обзор перед нажатием. Я повторно использую слой заголовка раздела, дублируя его и уменьшая размер шрифта, а также дублирую слой описания из группы «Сообщение».

Шаг 15

Сверните группу «Статья» и дублируйте еще два раза, нажимая Ctrl + J. После этого переместите эти дублированные группы ниже первого, и вам нужно будет изменить названия, изображения и описания этих дублированных элементов. 

Шаг 16

Наконец, дублируйте группу «CTA» и слой с линией, выбрав их и нажав Ctrl + J, после чего переместите эти слои в группу «Лучшее» и поместите их ниже статей, оставляя достаточно места.

Проектирование цитаты и футера

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

Шаг 17

Откройте группу «Цитата», выберите инструмент «Горизонтальный текст» (T) и любую цитату из BrainyQuote. Скопируйте цитату и напишите ее с использованием того же элегантного шрифта, который мы использовали для наглядности в самом верхнем углу нашего информационного бюллетеня. В моем случае это  Playfair Display (Italic) размером 24 пикселя и серый цвет, используемый ранее #666666.

Шаг 18

Перейдите на сайт Twitter и скопируйте кнопку твитта. Сделайте снимок экрана, нажав Shift + CTRL + 4 и выбрав кнопку Tweet. После этого вставьте его и поместите ниже цитаты. 

Шаг 19

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

Поздравляю!

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

Мне бы хотелось услышать ваши отзывы и посмотреть результаты этого урока!