Уроки Веб и приложения Владимир Фёдоров 4 сентября 2017

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

Сложность урока: Средний

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

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

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

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

Далее выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя и рисуем фигуру, как показано на скриншоте. Назовите этот слой "Кнопка в нормальном состоянии" ("Normal Button"). Так же было бы неплохо, если бы вы поместили данный слой в отдельную группу.

Шаг 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

Выберите инструмент Текст (Horizontal Type Tool), напечатайте слово "Normal", используя для него цвет #O65O7F.

Шаг 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). Хотя такую кнопку сделать проще, чем ту, что мы делали в предыдущих шагах.

Выбираем инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), выставляем радиус размером 2 пикселя. Создаем новую фигуру, аналогичную предыдущей, и располагаем ее рядом с ней. Назовите вновь созданный слой "Кнопка в фокусе" (Focused button).

Шаг 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) вам нужно будет удалить одно свойство, изменить и заменить параметры для двух других. При этом градиент должен остаться точно таким же.

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

Здесь вы видите полный набор элементов для пользовательского веб-интерфейса. Надеюсь, вам понравился данный урок.

Автор: Sanjay

Источник: sanjaykhemlani.com

Комментарии 18

Набор веб-элементов

ахахах... баттл?! Спасибо Ляльке за идею) было сложно, но интересно)

Мне кажется или подобный стиль оформления UI не актуален лет так 10?! Но, в любом случае, автору ОГРОМНОЕ спасибо за интересный опыт и полученные знания/навыки.

Хорошее исполнение урока!

Спасибо! Когда начинала урок, дала себе слово делать чётко по уроку. После 3-ей фигуры... понесло. Заметила, что немного увлеклась/отклонилась только уже в конце работы. =)

Спасибо, отличный урок!Пригодится точно.

Как то так)) Спасибо за перевод!

Спасибо за урок!

Спасибо за перевод!

Владимир, спасибо за перевод!

Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее