Рисуем элемент интерфейса - регулятор громкости в Photoshop

  • Лабораторные работы
  • doc
  • 17.04.2020
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Иконка файла материала 19. ЛР по теме Рисуем элемент интерфейса - регулятор громкости в Photoshop.doc

Рисуем элемент интерфейса - регулятор громкости в Photoshop.

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

usability

Шаг 1. Создаем новый документ (Ctrl+N), размером 200*200 пикселей. Зальем его #888888 цветом. Выставляем направляющие, как показано на рисунке внизу (для этого нажимаем Ctrl+R, чтобы появились линейки (если их нет) и просто вытягиваем направляющие из линеек, вертикальной и горизонтальной. Выставить их необходимо ровно посередине.).
Теперь, выбираем Инструмент Овальная область (Elliptical Marquee Tool (M)), ставим курсор в месте пересечения направляющих и, удерживая Shift+Alt, рисуем круг из центра (именно для этого мы удерживали Shift и Alt) диаметром около 120 пикселей. Не снимая выделения, создаем новый слой (Ctrl+Shift+N), называем его "inset" и заливаем его Черным (Black).

рисуем круг выставляем направляющие заливаем

Шаг 2. Используя опять Инструмент Овальная область (Elliptical Marquee Tool (M)), рисуем в том же месте такой же круг, только на примерно 4 пикселя меньше. На основе выделения создаем новый слой (называем его "base") и заливаем круг #2a2a2a цветом. Открываем Стили Слоя (Layer Styles) и задаем для Gradient Overlay (Перекрытие Градиентом) следующие параметры (Градиент - "От Черного к Прозрачному (Black to Transparent )"):

gradient overlay градиентное перекрытие

Шаг 3. Рисуем тем же способом еще один круг, но на 15 пикселей меньше предыдущего. Создаем новый слой, называем его "base-inset" и закрашиваем круг #2a2a2a цветом. Открываем Стили Слоя и выставляем для Перекрытия Градиента (Градиент - "от Черного к Прозрачному"):

gradient overlay градиентное перекрытие

Шаг 4. Добавим немного трёхмерности, для этого осветлим верхнюю часть круга сделанного в предыдущем шаге, как будто на него падает свет сверху. Выделяем круг на слое "base-inset" и на его основе создаем новый слой "highlight". Далее идем Edit>Stroke> 1px outside (Редактирование>Выполнить обводку>1 пиксель снаружи (цвет белый)). Стираем мягким ластиком (Eraser Tool (E)) 2/3 обводки, для оставшейся задаем Непрозрачность (Opacity) слоя 8%.

рисуем обводку stroke

Шаг 5. Пришло время сделать "захваты для пальцев". Если делать их по одной, то можно с ума сойти, но мы пойдем другим путем, а именно: выбираем Инструмент Овал (Ellipse Tool (U)), в режиме "Контуры (Paths)paths" и рисуем круг примерно на 5 пикселей шире внутреннего. После этого выбираем Инструмент Текст (Type Tool), чтобы подвести к контуру и увидеть:

пишем по контуру

Шаг 6. Выбираем шрифт Verdana, 6px, Smooth (Плавное), расстояние между знаками 1500 и вместо текста ставим значки (|).

задаем шрифт

Шаг 7. К слою с текстом применим слудующие Стили Слоя (Layer Styles):

drop shadow

outer glow

color overlay

Вот, что должно получиться в итоге:

drop shadow

Шаг 8. Создаем новый слой "highlight-2" и рисуем Овал в верхней части основного круга. Заливаем его Градиентом "от Белого к Прозрачному" и задаем Непрозрачность (Opacity) слоя 20%.

oval

Шаг 9. По сути, наш регулятор громкости готов, осталось только добавить красивый индикатор в центре. Для этого создаем новый слой (он должен быть самым верхним на Панели Слоев), называем его "orb-base" и рисуем круг в центре регулятора на, примерно, 6 пикселей меньше внутреннего круга. Заливаем круг #147ac1 цветом. Далее вызываем окно Стилей Слоя и выставляем следующие параметры (для Outer Glow цвет - #147ac1):

drop shadow

outer glow

inner glow

Вот результат:

орбита

Шаг 10. Дублируем слой с "orb-base", называем "inner-glow", меняем Заливку (Fill) слоя на 0% и применяем к слою следующие Стиль Слоя (Layer Style):

inner glow

Шаг 11. Копируем слой "inner-glow" и называем его "inner-glow-2". Параметры Стиля Слоя:

inner glow

Шаг 12. Копируем теперь "inner-glow-2" и называем его "inner-glow-3". Задаем параметры Стиля Слоя:

внутреннее свечение

Результат:

orbit

Шаг 13. Создаем ещё одно круговое выделение на 4 пикселя меньше предыдущего. На его основе новый слой "full-highlight". Заливаем круг #FFFFF цветом и меняем Режим Смешивания (Blending Mode) этого слоя на Overlay (Перекрытие), Непрозрачность (Opacity) - 15%.

overlay

Шаг 14. Создаем новый слой "highlight-top" и рисуем на нем Овал. Заливаем Градиентом (Gradient) "от Белого к Прозрачному"Непрозрачность (Opacity) слоя ставим 35%.

рисуем блик

Шаг 15. Рисуем маленький круг в центре индикатора. Удаляем внутреннюю часть круга, оставляя бублик шириной около 4 пикселя. Размоем его с помощью Filter>Blur>Gauusian Blur (Фильтр>Размытие>Размытие по Гауссу), радиус - 4. Дублируем этот слой, делаем копию чуть меньше и размещаем её

orbit

Шаг 16. Создаем новый слой "indicator". Рисуем опять круг из центр, размером на 4 пикселя меньше основого круга индикатора. Закрашиваем его Белым (White). Тут же рисуем еще один круг на 4 пикселя меньше предыдущего и нажимаем Delete, тем самым получаем еще один бублик. Ставим Непрозрачность (Opacity) слоя на 20%. Дублируем этот слой, удаляем часть (см. рисунок) и ставим Непрозрачность (Opacity) слоя на 30%.

Добавьте ещё текст и тень от самого регулятора.

usability