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





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

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


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

Подсказка

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

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

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



Дизайн страницы «Журнала благодарности»


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


Фотография пары на скамейке

Шрифт «PT Serif»

Шрифт «PLAYFAIR DISPLAY»

Шрифт «Source Sans Pro»

Подготовка холста



Шаг 1


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

Дизайн страницы «Журнала благодарности»


Шаг 2


Чтобы нам было удобнее работать, понадобятся направляющие. Их можно создать через меню Просмотр > Новая направляющая (View > New Guide). Создайте направляющие на отметках 200, 500, 700, 900 и 1200 пикселей. Ширина страницы сайта не должна превышать 1000 пикселей.

Дизайн страницы «Журнала благодарности»


Шаг 3


Чтобы не запутаться в слоях, лучше раскидать их по группам и давать осмысленные имена. Создайте три группы (Create New Group): для шапки сайта, содержимого и футера.

Дизайн страницы «Журнала благодарности»


Шапка сайта



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

Шаг 1


Внутри группы «Header» создайте чёрный прямоугольник инструментом Прямоугольник (Rectangle Tool). Размер фигуры – 1400х728 пикселей. Вставьте в наш документ фотографию двух людей и расположите её поверх прямоугольника. Назовите слой «IMG» и создайте обтравочную маску (Ctrl + Alt + G), чтобы фотография не выходила за пределы прямоугольника. Уменьшите непрозрачность слоя фотографии до 70%. В режиме Свободное трансформирование (Free Transform) измените её размер и положение.

Дизайн страницы «Журнала благодарности»


Шаг 2


Теперь мы создадим основною меню навигации. Создайте новую группу «Navigation» внутри группы «Header». Инструментом Прямоугольник (Rectangle Tool) создайте белую полоску между первой и последней направляющими. Высота прямоугольника должна быть равна 60 пикселям, а расстояние от верхнего края – 30 пикселей.

Дизайн страницы «Журнала благодарности»


Шаг 3


Вставьте логотип сайта на навигационную панель. В нашем случае мы создадим текстовый логотип, используя шрифт «Playfair Display (Bold Italic) » размером 26 пикселей цветом #0e0e0e.

Дизайн страницы «Журнала благодарности»


