Рисуем в Фотошоп панель входа в личный кабинет

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

Примечания к выполнению урока:

• программа: Adobe Photoshop CC;
• затраченное время: около 60 РјРёРЅСѓС‚;
• уровень сложности СѓСЂРѕРєР°: для начинающих, для пользователей среднего СѓСЂРѕРІРЅСЏ.

Шаг 1

Создайте новый документ с размером сторон 600 х 600 пикс. Включите видимость вспомогательного элемента Сетка (Grid). Для этого перейдите к : Вид > Показать > Сетка (View > Show > Grid). Теперь необходимо создать привязку. Для этого перейдите к : Вид > Привязать к >Сетка (View > Snap To > Grid).

Для удобства работы мы немного откорректируем параметры вспомогательной сетки. Для перехода к необходимым настройкам используйте комбинацию горячих клавиш Ctrl + K. В появившемся окне настроек введите значения как показано ниже на рисунке.

 

Шаг 2

Разблокируем Рё переименуем фоновый слой. Для этого, сделайте РґРІРѕР№РЅРѕР№ клик левой клавишей мыши РїРѕ фоновому слою. Р’ появившемся РѕРєРЅРµ введите РЅРѕРІРѕРµ РёРјСЏ «BG». Нажмите «ОК», для того что Р±С‹ внести новые значения.

Шаг 3

Р?зменим РѕСЃРЅРѕРІРЅРѕР№ цвет фона. Для этого РјС‹ будем использовать РѕРґРЅСѓ РёР· настроек «Стиль слоя» (Layer Style). Для перехода Рє данным настройкам сделайте РґРІРѕР№РЅРѕР№ клик левой клавишей мыши РїРѕ слою «BG». Затем перейдите Рє Наложение градиента (Gradient overlay). РќР° втором изображении ниже РІС‹ можете найти настройки цвета, которыми воспользовался СЏ.

Шаг 4

Приступим к созданию самой панели входа. Прежде всего выберем основной цвет на панели инструментов. Для этого установите цвет переднего плана на # F0F5FE. Затем активируйте инструментПрямоугольник с закругленными краями (Rounded Rectangle Tool).  В верхней части рабочей среды вы видите дополнительную панель настройки инструмента. Установите в соответствующем окне радиус закругления углов в 10 пикс. Затем нарисуйте фигуру с размером сторон 264 x190 пикс.

Примечание переводчика: для того, что бы нарисовать фигуру с заданными параметрами вам необходимо, в той же панели настроек инструмента поставить галочку возле дополнительной функции «Фиксированный размер»ту функцию вы можете увидеть нажав на мини треугольник возле значка с фигурой (в панели настроек инструмента).

Шаг 5

Создайте новый документ в  Photoshop (Ctrl+N). Задайте ширину и высоту рабочего холста: 5 х 5 пикс. Установите цвет переднего плана на # 000000. Выберите инструмент Карандаш (Pencil Tool) и установите размер кисти в 1 пикс. Зажмите левую клавишу мыши и нарисуйте точки, как показано в примере ниже. Теперь, нужно определить полученный орнамент как узо. Для этого перейдите к :Редактирование > Определить узор (Edit > Define Pattern). Задайте имя новому узору и нажмите «ОК».

Шаг 6

Перейдите на слой с прямоугольником со скругленными углами. Сделайте двойной щелчок левой клавишей мыши по слою, для перехода к меню «Стиль Слоя» (Layer Style). Затем используйте вкладки : «Наложение узора» (Pattern Overlay) и «Тень» (Drop Shadow). Настройки вы можете видеть ниже на картинках. При работе с «Наложение узора» (Pattern Overlay), воспользуйтесь узором, который мы создали ранее.

Шаг 7

Создайте дубликат слоя с прямоугольником с закругленными углами (Ctrl+J).
Сделайте щелчок правой клавишей мыши по слою-копии и в подменю выберите пункт «Очистить стиль слоя» (Clear Layer Style). Понизьте значение Заливки (Fill) до 0%. Перейдите к меню Стиль слоя(Layer Style), сделав двойной щелчок левой клавишей мыши по слою. Перейдите к вкладке Тень (Drop Shadow) и внесите значения как показано на картинке ниже.

Шаг 8

Создайте еще одну копию слоя с прямоугольником с закругленными углами (Ctrl+J). Перейдите к меню Стиль слоя (Layer Style). Внесите корректировки в настройки Тень (Drop Shadow), как показано ниже на рисунке.

Шаг 9

Р?змените цвет переднего плана РЅР° # E5E9F2, выберите Прямоугольник СЃ закругленными краями (Rounded Rectangle Tool) Рё установите радиус закругления углов 10 РїРёРєСЃ. РќР° РЅРѕРІРѕРј слое нарисуйте прямоугольник размером 220 С… 36 РїРёРєСЃ., Рё разместите его как РІ примере ниже.

