Продолжаем урок по созданию минималистичного макета. В этом уроке мы вы научитесь создавать макет блога в минималистичном стиле, используя новые технологии  Photoshop. В этом нам помогут новые возможности создания и сохранения стилей Character Styles и  Paragraph Styles.

Шаг 42

Создаем овальное выделение под слайдером. Создаем новый слой и заливаем выделение черным цветом. 

Шаг 43

Отменяем выделение  ( Ctrl + D ). Размывем его с помощью область с помощью Gaussian Blur.

Нижний бэкграунд

Шаг 44

Создаем еще одну прямоугольную область для нижнего фона. Используем инструмент Fill и Stroke, чтобы создать такую же заливку как и слайдер.

Нужно обратить внимание на его размещение. 

Добавляем текстуру Layer Style> Pattern Overlay .

Шаг 45 

С помощью инструмента Rectangular Marquee Tool создаем выделение, как показано на рисунке ниже.

Шаг 46

Создайте новый слой и поместите его за формой. Залейте выделение черным. Нажмите Ctrl+ T и щелкните правой кнопкой мыши, чтобы выбрать Perspective.

Немного перетащите верхние опорные точки.

Еще раз щелкните правой кнопкой мыши и выберите Scale. Перетащите верхнюю опорную точку вниз. 

Щелкните правой кнопкой мыши и выберите Warp. Перетащите левую и правую точки внутрь. 

Размойте область с помощью Gaussian Blur .

Измените Opacity до 20% .

Шаг 47 

Поверх нашего фонового прямоугольника создайте еще один белого цвета. Это будет наш бэкграунд для основного контента сайта.

Белый прямоугольник должен быть размещен таким образом, чтобы слева, справа с сверху оставались расстояния размером в 10 пикселей. Это сделать достаточно легко, поскольку вначале урока мы создали направляющие. Добавляем стили Layer Style> Outer Glow .

Шаг 48

Добавить новую направляющую на расстоянии в 25 пикселей от верхней части формы.

Название раздела

Шаг 49

Добавляем новый стиль символов для создания названия страницы и разделов с описанием. 

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

Шаг 50

Нарисуйте линию шириной в 5 пикселей. Цвет Fill: #938270, обводка  Stroke: None.

Контент блога

Шаг 51 

Для заголовков нужно создать еще один стиль.

Шаг 52

Добавляем название статьи и применяем созданный стиль.  

Шаг 53

Под названием нарисуем прямоугольник шириной в 4 колонки. Для заливки установить белый цвет, для обводки  Stroke задаем цвет # bebebe. Добавляем Layer Style> Stroke .

Шаг 54

В верхнюю часть формы вставляем изображение.  Конвертируем его в Clipping Mask ( Ctrl +Alt + G ).

Шаг 55

Нарисуйте прямоугольник с закругленными углами с Fill: # 8e8380 и Stroke: None. Конвертируйте его в Clipping Mask .

Шаг 56

Создаем новый стиль символов для создания информации в картинке. 

Шаг 57

Добавляем текст в верхнюю часть формы и применяем созданный стиль.  

Шаг 58

Активируйте инструмент Type и создайте текстовое поле шириной в 4 колонки.  Нажмите Type> Paste Lorem Ipsum, чтобы заполнить его автоматически сгенерированным текстом.

Шаг 59

Создайте новый стиль параграфа. Нажмите на новую иконку в панели Paragraph Styles.

Дважды щелкните на Paragraph Style и примените эти настройки.

Шаг 60

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

Для веб-дизайна нужно отключить  Hyphenation.

Шаг 61

Нарисуйте прямоугольник с закругленными углами Fill: # 8e8380, Stroke: None. Добавляем Layer Style> Pattern Overlay . Используем те же шаги, что и в создании слайдера. 

Шаг 62

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

Шаг 63

Давайте дублируем кнопку и изменим ее цвет на # f76b6a . Также делаем шрифт жирным. 

Шаг 64

Нажмите  Ctrl + J, f а затем удерживаю Alt, перетащите скопированную группу.

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

Шаг 65

Дублируйте кнопку Read More и измените текст на номер. Это будет постраничная навигация на сайте. Не забудьте создать одну из кнопок в состоянии при наведении.

Шаг 66: Footer

Давайте начнем работу с футером. Добавляем заголовок и описание. 

Шаг 67

Добавляем ссылку и создаем линию в 1 пиксель под ссылкой. Установим  Fill: None и  Stroke: #8e8380.

Шаг 68

Нажмите кнопку Дополнительные параметры More Options и выберите пунктирную линию.

Шаг 69

Добавьте еще несколько ссылок. 

Шаг 70

Дублируем поле. 

Шаг 71

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

Для создания активной ссылки добавляем линию в  5 пикселей.  Измените цвет на # f76b6a . 

Шаг 72

Добавляем еще один прямоугольник в нижней части. Установим для него  заливку #3d3123.

Информация в футере

Шаг 73

С помощью инструмента Type добавляем колонтитул.  Для контрастности добавляем небольшую тень.

Социальная Сеть

Шаг 74

Добавляем несколько социальных иконок.  Добавляем Layer Style> Outer Glow .

Шаг 75

Для иконок в нажатом состоянии измените прозрачность на  50% . Для условия при наведении для непрозрачности установите значение 100% .

Шаг 76

Возьмите бесплатную иконку курсора руку и поместите ее под наведенными ссылками. 

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

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

Демо     Скачать исходные файлы

Автор - Mohammad Jeprie  

Перевод — Дежурка

Первую часть урока вы можете посмотреть здесь:

Создаем минималистичный макет в Photoshop CS6 (часть 1)

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

• Целевая страница с помощью Photoshop 
• Создаем макет бизнес-сайта с помощью Photoshop 
• Создаем прайс-таблицу в Photoshop 
• Создание бесшовных текстур в Illustrator