Уроки Веб и приложения Татьяна Гапонова 9 ноября 2012

Создаём регулятор громкости в Фотошоп

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

Автор этого урока научит Вас создавать алюминиевый регулятор со шкалой для графического, пользовательского интерфейса. Урок довольно простой, а результат замечательный.

Итоговый результат

Создание документа

Создайте новый документ Ctrl + N с размером 800 х 600 пикселей и с любым цветом фона. Установите цвет переднего плана # e4e4e4, а фоновый цвет # cfcfcf. Затем выберите инструмент Градиент (Gradient Tool) – тип градиента Зеркальный (Reflected).

Начиная с середины документа, протяните градиент вверх.

Совет: для того чтобы протянуть градиент идеально по вертикали, удерживайте клавишу Shift.
Как только залили фон градиентом, идём в меню Фильтр – Шум – Добавить шум (Filter > Noise > Add Noise). Настройки ниже на скриншоте.

Подготовка ручки регулятора

Выберите инструмент Эллипс (Ellipse Tool) и создайте четыре круга, каждый на отдельном слое. Все круги будут иметь названия для своих слоёв как на скриншоте.

Обратите внимание на расстояние краёв кружков друг от друга, добейтесь такого же результата. Хотя это и не критично, но желательно.

Теперь добавим стили слоя для слоя Knob Outer.

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Наложение цвета (Color Overlay)

У вас должен получиться такой результат.

Теперь добавим стили к слою Knob Inner.

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Наложение градиента (Gradient Overlay)

Обводка (Stroke)

У вас должен получиться такой результат.

Теперь добавим стили слоя для слоя Knob

Внутренняя тень (Inner Shadow)

Наложение градиента (Gradient Overlay)

Обводка (Stroke)

У вас должен получиться такой результат.

Наконец добавим стиль Наложение градиента (Gradient Overlay) на слой Knob Top.

Имеем такой результат на данный момент.

Создание тени

Дублируйте слой Knob Top. Щёлкните правой кнопкой мыши на копии и выберите пункт Растрировать слой (Rasterize Layer). Переименуйте копию на Knob Shadow, а затем переместите этот слой под оригинальный. Активируйте инструмент Перемещение (Move Tool) и нажмите на клавиатуре клавишу со стрелкой вниз несколько раз.

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

Совет: Чтобы увеличить расстояние инструмента Перемещение, работая со стрелкой на клавиатуре, удерживайте клавишу Shift.

Теперь идём в меню Фильтр – Размытие – Размытие по Гауссу (Filter> Blur> Guassian Blur). Применимте в настройках фильтра радиус 3-5 пикселей и уменьшите Непрозрачность (Opacity) слоя до 75%.

Добавление глубины

Выберите инструмент Прямолинейное лассо (Polygonal Lasso Tool) и создайте несколько треугольных выделений.

Залейте выделения белым цветом #ffffff и пусть залитые треугольники будут на отдельных слоях.

Размойте треугольники примерно на 3-4 пикселя. Затем загрузите выделение слоя Knob Top в меню Выделение – Загрузить выделенную область (Layer > Load Selection). Теперь инвертируйте выделение Выделение – Инверсия (Select> Inverse) и нажмите кнопку Delete на каждом слое с треугольником.

Отрегулируйте Непрозрачность (Opacity) каждого слоя с треугольником, чтобы добавить глубины регулятору.

Теперь добавим регулятору обычную, матовую, металлическую поверхность. Выберите инструмент Прямоугольное выделение (Rectangular Marquee Tool) и создайте выделение вокруг регулятора. Не снимая выделения, идём в меню Фильтр – Шум – Добавить шум (Filter > Noise > Add Noise). Настройки ниже на скриншоте.

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

Снимите выделение Ctrl + D, затем перейдите в меню Фильтр – Размытие – Радиальное размытие (Filter> Blur> Radial Blur).

Теперь измените режим наложения этому слою на Экран (Screen) и уменьшите Непрозрачность (Opacity) до 40%. Чтобы удалить области слоя с металлической текстурой, выходящие за пределы ручки регулятора, загрузите выделение слоя Knob Top, инвертируйте это выделение в меню Выделение – Инверсия (Select> Inverse) и нажмите кнопку Delete.

Создание метки

Над слоем Knob Top создайте чёрный кружок и чёрную с белой линии, расположенные рядом.

Установите режим наложения для слоёв с линиями на Мягкий свет (Soft Light), а для чёрного кружка примените следующие стили слоя.

Тень (Drop Shadow)

Наложение цвета (Color Overlay)

У вас должен получиться такой результат.

С левой и правой стороны регулятора, а так же сверху, добавьте текстовые метки.

Создание подсветки

Выберите инструмент Эллипс (Ellipse Tool) и создайте большой эллипс, который закроет весь регулятор.

Сделайте активной векторную маску на слое с эллипсом, затем добавьте еще один эллипс внутри исходного. Не забудьте включить функцию Вычесть из области фигуры (Subtract From Shape Area).

Используя инструмент Перо (Pen Tool) с настройкой Вычесть из области фигуры (Subtract From Shape Area), удалите часть эллипса.

Активируйте инструмент Произвольная фигура (custom shape) и выберите фигуру Цель регистрации 2 (Registration Target 2).

Нарисуйте эту фигуру над большим эллипсом.

Загрузите выделение фигуры Цель регистрации 2 (Registration Target 2) и сделайте активным слой с эллипсом. Теперь нажмите клавишу Delete. Удалите фигуру Цель регистрации 2, и у вас должен получиться такой результат.

Примечание переводчика: перед тем как вы нажмёте клавишу Delete, растрируйте слой с эллипсом.

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