Шаг 10

Стоя на слое с нарисованным ранее прямоугольником, перейдите к меню Стиль слоя (Layer Style). Настройки которые вам нужно внести, показаны ниже на изображениях.

Шаг 11

Создайте копию слоя с меньшим треугольником (Ctrl+J). Сделайте щелчок правой клавишей мыши по слою-копии и в подменю выберите пункт «Очистить стиль слоя» (Clear Layer Style). Затем активируйте инструмент Перемещение (V) и перетащите копию прямоугольника вниз, как показано в примере ниже.

Шаг 12

Добавим к копии прямоугольника Стили слоя (Layer Style).

Шаг 13

Добавим текст. Создайте новый слой, поверх всех предыдущих. Активируйте инструмент Текст (Horizontal Type Tool). Откройте меню Символы (РћРєРЅРѕ >В  Символы (Window > Character)). Выберите жирный шрифт РїРѕРґ названием Calibri Bold. Цвет для шрифта установите РЅР° В # CB7C6F, размер шрифта — 14 РїРёРєСЃ..
Затем введите необходимый текст.

Шаг 14

Сделайте двойной щелчок по слою с текстом  и в меню Стиль слоя (Layer Style), установите следующие значения для параметра Тень (Drop Shadow):

Шаг 15

Р?змените цвет переднего плана РЅР° # 848F93 Рё выберите инструмент Прямоугольник (Rectangle Too). Нарисуйте маленький прямоугольник размером 2 С… 14 РїРёРєСЃ.. Активируйте инструмент Перо + (добавить РѕРїРѕСЂРЅСѓСЋ точку)(Add Anchor Point Tool). Добавьте РґРІРµ новые опорные точки как показано РЅР° СЂРёСЃСѓРЅРєРµ ниже.

Шаг 16

Активируйте инструмент Стрелка (Direct Selection Tool). Р?спользуя данный инструмент, перетащите, созданные ранее опорные точки, РЅР° 3 РїРёРєСЃ. вверх.

Активируйте инструмент Угол (Convert Point Tool). Кликните один раз на новых опорных точках, чтобы удалить кривые.

Шаг 17

Активируйте инструмент Эллипс (Ellipse Tool). Нарисуйте овал с радиусами 6 х 8 пикс..  Разместите эллипс как показано на рисунке. В итоге вы получите мини-иконку с человечком.

Шаг 18

РЎРЅРѕРІР° активируйте инструмент Текст (Horizontal Type Tool). Перейдите Рє второму прямоугольнику СЃ закругленными краями. Откройте РѕРєРЅРѕ Символы (РћРєРЅРѕ >В  Символы (Window > Character)). Выберите жирный шрифт РїРѕРґ названием Calibri Bold. Цвет шрифта установите # 8D9799, размер шрифта — 16 РїРёРєСЃ.. Введите необходимый текст (символы).

Сделайте двойной щелчок по текстовому слою, для перехода к меню Стиль слоя (Layer Style). Введите параметры, как показано ниже.

Шаг 19

Активируйте инструмент Прямоугольник (Rectangle Too). Установите цвет переднего плана на # 4BB1FB. Нарисуйте форму размером 2 х 16 пикс.. Разместите прямоугольник, как показано ниже.

Шаг 20

Нарисуем ключ. Р?змените цвет переднего плана РЅР° # 848F93. Активируйте инструмент Эллипс (Ellipse Tool) Рё нарисуйте РґРІР° РєСЂСѓРіР° (РЅР° РѕРґРЅРѕРј слое): 7В  С… 7 РїРёРєСЃ. Рё 2 С… 2 РїРёРєСЃ. Совет: удерживайте РєРЅРѕРїРєСѓ Shift, РЅР° клавиатуре, чтобы создать идеальный РєСЂСѓРі. Разместите РєСЂСѓРіРё как РЅР° картинке ниже.

Шаг 21

Активируйте инструмент Выделение контура (Path Selection Tool). Сделайте щелчок РїРѕ контуру РєСЂСѓРіР° СЃ диаметром 2 С… 2 РїРёРєСЃ. Затем перейдите Рє панели настроек Рё нажмите РЅР° РёРєРѕРЅРєСѓ «Р’ычесть РёР· области фигуры» (Subtract Front Shape).

Шаг 22

Активируйте инструмент Перо (Pen Tool). Нарисуйте фигуру, похожую на ту, что вы видите ниже на рисунке.

Зажмите клавишу Shift и выберите оба слоя с фигурами, созданными ранее. Зажмите комбинацию клавиш Ctrl+T и разверните фигуры на 45 градусов по часовой стрелке.

Шаг 23

Рисуем иконки оповещения. Активируйте инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool). Нарисуйте форму, напоминающую квадрат размером 28 х 28 пикс., используйте цвет # 848F93.

Теперь выберите инструмент Перо (Pen Tool) и нарисуйте треугольник, используя тот же цвет # 848F93.

Шаг 24

Выберете РѕР±Рµ предыдущие фигуры Рё слейте РёС… РІ РѕРґРЅСѓ. Назовите полученный слой «Р—еленый значок». Перейти Рє РѕРєРЅСѓ Стиль слоя (Layer Style) для этой РЅРѕРІРѕР№ фигуры. Введите параметры, показанные РЅР° изображениях ниже:

Шаг 25

Р?змените цвет переднего плана РЅР° # 22BE69. Активируйте инструмент Произвольная фигура (Custom Shape Tool). Перейдите Рє панели настроек Рё обратите внимание РЅР° меню «Р¤РѕСЂРјР° растровой точки«. Нажмите РЅР° РјРёРЅРё треугольник Рё РІ появившейся вкладке найдите фигуру, напоминающую знак «РіР°Р»РѕС‡РєР°». Нарисуйте выбранный знак, как показано ниже.
Совет: удерживайте кнопку Shift, при рисовании, чтобы создать пропорциональную форму.

Шаг 26

Перейти к окну Стиль слоя (Layer Style) для фигуры, нарисованной в предыдущем шаге и введите параметры, как показано ниже:

Шаг 27

Создайте РєРѕРїРёСЋ слоя «Р—еленый значок», нажав комбинацию клавиш Ctrl+J. Разместите РєРѕРїРёСЋ значка возле второй строки РІРІРѕРґР° текста.

Р РёСЃ. 27

В 

Сделайте щелчок правой клавишей мыши по слою-копии с значком и выберите в подменю пункт Очистить стиль слоя (Clear Layer Style).

Шаг 28

Немного изменим внешний вид значка-копии. Для этого, сделайте двойной клик по соответствующему слою и внесите настройки, которые вы видите ниже, в меню Стиль слоя (Layer Style).

Шаг 29

Р?змените цвет переднего плана РЅР° # FFA2A1. Активируйте инструмент Прямоугольник (Rectangle Tool). Нарисуйте РґРІР° прямоугольника размером: 2 С… 7 РїРёРєСЃ. Рё 2 С… 2 РїРёРєСЃ.. Р?Р· данных фигур создайте восклицательный знак — «!».

Шаг 30

Активируйте инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool). Нарисуйте еще одну фигуру розового цвета, размером 100 х 34 пикс.. Поместите фигурку как показано на рисунке ниже.

Шаг 31

Добавим новой фигурке объем, воспользовавшись меню Стиль слоя (Layer Style).
Ниже показаны параметры, которые необходимо внести:

Шаг 32

Р?змените цвет переднего плана РЅР° # FFFFFF. Активируйте инструмент Кисть (Brush Tool). РўРёРї кисти  — круглая мягкая (hardness 0%), размер кисти  — 80 РїРёРєСЃ.
Создайте новый слой, нажав на соответствующую иконку.

Шаг 33

Стоя РЅР° РЅРѕРІРѕРј слое, РѕРґРёРЅ раз сделайте щелчок кистью РЅР° синем прямоугольнике. Переименуйте слой СЃ белой точкой РІ «Р‘елый блик».

Шаг 34

Зажмите клавишу Ctrl и сделайте щелчок по синему прямоугольнику, для того что бы получить выделение по контуру фигуры. Затем нажмите на мини-иконку в нижней части панели слоев, что бы добавить слой-маску.
Режим наложения слоя «Р‘елый блик» измените РЅР° РњСЏРіРєРёР№ свет (Soft Light). Непрозрачность (Opacity) данного слоя понизьте РґРѕ 80%.

Шаг 35

Объедините слои относящиеся Рє синему прямоугольнику РІ единую РіСЂСѓРїРїСѓ «РЎРёРЅСЏСЏ РєРЅРѕРїРєР°». Создайте дубликат данной РіСЂСѓРїРїС‹. Поместите РіСЂСѓРїРїСѓ-РєРѕРїРёСЋ как РЅР° изображении ниже.

Шаг 36

Мы подошли к финальному шагу. Осталось только дать имена синим кнопкам.
Для этого активируйте инструмент Текст (Horizontal Type Tool). РўРёРї шрифта — Calibri Bold; цвет шрифта — # FFFFFF, размер шрифта — 14 РїРёРєСЃ..
Введите необходимый текст.

Для того, чтобы текст лучше читался, добавим Рє нему Стиль слоя (Layer Style) «РўРµРЅСЊ» (Drop Shadow).

Теперь все готово! Мой результат вы можете рассмотреть ниже на рисунке:

Надеюсь, урок будет вам полезен!

Автор: Razvan Gabriel

Переводчик: Хитрён@