Рисуем элемент интерфейса - регулятор громкости в Photoshop (Часть 2).
Шаг 9. По сути, наш регулятор громкости готов, осталось только добавить красивый индикатор в центре. Для этого создаем новый слой (он должен быть самым верхним на Панели Слоев), называем его "orb-base" и рисуем круг в центре регулятора на, примерно, 6 пикселей меньше внутреннего круга. Заливаем круг #147ac1 цветом. Далее вызываем окно Стилей Слоя и выставляем следующие параметры (для Outer Glow цвет - #147ac1):
Вот результат:
Шаг 10. Дублируем слой с "orb-base", называем "inner-glow", меняем Заливку (Fill) слоя на 0% и применяем к слою следующие Стиль Слоя (Layer Style):
Шаг 11. Копируем слой "inner-glow" и называем его "inner-glow-2". Параметры Стиля Слоя:
Шаг 12. Копируем теперь "inner-glow-2" и называем его "inner-glow-3". Задаем параметры Стиля Слоя:
Результат:
Шаг 13. Создаем ещё одно круговое выделение на 4 пикселя меньше предыдущего. На его основе новый слой "full-highlight". Заливаем круг #FFFFF цветом и меняем Режим Смешивания (Blending Mode) этого слоя на Overlay (Перекрытие), Непрозрачность (Opacity) - 15%.
Шаг 14. Создаем новый слой "highlight-top" и рисуем на нем Овал. Заливаем Градиентом (Gradient) "от Белого к Прозрачному". Непрозрачность (Opacity) слоя ставим 35%.
Шаг 15. Рисуем маленький круг в центре индикатора. Удаляем внутреннюю часть круга, оставляя бублик шириной около 4 пикселя. Размоем его с помощью Filter>Blur>Gauusian Blur (Фильтр>Размытие>Размытие по Гауссу), радиус - 4. Дублируем этот слой, делаем копию чуть меньше и размещаем её, как на рисунке внизу.
Шаг 16. Создаем новый слой "indicator". Рисуем опять круг из центр, размером на 4 пикселя меньше основого круга индикатора. Закрашиваем его Белым (White). Тут же рисуем еще один круг на 4 пикселя меньше предыдущего и нажимаем Delete, тем самым получаем еще один бублик. Ставим Непрозрачность (Opacity) слоя на 20%. Дублируем этот слой, удаляем часть (см. рисунок) и ставим Непрозрачность (Opacity) слоя на 30%.
Вот и все! Мы добавили ещё текст и тень от самого регулятора.
Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайт обязательна.
Автор guistation.com.