Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:



Дизайн поздравительного письма


Ресурсы урока:


Шрифт «Open Sans»

Шрифт «Playfair Display»

Эффект «Bokeh»

Новогодние цитаты


Подготовка документа



Шаг 1


Создайте новый документ в Фотошопе (Ctrl + N) с такими параметрами:

Дизайн поздравительного письма


Шаг 2


Чтобы разграничить область, нам потребуются направляющие. Через меню Просмотр > Новая направляющая (View > New Guide) создайте вертикальные направляющие на отметках: 40px, 80px, 340px, 600px и 640px.

Дизайн поздравительного письма


Шаг 3


Когда Вы работает с большими проектами, лучше держать все слои в порядке и хорошей организации. Разделяйте всё по группам и давайте осмысленные имена. Сейчас Вам нужно создать несколько групп: «Header», «Message», «Best» и «Quote». Чтобы создать группу, перейдите в меню Слой > Новый > Группа (Layer > New > Group), либо кликните на иконке в нижней части панели слоёв.

Дизайн поздравительного письма


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



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

Шаг 1


Залейте фоновый слой цветом #f6f9fb при помощи инструмента Заливка (Paint Bucket Tool).

Дизайн поздравительного письма


Шаг 2


Теперь нужно определить фон области, где будет находится всё содержимое. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте белый прямоугольник между первой и последней направляющими, которые стоят друг от друга на расстоянии 600 пикселей.

Дизайн поздравительного письма


Шапка



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

Шаг 3


Раскройте группу «Header» и инструментом Горизонтальный текст (Horizontal Type Tool) напишите название компании, которая отправляет письмо. Важно упомянуть, что лучше не использовать иконки и логотипы, так как у получателей письма может быть отключено отображение картинок, и они не увидят то, что Вы хотите показать.

В уроке мы будем использовать шрифт «Open Sans (Bold) » размером 18 пикселей цветом #434343.

Дизайн поздравительного письма


Шаг 4


Выберите шрифт «Open Sans (Semibold) » размером 13pt цветом #666666 на правой стороне оставьте текстовую ссылку. Это гарантирует, что получатель письма увидит содержимое в должном виде, ведь почтовые клиенты могут неправильно отобразить Ваш дизайн.

Дизайн поздравительного письма


Шаг 5


Следующая часть – это поздравление. Мы вставим красивую рождественскую фотографию и наложим на неё градиент.

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру размером 600х300 пикселей между первой и последней направляющей. Создайте новый слой с обтравочной маской (Ctrl + Alt + G). Выберите инструмент Градиент (Gradient Tool) и настройте так:

Дизайн поздравительного письма


Протяните градиент из верхнего левого угла к правому нижнему.

Дизайн поздравительного письма


Шаг 6


Вставьте фотографию с эффектом «Bokeh» в наш документ и расположите её поверх градиента. Создайте обтравочную маску.

Дизайн поздравительного письма


Шаг 7


Установите режим наложения Перекрытие (Blending Mode – Overlay) для фотографии.

Дизайн поздравительного письма


Шаг 8


Выберите шрифт «Playfair Display (Bold Italic) » размером 52 пикселя и напишите белым цветом поздравление. Пусть оно будет коротким и понятным.

Дизайн поздравительного письма


Послание письма



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

Шаг 9


Рекомендуется составлять содержимое письма в одну колонку. Такая разметка воспринимается лучше.

Раскройте группу «Message» и напишите сообщение тем же шрифтом, что и название компании, только увеличьте его до 32 пикселей и задайте начертание Extrabold.

Дизайн поздравительного письма


Шаг 10


Под заголовком напишите более детальную информацию, которая бы заинтересовала человека и склонила его к прочтению полного текста сообщения. Используйте шрифт «Open Sans (Regular) » цветом #666666 размером 18 пикселей.

Дизайн поздравительного письма


Шаг 11


Сейчас мы создадим кнопку, которая направит получателя на страницу с полным текстом сообщения. Создайте новую группу «CTA» и внутри создайте прямоугольник цветом #de1816 размером 240х40 пикселей. Подпишите кнопку шрифтом «Open Sans (Bold) » размером 14 пикселей белого цвета.

Дизайн поздравительного письма


Под кнопкой нарисуйте разделительную линию цветом #eeeeee толщиной 1 пиксель. Используйте инструмент Линия (Line Tool). Чтобы линия была прямой, удерживайте клавишу Shift.

Дизайн поздравительного письма


Секция «Лучшее за год»



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

Шаг 12


Создайте копию заголовка предыдущей секции и измените текст. Перенесите её в другую группу.

Дизайн поздравительного письма


Шаг 13


Создайте новую группу «Article» и инструментом Прямоугольник (Rectangle Tool) создайте квадрат размером 140х140 пикселей. Поверх него расположите фотографию или картинку статьи и создайте обтравочную маску (Ctrl + Alt + G).

Дизайн поздравительного письма


Шаг 14


Напишите название статьи и краткое описание. Название статьи должно иметь тот же шрифт, что и название секции, но меньшего размера.

Дизайн поздравительного письма


Шаг 15


Создайте несколько копий группы «Article» и опустите их вниз. Измените сами статьи.

Дизайн поздравительного письма


Шаг 16


Создайте копию группы «CTA» и опустите в текущую секцию. Измените название кнопки.

Дизайн поздравительного письма


Цитата и футер



Шаг 17


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

Дизайн поздравительного письма


Шаг 18


Откройте страницу Твиттера, сделайте скриншот экрана и вырежьте кнопку.

Дизайн поздравительного письма

Дизайн поздравительного письма


Шаг 19


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

Дизайн поздравительного письма


Конечный результат:



Дизайн поздравительного письма



Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: