Creativo - креативная среда для дизайнеров

7057 подписчиков

Рисуем в Фотошоп набор web-элементов

20 февраля 201920 фев 2019

5 мин

Оглавление

Шаг 1
Шаг 2
Шаг 3

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

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

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

Далее вы можете увидеть конечный результат нашей работы:

А теперь давайте начнем непосредственно наш урок:

Шаг 1

Для начала создадим новый документ (Ctrl+N) с размерами 450 пикселей в ширину и 255 пикселей в высоту:

Шаг 2

Теперь выставьте в качестве основного цвета (Foreground) #d8dde3 и залейте им ваш холст (это можно сделать, например, нажав сочетание клавиш Alt+Backspace). Далее создадим небольшой шум на нашем холсте, для этого идем в Фильтр - Шум - Добавить шум (Filter - Noise - Add Noise), выставляем значение 2% и нажимаем ОК.

Шаг 3

Шаг 4

Кликните правой кнопкой мыши на слое, созданном в предыдущем шаге, выберите Параметры наложения (Blending Options) и примените Наложение градиента(Gradient overlay), предварительно выставив цвет переднего плана (Foreground Color) #009CFF, а цвет фона (background color) 1D87CA.

Шаг 5

В данном шаге нам нужно применить параметр Тень (drop shadow). Характеристики у него должны быть следующие:

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): #979B9C
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Размах (Spread): 0
Размер (Size): 3

Шаг 6

Теперь выставим установки для Внутренней тени (Inner Shadow):

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): #8DDOFB
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Стягивание (Choke): 0
Размер (Size): 0

Шаг 7

В данном шаге применим к нашей фигуре Обводку (stroke). Выберите для нее типзаливки (Fill Type) Градиент (Gradient) с цветами от #O44F7F к #045E98.

Должно получиться что-то наподобие вот этого на скриншоте ниже. Заметили светлую линию в верхней части? Это эффект от применения Внутренней тени (Inner Shadow).

Шаг 8

Шаг 9

Стоя на слое с текстом "Normal", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените Тень (Drop Shadow) со следующими характеристиками:

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): #2BAAFA
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Размах (Spread): 0
Размер (Size): 0

Так будет выглядеть конечный результат для нашей "нормальной" кнопки:

Шаг 10

Теперь у нас стоит задача разработать дизайн кнопки в фокусе (Focused State). Хотя такую кнопку сделать проще, чем ту, что мы делали в предыдущих шагах.

Шаг 11

Кликните правой кнопкой мыши на слое, созданном в предыдущем шаге, выберите Параметры наложения (Blending Options) и примените Наложение градиента(Gradient overlay), предварительно выставив Цвет переднего плана (Foreground Color) #009CFF, а цвет фона (background color) 1D87CA.

Шаг 12

Теперь применяем параметр Тень (drop shadow). Характеристики у него должны быть следующие:

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): ##989D9D
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Размах (Spread): 0
Размер (Size): 3

Шаг 13

Теперь включим параметр Внутренняя тень (Inner Shadow):

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): 8DD1FC
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Стягивание (Choke): 0
Размер (Size): 0

Шаг 14

Далее включаем параметр Внешнее свечение (Outer Glow):

Режим наложения (Blend mode): Наложение (Overlay)
Цвет переднего плана (Foreground color): #000000
Непрозрачность (Opacity): 100%
Метод (Technique): мягкий (softer)
Размах (Spread): 100%
Размер (Size): 3
Диапазон (Range): 50%

Шаг 15

В данном шаге нам нужно добавить Обводку (Stroke):

Размер (Size): 1
Расположение (Position): снаружи (outside)
Режим наложения (Blend mode): нормальный (normal)
Тип заливки (fill type): Градиент (Gradient)
Стиль градиента (style): линейный (linear)
Угол (angle): 90
Масштаб (Scale): 100%

Для градиента выберите цвета: основной цвет (Foreground) #OO9CFF и фоновый цвет(Background) #45E98.

Здесь мы можем видеть, как будет выглядеть кнопка в фокусе. Теперь необходимо добавить текст.

Шаг 16

Напечатаем на ней слово "Focused".

После того как напечатали слово, добавим ему определенные детали.

Стоя на слое с текстом "Focused", кликните правой кнопкой мыши и выберите Параметры наложения (Blending Options). Затем примените параметр Тень (Drop Shadow) со следующими характеристиками:

Режим наложения (Blend mode): нормальный (Normal)
Цвет переднего плана (Foreground color): #2BAAFA
Непрозрачность (Opacity): 100%
Угол (angle): 90 градусов
Галочка в чекбоксе Глобальное освещение (Use Global Light) должна быть снята
Расстояние (Distance): 1
Размах (Spread): 0
Размер (Size): 0

Вот что у нас получилось с кнопкой в состоянии фокуса, выглядит довольно аккуратно, не так ли?

Теперь нам необходимо создать третью кнопку, уже в нажатом состоянии, она будет называться ("Pressed" или "Clicked"). Но, что касается этой части работы - я хочу, чтобы вы сделали ее самостоятельно, опираясь на работу, проделанную в предыдущих шагах. Ведь если я сделаю всю работу за вас, вы ничему не научитесь, не так ли? На самом деле, это достаточно просто и я даже дам вам подсказку. Просто скопируйте вашу кнопку в нормальном состоянии ("Normal button") и в параметрах наложения (blending options) вам нужно будет удалить одно свойство, изменить и заменить параметры для двух других. При этом градиент должен остаться точно таким же.

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