Если вы создаёте дизайн для прикладного интерфейса или скин для вашего любимого mp3/video плеера, то вы найдёте много полезного в описанных тут методах работы.
В этом уроке мы будет рисовать вот такой вот mp3 плеер.
![](photoshop/p21/23.gif)
Перед тем как начать выполнять этот урок, вы должны понимать, что для этого необходимо иметь достаточно времени и терпения. Также неплохой уровень знаний Photoshop и его инструментов.
Что-ж, если вы готовы, начнём!
Создайте изображение с каким-нибудь фоном, который исключит скукоту нашего изображения.
![](photoshop/p21/1.gif)
Начнём с главной формы нашего плеера. Используйте Rectangle Tool с сглаженными краями. Цвет формы - #E5E5E5.
![](photoshop/p21/2.gif)
Создав новый слой, вытяните фигуру.
![](photoshop/p21/3.gif)
Что изменять/гнуть фигуру необходимо воспользоваться инструментом - Direct Selection.
![](photoshop/p21/4.gif)
С помощью Direct Selection потяните за левую вверхнию точку вниз и левую нижнию вверх. Чтобы получилось как на рисунке.
![](photoshop/p21/5.gif)
Теперь надо воспользоваться инструментом Add Anchor Point tool и добавить точки как на рисунке.
![](photoshop/p21/5-5.gif)
Снова используя инструмент Direct Selection эти две точки сместить на 4 пикселя вверх и вниз. Это можно выполнить с помощью клавиатуры.
![](photoshop/p21/6.gif)
Нажмите CTRL+H чтобы снять выделения от Direct Selection.
![](photoshop/p21/7.gif)
Начнём работать над визуальной частью.
Воспользуемся Layer » Layer Style » Gradient Overlay.
А также: Satin, Bevel and Emboss, Inner Glow, Inner Shadow, Drop Shadow.
Со следующими параметрами:
Gradient Overlay:
![](photoshop/p21/gradientoverlay1.gif)
Satin:
![](photoshop/p21/satin1.gif)
Bevel and Emboss:
![](photoshop/p21/bevelemboss1.gif)
Inner Glow:
![](photoshop/p21/innerglow1.gif)
Inner Shadow:
![](photoshop/p21/innershadow1.gif)
Drop Shadow:
![](photoshop/p21/dropshadow1.gif)
Если вы хотите сохранить этот стиль кликните на панели стилей New Style, дайте ему имя и нажмите OK. Вы сможете его использовать в любых своих работах.
![](photoshop/p21/8.gif)
Следующая задача стоит перед нами это добавление на корпус модели кнопок, экрана, надписей и др.
Создайте новый слой и воспользуйтесь Rectangle tool со следующими параметрами:
![](photoshop/p21/9.gif)
Воспользуйтесь Layer » Layer Style » Gradient Overlay с настройками:
![](photoshop/p21/gradientoverlay2.gif)
Чтобы получилось вот так:
![](photoshop/p21/10.gif)
Дублируйте этот слой и отмените все стили в нём чтобы получилась черная заливка. Нажмите CTRL+T чтобы войти в режим масштабирования и удерживая
SHIFT+ALT немного уменьшите этот слой. Должно получится что-то вроде этого:
![](photoshop/p21/11.gif)
Самое время черному экрану придать немного объёмности.
Используйте Layer » Layer Style » Bevel and Emboss, а также Contour и Inner Glow со следующими настройками:
Bevel and Emboss:
![](photoshop/p21/bevelemboss3.gif)
Contour:
![](photoshop/p21/contour3.gif)
Inner Glow:
![](photoshop/p21/12.gif)
Теперь будем добавлять LCD-экран.
Создайте новый слой. Выберите цвет #86B7E7 и при помощи Rectangle tool с параметрами:
![](photoshop/p21/13.gif)
Нанесите прямоугольник:
![](photoshop/p21/14.gif)
Как и остальным деталям ему надо придать визуальный стиль.
Выбираем Layer » Layer Style » Drop Shadow, а также Inner Glow, Bevel and Emboss и Stroke со следующими
настройками:
Drop Shadow:
![](photoshop/p21/dropshadow4.gif)
Inner Glow:
![](photoshop/p21/innerglow4.gif)
Bevel and Emboss:
![](photoshop/p21/bevelemboss4.gif)
Stroke:
![](photoshop/p21/15.gif)
Теперь чтобы сделать экран более реалистичным можно добавить световые эффекты.
Дублируйте слой который содержит голубой экран. Отчистите его от стилей Clear Layer Style. Нажмите X, а потом D для сбрасывания и настройки цветов.
Фигура должна стать белой и теперь при помощи Direct Selection нажмите на фигуру и чтобы войти в режим масштабирования нажмите CTRL+T.
Введите в панель следующие значения:
![](photoshop/p21/16.gif)
Должно получиться вот так:
![](photoshop/p21/17.gif)
Установите Fill Opacity - 0.
![](photoshop/p21/18.gif)
Нажмите снова X и потом D.
Теперь воспользуйтесь Layer » Layer Style » Gradient Overlay с настройками:
![](photoshop/p21/gradientoverlay5.gif)
Добавьте маску при помощи иконки
![](photoshop/p21/layer-mask.gif)
на панели со слоями.
Теперь выберите Pen Tool со следующими параметрами:
![](photoshop/p21/19.gif)
Нарисуйте как на рисунке:
![](photoshop/p21/20.gif)
В результате должно получится:
![](photoshop/p21/21.gif)
Что-ж, теперь если необходимо можно нанести текст на экран:
![](photoshop/p21/22.gif)
Используя те же методы что описаны ранее, вы можете добавить кнопки и доработать свой интерфейс.
![](photoshop/p21/23.gif)
Автор статьи/перевода ORC -
RUPIXEL.COM