Дополнения

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

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

наш канал

стать автором

09 октября 2017

ВНИМАНИЕ! На нашем сайте объявлен новый конкурс: Портрет героя по роману «Три мушкетёра».

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

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

04 октября 2017 1 914 просмотров | Сложность:

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

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

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

Шаг 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 Переводчик: Фёдоров Владимир
Прикрепить работу или скриншот Максимально-допустимый вес для загрузки изображения (jpg): 5 MB
Размещение ссылок внутри комментария допустимо только на этот список сайтов.
DeadHatOfMan4 часа назад3

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

Катя Ровеника13 часов назад8

Спасибо!

shu10ko18 октября 201711

сенкс

Josef Lebow16 октября 2017

___________________________________________________________

15OOO в день работая 15-20 минут за компьютером или ноутбуком!
Работа для желающих сайт -->> solo19.totalh.net
___________________________________________________________

Fotinoulita15 октября 201713

Спасибо за урок! Интересно...

MikanTsumiki15 октября 20178

Спасибо, очень простой урок!

zeron3313 октября 20178

Спасибо!

Superigrok11 октября 201716

Отличный урок, спасибо!

SvoeSolnyshko09 октября 20178

Спасибо

Андрей Генри08 октября 201718

Спасибо.

Angelbusya08 октября 201711

Спасибо огромное за урок, думаю обязательно пригодится!))

raido9108 октября 201710

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

Olga0707197807 октября 201712

СПАСИБО. Сын делал

Violixx06 октября 201711

спасибо!

Manush06 октября 201714

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

Mr.Evil06 октября 201718

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

АЛЬКИН06 октября 201718

спасибо)

СЕРЁГА05 октября 201717

мой регулятор,всем спасибо!

boyromchik05 октября 201717

Спасибо, было интересно)

Валера Решетняк05 октября 201717

спасибо

Almiz04 октября 201722

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

Mariy77704 октября 201724

Благодарю автора и переводчика за урок!

Наталья Хопта04 октября 201722

Спасибо.

Рудь Сергей04 октября 201724

Благодарю.

z_ivan04 октября 201720

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

Svetlana04 октября 201721

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

Лариса04 октября 201727

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

J.P.Monk04 октября 201726

Спасибо!

voki04 октября 201726

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

Авторизация


Регистрация

Наверх