Создаем графический интерфейс ручки регулятора громкости

В этом уроке узнаем, как рисовать матовую алюминиевую ручку для графического интерфейса пользователя (GUI). Урок довольно простой, но результат в итоге блестящий в прямом и переносном смысле.
То, что мы будем создавать:

Шаг 1
Создайте новый документ (Ctrl + N) 800 х 600 пикселей с любым цветным фоном. Установите основной цвет # e4e4e4 и цвет фона # cfcfcf затем выберите «Gradient Tool» (G). С «Gradient Tool» (G), выбираем тип отражение градиента:

Перетащите градиент на холсте, начиная с середины холста и перетаскивая вверх.
Как только фоновый градиент будет применен, добавьте фильтр шум, перейдя в «Filter> Noise> Add Noise», используйте настройки ниже.

Шаг 2
Выберите «Ellipse Tool» (U), то создайте 4 эллипса все в отдельные слои, на рисунке ниже показано более подробно.

Обратите внимание, как некоторые эллипсы находятся дальше друг от друга, чем другие. Это не принципиально, но попробуйте расположить их так близко, как вы только сможете. Давайте теперь начнем добавлять наши стили, мы начнем с " Knob Outer Layer".

У вас должно получиться что-то вроде этого.

Затем добавьте следующие стили слоя на " Knob Inner Layer».

Теперь у вас должно получиться что-то вроде этого.

Добавьте следующие стили слоя на " Knob Layer».

Получим что-то вроде этого.

Наконец, добавьте Gradient Overlay к слою «Knob Layer Top».

Теперь вы должны иметь нечто, что выглядит следующим образом.

Шаг 3
Дублируйте " Knob Top Layer ", затем щелкните правой кнопкой дублированный слой и выберите «Rasterize Layer». Переименуйте слой на " Knob Shadow ", затем выберите слой под оригинальным. Выберите «Move Tool» (V). С «Move Tool» (V), на выбранном слое нажмите стрелку вниз пару раз.
Совет:
Для увеличения расстояния перемещения инструмента во время работы с клавиатурой, попробуйте удерживать клавишу shift во время нажатия клавиш со стрелками.

С выбранным слоем «Knob Shadow» перейдите в раздел «Filter> Blur> Guassian Blur» примените гауссово размытие около 3-5px, затем установите прозрачность слоя до 75%.

Шаг 4
Выберите «Polygonal Lasso Tool» (L), и сделайте несколько треугольных выделений.

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

Примените размытие треугольной формы примерно на 3-4 пикселя, затем загрузите выделение вокруг " Knob Top Layer", " Layer> Load Selection". Как только выделение будет загружено, перейдите в раздел «Select> Inverse»и нажмите клавишу delete.

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

Идем далее, чтобы добавить металлическую поверхность. Начните с выбора инструмента «Rectangular Marquee» (M) и сделайте выделение вокруг ручки, с полученным выделением перейдите в раздел «Filter> Noise> Add Noise», затем используйте настройки ниже.

Снимите выделение «Ctrl + D», зайдите в «Filter> Blur> Radial Blur».

Измените режим наложения на «Screen», уменьшите непрозрачность примерно до 40%. Для удаления лишнего, загрузите выделение вокруг " Knob Top Layer ", а затем инвертируйте выделение, выбрав «Select> Inverse».

Шаг 5
На слое" Knob Top Layer" сделать черный круг, а также черную и белую линии рядом друг с другом.

Установите на слой черно-белой линии режим наложения на «Soft Light», а затем добавьте следующие стили слоя на слой черного круга.

Получаем следующий результат.

Слева направо и сверху сторон Ручки добавить метки в виде текста.

Шаг 6
Добавим немного света.Выберите «Ellipse Tool» (U) создайте большой эллипс, который закрывает всю ручку.

Выберите векторную маску на слое эллипс, и добавьте еще один эллипс внутри исходного эллипса с настройками " Subtract From Shape Area".

Используя «Pen Tool» (P) с той же опцией " Subtract From Shape Area" отрезать часть эллипса.

В Adobe Photoshops из библиотеки форм выберите форму " Registration Target".

Перетащите ее над большым эллипсом.

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

Разделите маленькие квадратики на два слоя.

Для половины маленьких квадратиков нужно добавить следующие стили слоя.

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

Ваш результат должен выглядеть примерно так.

Спасибо за участие в этом уроке, если вам удалось закончить этот урок, хотелось бы знать ваше мнение.,,Отлично получилось,торчу от подобных штуковин)

😊 Донат. На чаёк с печеньками! ☕ 🍪

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *