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

Екатерина Гронь
0 комментарий

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

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

Шаг 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”).

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

Вот вы и сделали это! На этом у меня все. До скорого!

Подписывайтесь на канал @phtgr, чтоб не пропускать новые интересные уроки.

0 комментарий
0

Похожие статьи