Форма входа на сайт

10 апреля 2015 · Глеб Х. · «Мир Фотошопа»

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

Шаг 1

Создайте новый документ в Фотошопе (Ctrl + N) с параметрами, указанными на скриншоте. Включите сетку (View → Show → Grid) и привязку к ней (View → Snap To → Grid). Откройте настройки программы (Ctrl + K) и во вкладке Guides, Grid & Slices введите значения, показанные на скриншоте. Поле Gridline Every устанавливает расстояние между линиями сетки, поле Subdivision — внутреннее деление. Чтобы выключить и включить сетку, используйте сочетание клавиш Ctrl + ‘.

Шаг 2

Кликните дважды на фоновом слое, чтобы разблокировать его. Назовите слой «BG».

Шаг 3

К фоновому слою «BG» примените стиль Gradient Overlay:

Шаг 4

Выберите инструмент Rounded Rectangle Tool (U) и создайте фигуру цветом #F0F5FE размером 264х190 пикселей.

Шаг 5

Сейчас я покажу, как создать узор. Создайте новый документ размером 5х5 пикселей с белым фоном. Выберите инструмент Pencil Tool (B) размером 1 пиксель и чёрным цветом нарисуйте узор, показанный на скриншоте. Чтобы сохранить этот рисунок в качестве файла узора, перейдите в меню Edit → Define Pattern.

Шаг 6

Вернитесь в основной документ и примените стиль Pattern Overlay к скругленному прямоугольнику.

А также Drop Shadow:

Шаг 7

Создайте копию фигуры (Ctrl + J) и удалите с неё стили через контекстное меню: пункт Clear Layer Styles. Уменьшите заливку до 0% и примените стиль Drop Shadow.

Шаг 8

Создайте ещё одну копию фигуры (Ctrl + J) и примените стиль Drop Shadow с такими параметрами:

Шаг 9

Снова выберите инструмент Rounded Rectangle Tool (U) и создайте фигуру размером 220х36 пикселей цветом #E5E9F2. Расположите её поверх предыдущей фигуры, как показано ниже.

Шаг 10

Примените следующие стили:

Шаг 11

Создайте копию полоски (Ctrl + J) и удалите стили. Опустите вторую полоску на 21 пиксель вниз.

Шаг 12

Примените следующие стили к нижней полоске:

Шаг 13

Вернитесь к первому полю. Выберите инструмент Horizontal Type Tool (T), откройте панель Character (Window → Character) и настройте шрифт «Calibri Bold», как показано на скриншоте. Напишите имя пользователя.

Шаг 14

К текстовому слою примените стиль Drop Shadow.

Шаг 15

Инструментом Rectangle Tool (U) создайте маленькую полоску цветом #848F93 размером 2х14 пикселей.

Выберите инструмент Add Anchor Point Tool и добавьте две якорные точки на верхнюю сторону на расстоянии 5 пикселей от углов.

Шаг 16

Выберите инструмент Direct Selection Tool (A) и выделите новые якорные точки. Нажмите клавишу стрелки вверх 3 раза, чтобы поднять точки на 3 пикселя.

Выберите инструмент Convert Point Tool и кликните на двух точках, чтобы убрать округлость.

Шаг 17

Выберите инструмент Ellipse Tool (U) и создайте овал размером 6х8 пикселей.

Шаг 18

Теперь займёмся вторым полем формы. Выберите инструмент Horizontal Type Tool (T) и на панели Character настройте шрифт, как показано на скриншоте. Напечатайте несколько звёздочек и примените к ним стиль Drop Shadow.

Шаг 19

Создайте вертикальную полоску размером 2х16 пикселей цветом #4BB1FB.

Шаг 20

Инструментом Ellipse Tool (U) создайте два круга цветом #848F93. Большой круг должен быть диаметром 7 пикселей, а маленький поверх него — диаметром 2 пикселя.

Шаг 21

Выберите оба слоя с кругами, кликните на любом из них правой кнопкой мыши и выберите пункт Merge Shapes. Затем выберите инструмент Path Selection Tool и кликните внутри маленького круга. На верхней панели выберите операцию Subtract Front Shape. Вы получите вырез внутри большего круга.

Шаг 22

Выберите инструмент Pen Tool (P) и дорисуйте ключ, как показано ниже. Оба векторных слоя объедините. Активируйте режим Free Transform (Ctrl + T) и поверните ключ на 45 градусов. Удерживайте Shift, чтобы вращение происходило с шагом в 15 градусов.

Шаг 23

Выберите инструмент Rounded Rectangle Tool (U), на верхней панели установите радиус на 3 пикселя. Создайте скругленный квадрат размером 28х28 пикселей. Затем инструментом Pen Tool (P) дорисуйте треугольник слева.

Шаг 24

Объедините треугольник и квадрат. Примените к полученному слою стили, показанные ниже.

Шаг 25

Выберите инструмент Custom Shape Tool (U) и в списке фигур выберите галочку. Создайте её размером 16х16 пикселей цветом #22BE69. Расположите галочку внутри зелёного квадрата.

Шаг 26

К галочке примените стиль Stroke.

Шаг 27

Создайте копию зелёного диалога, опустите её на второе поле и удалите стили.

Шаг 28

Примените другие стили:

Шаг 29

Инструментом Rectangle Tool (U) нарисуйте восклицательный знак цветом #FFA2A1. Должно быть две фигуры: прямоугольник размером 2х7 пикселей и квадрат размером 2х2 пикселя.

Шаг 30

Создайте скругленный прямоугольник с радиусом 5 пикселей размером 100х34 пикселя.

Шаг 31

Примените следующие стили:

70.jph

Шаг 32

Выберите инструмент Brush Tool (B) и настройте его, как показано ниже. Создайте новый слой (Ctrl + Shift + Alt + N).

Шаг 33

Нарисуйте белое пятно поверх синей кнопки.

Шаг 34

Выделите синий прямоугольник (удерживая Ctrl, кликните на миниатюре слоя). К слою с белым пятном добавьте маску, и она автоматически скроет всё, что находится за пределами выделения. Установите для слоя с белым пятном режим наложения Soft Light и уменьшите непрозрачность до 80%.

Шаг 35

Создайте копию синей кнопки и белого свечения на ней. Сдвиньте вторую кнопку вправо.

Шаг 36

Подпишите кнопки и примените стиль Drop Shadow.

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

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

Переведено с сайта www.photoshopstar.com, автор перевода указан в начале урока.