Дополнения

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

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

наш канал

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

Camera Raw 10.3. Что нового?

3 апреля вышло очередное большое обновление пакета программ Creative Cloud. Это коснулось, в том числе, и Adobe Photoshop, особенно Adobe Camera Raw.

2 комментария 2506 просмотров 50617 апреля 2018

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

04 октября 2017 5 103 просмотра | Сложность:

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

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

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

Шаг 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
Размещение ссылок внутри комментария допустимо только на этот список сайтов.
BekaVeka09 марта 20188

Спасибо)

barios28 февраля 201813

СПСБ

nezomb21 февраля 201816

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

bakha.one21 февраля 201818

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

grigorash9918 февраля 201815

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

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

RoksiG22 января 201822

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

elf_owl16 января 201811

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

b.b.a199908 января 201812

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

Лялька10 декабря 201721

Спасибо! =)

Liafel07 декабря 20179

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

Ychiha06 декабря 201716

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

Octavian Cucuruzean25 ноября 201712

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

Kudmaine17 ноября 201725

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

Viktoriiusvik12 ноября 201716

Спасибо))

Hamle28 октября 201710

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

danny0725 октября 20179

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

ruslan_krav25 октября 20178

Благодарен за урок) Поэкспериментировал немножко:)

maxroyk24 октября 20179

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

DeadHatOfMan23 октября 201717

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

Катя Ровеника22 октября 201713

Спасибо!

shu10ko18 октября 201712

сенкс

Josef Lebow16 октября 2017

___________________________________________________________

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

Fotinoulita15 октября 201716

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

MikanTsumiki15 октября 201710

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

zeron3313 октября 201710

Спасибо!

Superigrok11 октября 201719

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

SvoeSolnyshko09 октября 201710

Спасибо

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

Спасибо.

Angelbusya08 октября 201711

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

Авторизация


Регистрация

Наверх