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

Создаем индикатор процесса в Фотошоп

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

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

Создание такого индикатора с нуля действительно просто. Хорошая новость заключается в том, что в дальнейшем вы сможете менять цвет и дизайн согласно вашим потребностям.

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

Шаг 1

Запустите Фотошоп и создайте новый документ с шириной (width) 450 пикселей и высотой (height) 300 пикселей. Назовите данный слой "index", залейте его цветом #565a59. Далее перейдите в Фильтр - Шум - Добавить шум (Filter > Noise > Add Noise) и установите значение для него 1%.

Шаг 2

Активируйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)), установите радиус скругления 50 пикселей, и нарисуйте простую фигуру, подобную той, что на скриншоте ниже. Назовите данный слой "body". Залейте данную фигуру цветом #454847.

Шаг 3

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

  • Режим наложения (Blend mode): нормальный (Normal)
  • Цвет (Color): #B7B4B4
  • Непрозрачность (Opacity): 42%
  • Угол (Angle): 90
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Размах (Spread): 0
  • Размер (Size): 1

Шаг 4

Теперь применим параметр Внутренняя тень (Inner shadow)

  • Режим наложения (Blend mode): Умножение (Multiply)
  • Цвет (Color): #454847
  • Непрозрачность (Opacity): 75%
  • Угол (Angle): 90
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Стягивание (Choke): 0
  • Размер (Size): 1

У вас должно получиться так же, как на скриншоте ниже. Далее мы нарисуем непосредственно саму шкалу индикатора.

Шаг 5

Установите в качестве цвета переднего плана (Foreground Color) #030303, и, используя инструмент Область (горизонтальная строка) (Single Marquee Tool (M)), нарисуйте линию и залейте ее ранее названным цветом.

Шаг 6

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

Шаг 7

Создайте новый слой и назовите его "progress bar". Возьмите инструмент Перо (Pen tool), и нарисуйте линию (примерно половину от темной линии). Далее кликните правой клавишей мышки и выберите Выполнить обводку контура (fill stroke), установите размер 2 пикселя и используйте цвет #b3d754 (см. скриншот ниже).

Примечание переводчика: на мой взгляд, зеленую линию прогресса лучше отрисовать через инструмент Прямоугольная область выделения (Rectangular marquee tool) или через инструмент Прямоугольник (Rectangle tool).

Шаг 8

Кликните правой кнопкой мыши по этому слою, выберите во всплывшем меню Параметры наложения (Blending options) и в открывшемся диалоговом окне выберите параметр Внутренняя тень (Inner shadow). Установите следующие характеристики для данного параметра:

  • Режим наложения (Blend mode): нормальный (normal)
  • Цвет (Color): #ffffff
  • Непрозрачность (Opacity): 18%
  • Угол (Angle): 90
  • Поставьте галочку в чекбоксе Глобальное освещение (Use Global Light)
  • Расстояние (Distance): 1
  • Стягивание (Choke): 0
  • Размер (Size): 1

Шаг 9

Теперь применим Наложение градиента (Gradient overlay) с параметрами, как на скриншоте ниже. Градиент от #83d754 к #7d9e25.

  • Режим наложения (Blend mode): Нормальный (Normal)
  • Непрозрачность (Opacity): 100%
  • Стиль (Style): Линейный (Linear)
  • Угол (Angle): 90

Шаг 10

Теперь нам необходимо нарисовать ячейку, где будет отражаться количество процентов. Для этого нам необходимо повторить те же действия, которые мы выполняли на шагах со 2 по 4. Убедитесь, что высота данной ячейки соответствует высоте на слое "body", а ее ширина примерно такая, как вы видите на скриншоте ниже. Или я могу вам показать один классный трюк. Просто выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (M)) и нарисуйте фигуру как на скриншоте ниже, далее выберите слой "body", кликните по нему правой клавишей мыши и выберите Скопировать стиль слоя (copy layer style), далее перейдите на слой с ячейкой для Количества процентов (number percentage), кликните правой клавишей мыши и выберите Вклеить стиль слоя (paste layer style).

Шаг 11

Далее нам необходимо создать текст. Для этого установите в качестве цвета переднего плана (Foreground Color) #b3d754, шрифт Arial, размер 8 пунктов.

Часть с созданием светящегося наконечника индикатора процесса я оставляю для вашей самостоятельной работы, я уверен, вы справитесь с этим! Все, что вам нужно это добавить свечение (“glow”) и глубину (“depth”).

Вот вы и сделали это! Минималистичный индикатор процесса, который вы можете использовать в ваших проектах, вы можете изменять цвета и оригинальный макет или же сделать свой собственный. Главное, что данный урок отражает основную идею при создании подобных индикаторов. Надеюсь, вам понравился урок, и вы усвоили несколько новых приемов работы.

Урок в формате PSD

Автор: Sanjay

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

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

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

большое спасибо за урок)):two-hearts:

Индикатор процесса

спасибо за урок и его перевод

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

Круто, спасибо.

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

Сделал интерфейс плеера и интегрировал в него шкалу загрузки из этого урока.

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

спасибо за все!

спасибо за перевод !! немного своего добавил !)

Спасибо за урок и перевод.

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

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

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

Вписался урок в нужный контент. Спасибо

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

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

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

Большое спасибо за урок. Для отработки навыков для начинающих - самое оно !

Спасибо за урок :3

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

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

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

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


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

Предыдущая Следующая
Добавлена {{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-адрес, помогающих нам сделать его удобнее для вас. Подробнее