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

1 апреля 2013 | Опубликовано в Уроки | 14 Комментариев »

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

Давайте посмотрим, что мы будем создавать в этом уроке.

Для выполнения урока, вам понадобится следующие ресурсы:

Бесплатный шрифт Free Font Sansation.
Текстура 26 Repeatable Pixel Pattern
Набор социальных иконок Free Social Media Icons
Иконка руки Hand Cursor Icon
Стоковое изображение Stock photo: Harvest 1
Стоковое изображение Stock photo: New York Streets 3
Стоковое изображение Stock photo: Daisy Age
Стоковое изображение Stock photo: A tree on the horizon
Стоковое изображение Stock photo: Sales figures
Стоковое изображение Stock photo: Time is Money!

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

Шаг 1

В этом уроке мы будем использовать фреймворк 960 GS . Нужно скачать шаблон с его главной страницы и найти внутри архива файл "12 Column Grid".

Нажмите на иконку глаза возле слоя 12 Col Grid, чтобы скрыть его видимость — пока он нам не понадобится.

Шаг 2

Пока размер нашего холста достаточно мал. Нажимаем Image> Canvas Size (или Ctrl +Alt + C ), чтобы сделать размер немного больше и устанавливаем опорную точку в центре.

Шаг 3

Нажмите Ctrl + R , чтобы показать линейку. Нажмите View> New Guide (Просмотр — Новая направляющая), чтобы создать новую направляющую. Выберите Vertical и Position (Положение): 185 px , чтобы создать вертикальную направляющую, которая будет сдвинута на 185 px от левого края.

Шаг 4

Создайте еще вертикальные направляющие на расстоянии в 150, 1095 и 1130 пикселей .

Подготовка Color Theme

Шаг 5

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

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

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

Шаг 6

Выберите слой Background и нажмите на значок замка, чтобы разблокировать этот слой. Дважды щелкаем по изображению, чтобы изменить цвет фона.

С помощью пипетки выберите второй цвет нашей цветовой схемы (# 948371).

Шаг 7

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

Шаг 8

Выберите созданную форму и перейдите в панель Option Bar. откройте Fill Color и нажмите иконку выбора цвета. Когда появится диалоговое окно Color Picker, выберите первый цвет. В поле Stroke выберите None

Шаг 9

Создайте новый слой и с помощью Rectangular Marquee Tool выделите верхний прямоугольник. Активируйте инструмент градиентной заливки и залейте выделенную область радиальным градиентом от белого к черному.

Измените его режим Blend mode на Screen и уменьшите непрозрачность Opacity до 37% .

Шаг 10

Создайте новый слой и назовите его «тень».

Нарисуйте прямоугольное выделение в нижней части второго фона, как показано на рисунке ниже. Нажмите Edit: Fill. Установить Use - Black. Нажмите OK , чтобы заполнить выделение черным.

Шаг 11

Размойте его с помощью Gaussian Blur. Нажмите Filter> Blur> Gaussian Blur .

Шаг 12

Удерживая нажатой Alt , поместите курсор между тенью и слоем со вторым фоном. Не отпуская Al, нажмите, чтобы преобразовать слой в обтравочную маску .Преобразовав его в Clipping Mask, тени сейчас размещены внутри верхнего фона.

Шаг 13

Измените прозрачность тени Opacity до 50%. Ниже вы можете увидеть результат при 100% увеличении.

Шаг 14

Пришло время, чтобы разместить все слои в одну группу. Чтобы сделать это, выберите все слои и нажмите Ctrl + G .

Header

Шаг 15

Нарисуйте прямоугольник в верхней части холста, как показано на рисунке.

Шаг 16

В панели Option Bar , установите цвет Stroke - # af9f8e .

Шаг 17

Для заливки выберите следующие цвета линейного градиента — от # d0c4b9 к #a89c91.

Название сайта

Шаг 18

В левой стороне шаблона добавляем название нашего сайта. Обратите внимание, чтобы размещение соответствовало рисунку ниже. Дважды щелкните текст и добавьте Drop Shadow . В уроке был использован шрифт Sansation .

Активируйте инструмент создания многоугольника Polygon tool и установите количество сторон - 3 . Нарисуйте треугольник с цветом заливки Fill: # 3d3123 и значение обводки Stroke: None. Добавляем к слою тень - Layer Style > Drop Shadow .

Шаг 22

Подчеркнем активную кнопку меню. Активируйте инструмент Линия и установить ее размер weight - 5 пикселей . Выберите цвет # f76b6a и линия должна быть без обводки.

Разместите линию под активным меню и добавьте расстояния между линией и прямоугольной формой в 1 пиксель.

Использование стилей символа

Шаг 23

Давайте сохраним настройки стилей для текста. Эта что-то похожее на упрощенную версию стилей символов в InDesign. Чтобы сохраним их, нужно активировать текст, а затем нажать на иконке "New Character Style".

Дважды щелкните на новый стиль и выберете следующие настройки.

Шаг 24

Выберите следующий пункт меню, а затем нажмите кнопку Character Style для применения настроек стиля. Если вы нашли знак плюс возле стилей, это означает, что они имеют разные настройки.

Шаг 25

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

Шаг 26

Так в чем же преимущество использования стилей символов? Они помогут нам централизовать настройки текста. Мы можем просто изменить стиль символа, чтобы отредактировать любой текст. Например, если изменить стиль Top Menu – Normal на Corbel, все элементы меню автоматически изменятся на Corbel.

Шаг 27

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

Шаг 28

Удалите выделение, нажав Ctrl + D. Размойте черную область, применив фильтр Filter> Blur> Gaussian Blur .

Слайдер

Шаг 29

Нарисуйте прямоугольную форму шириной в столбцов (см. ниже).

Для цвета заливки выберите # dfd1c2 . Цвет Stroke — # c8baac, размер 10pt. Нажмите на маленькую стрелку рядом с линией, чтобы убедиться, что выбрана опция Align Insid.

Шаг 30

Вставляем изображение, как показано на рисунке ниже. Конвертируйте его в Clipping Mask, нажав Ctrl + Alt + G . Изображение будет автоматически размещено внутри блока слайдера. При необходимости, вы можете изменять размер и перемещать его, никак не влияя на его рамку.

Шаг 31

Нарисуйте еще одну прямоугольную форму возле слайдер таким же цветом. Убедитесь в том, что форма будет привязана к крайней направляющей. Добавляем стили Layer Style> Pattern Overlay, используя текстуру пикселя картины. Уменьшаем непрозрачность, чтобы сделать ее мягче.

Шаг 32

Выше созданной формы рисуем новую прямоугольную форму с заливкой Fill: # b3aca5 без обводки. НажмитеCtrl + T , а затем поверните ее на 45 °. Преобразуйте форму слоя в Clipping Mask .

Шаг 33

Дублируйте форму и измените ее размер. Измените ее заливку на более темный цвет. Преобразуйте слой с формой в Clipping Mask.

Шаг 34

Повторите шаги, чтобы создать еще одну стрелку с другой стороны.

Шаг 35

Нажмите Ctrl и щелкните по рамке, чтобы создать выделение. Создайте новый слой и преобразуйте его в Clipping Mask. Залейте выделение черным.

Шаг 36

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

При необходимости, можно уменьшить непрозрачность теней.

Шаг 37

В углу слайлера нарисуйте прямоугольник с закругленными углами. Установите Fill # c8baac .

Шаг 38

Внутри фигуры нарисуйте круг. Значение обводки Stroke: цвет черный, размер — 1 пт, значение заливки нужно удалить.

Шаг 39

Используя инструмент Path Selection, создайте круглое выделение. Удерживая Shift + Alt, перетащите выделенную область, чтобы дублировать ее.

Повторите это, чтобы создать четыре круга.

Шаг 40

Выберите один из кругов. Нажмите Ctrl + Shift + J , чтобы разместить его на новом слое.

Шаг 41

В панели Option Bar удалите обводку и измените заливку на радиальный градиент от # e38989 к #bb5c5c. Добавим стили Layer Style> Outer Glow и Drop Shadow .