Рубрика: Photoshop Уроки | Урок прочитали: 854
 (голосов: 0)

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

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

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


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

Создайте новый документ 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, растрируйте слой с эллипсом.

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

Для левой части квадратиков добавьте следующие стили слоя

Тень (Drop Shadow)

Внешнее свечение (Outer Glow)

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

Для правой части квадратиков добавьте следующие стили слоя

Тень (Drop Shadow)

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

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


Автор: Richard Carpenter

Переводчик: Рыбка

           

Похожие файлы и публикации:

Создаём регулятор громкости в Фотошоп
Нам понадобятся для урока такие материалы: Пальмовый лист Шрифт
Создаём регулятор громкости в Фотошоп
В этом уроке автор покажет вам, как сделать картонную коробку, которую можно использовать для различных целей, например для иконок или для других дизайнерский идей.
Создаём регулятор громкости в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Создаём регулятор громкости в Фотошоп
Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом  #838383. Выберите инструмент Rounded tool (Прямоугольник со скругленными краями). Установите следующие настройки:
Создаём регулятор громкости в Фотошоп
В этом уроке Вы узнаете, как создать иконку в виде дома. Вот так будет выглядеть иконка в конце этого урока:
Создаём регулятор громкости в Фотошоп
В этом уроке Вы узнаете, как создать стильный музыкальный мини плеер, используя векторные инструменты фотошоп и стили слоя.
Создаём регулятор громкости в Фотошоп
В этом уроке мы с Вами будем рисовать зонт, используя различные инструменты, режимы наложения, стили слоя. Итак, приступим!
Создаём регулятор громкости в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Создаём регулятор громкости в Фотошоп
Иногда, бывает нужно быстро применить какой-либо эффект и в этом на помощь придут экшены. Одним нажатием кнопки, Вы без труда воссоздадите нужный эффект.
Создаём регулятор громкости в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Создаём регулятор громкости в Фотошоп
В этом уроке вы узнаете, как совместить различные стили слоя и использовать фильтры, чтобы создать несложный призрачный эффект для текста.
Создаём регулятор громкости в Фотошоп
В этом уроке вы научитесь создавать уникальный, необычный текстовый эффект в виде стильного блокнота. Идея автору урока пришла после того, как он увидел подобную иконку, и решил создать такой текст, в котором вы можете использовать своё имя, например.
Создаём регулятор громкости в Фотошоп
Итоговый результат:
Создаём регулятор громкости в Фотошоп
Мы будем рисовать кнопки, как на приставке NGP.
Создаём регулятор громкости в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Создаём регулятор громкости в Фотошоп
В то время, когда на смену перекидным табло приходят всё больше цифровые дисплеи, в таких местах, как аэропорты, вокзалы, автовокзалы, и так далее, они по-прежнему живут как символ путешествия. Используете ли вы их в интерфейсе приложения или ретро дизайне, автор уверен, что этот урок вы найдёте полезным и интересным.
Создаём регулятор громкости в Фотошоп
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.