Для названий разделов сайта используйте шрифт «Source Sans Pro» размером 14 пикселей. Откройте панель Символ (Окно > Символ) (Window > Character) и увеличьте расстояние между буквами. Ссылку «Sign Up» сделайте зелёной (#96c218), а остальные ссылки – цветом #0e0e0e.

Дизайн страницы «Журнала благодарности»

Дизайн страницы «Журнала благодарности»


Мы закончили с навигационной панелью, можете свернуть группу.

Шаг 4


Под навигацией мы напишем вдохновляющую фразу. Так как фотография у нас тёмная, текст должен быть белым. Используйте шрифт «Source Sans Pro (Black) » размером 80 пикселей с высотой строки 86 пикселей. Расположите текст на расстоянии 120 пикселей от навигационной панели. Вокруг сообщения должно быть достаточно свободного пространства, чтобы его сочли важным.

Дизайн страницы «Журнала благодарности»


Теперь мы добавим ещё одну строчку текста, но меньшего размера. Для главных фраз мы использовали шрифт без засечек. Предлагаю поэкспериментировать и написать подзаголовок элегантным шрифтом с засечками: «Playfair Display (Italic) » размером 26 пикселей. Опустите маленькую строчку на 40 пикселей от заголовка.

Дизайн страницы «Журнала благодарности»


Шаг 5


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

Создайте новую группу «Example» и инструментом Эллипс (Ellipse Tool) нарисуйте круг диаметром 60 пикселей. Поверх круга расположите фотографию какого-нибудь человека и обрежьте её обтравочной маской (Ctrl + Alt + G).

Дизайн страницы «Журнала благодарности»


Создайте круг меньшего размера (30х30 пикселей) зелёного цвета (#96c218). Шрифтом «Source Sans Pro (Bold) » размером 14 пикселей белого цвета напишите цифру внутри зелёного круга.

Дизайн страницы «Журнала благодарности»


Справа от фотографии напишите имя человека и длительность периода благодарности. Имя должно быть написано шрифтом «PT Serif (Bold Italic) » размером 16 пикселей, а нижняя строка – шрифтом «Source Sans Pro (Regular) » размером 13 пикселей.

Дизайн страницы «Журнала благодарности»


Прежде чем переходить к секции контента, нужно нарисовать кнопку действия. Сделайте её прямоугольной и белой размером 280х60 пикселей. На кнопке напишите «START LIVING →"». Шрифт «Source Sans Pro (Semibold) » размером 16 пикселей цветом #0e0e0e. Трекинг (Tracking) установите на 140.

Дизайн страницы «Журнала благодарности»


Шаг 6


Сверните группу «Header» и раскройте «Content». Внутри создайте группу «Description». Здесь мы напишем описание к сайту, которое раскроет его суть.

Напишите заголовок шрифтом «Playfair Display (Black) » размером 60 пикселей на расстоянии 100 пикселей от фотографии.

Дизайн страницы «Журнала благодарности»


Инструментом Горизонтальный текст (Horizontal Type Tool) определите область размером 600х140 пикселей. Напишите описание шрифтом «PT Serif (Regular) » размером 18 пикселей цветом #666666. Высота строки – 28 пикселей. Опустите эту область на 50 пикселей от заголовка.

Дизайн страницы «Журнала благодарности»


Повторите кнопку действия, только измените цвет. Создайте копию группу «CTA», измените цвет прямоугольника на #96c218, а текст сделайте белым. Опустите кнопку на 50 пикселей от описания.

Дизайн страницы «Журнала благодарности»


Чтобы визуально отделить эту секцию, нарисуйте линию цветом #96c218 толщиной 1 пиксель при помощи инструмента Линия (Line Tool).

Дизайн страницы «Журнала благодарности»


Шаг 7


Создайте новую группу «Get Inspired». Скопируйте в неё заголовок и описание группы «Description» и измените текст.

Дизайн страницы «Журнала благодарности»


Скопируйте группу с иконкой человека и вставьте её в группу «Get Inspired». Переименуйте группу иконку в «Story». Измените цвет нижней строки на #666666 и замените фотографию.

Дизайн страницы «Журнала благодарности»

Дизайн страницы «Журнала благодарности»


Определите текстовую область размером 300х160 пикселей. Шрифтом «PT Serif (Italic) » размером 16 пикселей напишите сообщение от человека на фотографии.

Дизайн страницы «Журнала благодарности»


Создайте несколько копий группы «Story» и расположите их справа. Измените фотографии людей и сообщение каждого из них. Вниз добавьте разделительную линию.

Дизайн страницы «Журнала благодарности»


Шаг 8


Завершите секцию контента ещё одной кнопкой действия. Создайте новую группу «Email», скопируйте в неё заголовок и расположите его на расстоянии 100 пикселей от разделительной линии. Измените текст заголовка.

Дизайн страницы «Журнала благодарности»


Создайте прямоугольник цветом #f5f5f5 размером 430х60 пикселей. Напишете внутри «Enter your email».

Дизайн страницы «Журнала благодарности»


Скопируйте зелёную кнопку и расположите её справа от поля email.

Дизайн страницы «Журнала благодарности»


Шаг 9


Осталось создать футер. Внутри группы «Footer» создайте полоску высотой 230 пикселей на всю ширину страницы цветом #2d2d2d.

Дизайн страницы «Журнала благодарности»


Скопируйте логотип сайта и сделайте его белым. Опустите логотип на 50 пикселей от края футера.

Дизайн страницы «Журнала благодарности»


Напишите навигационные ссылки шрифтом «PT Serif (Regular) » размером 14 пикселей, а их заголовки - шрифтом «Source Sans Pro (Semibold) » размером 16 пикселей.

Дизайн страницы «Журнала благодарности»


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



Дизайн страницы «Журнала благодарности»



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

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

Ваше Имя

Ваш E-mail

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

Введите код: