Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

203 788 чел. 396 959 работ 4 078 уроков
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Рисуем в Фотошоп набор 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

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

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

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

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

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

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

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

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

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

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

{{work.views}}

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

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


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

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

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

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

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

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

Комментарий

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


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

{{text}}

Исходник:

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

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

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

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

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

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

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

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

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

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


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

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

  • 1. На сайте запрещается размещать изображения, которые содержат нецензурную лексику, угрозы, оскорбляет, унижает чье-либо достоинство, а также явно или косвенно нарушает законодательство Российской Федерации.

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules