Если вы создаёте дизайн для прикладного интерфейса или скин для вашего любимого mp3/video плеера, то вы найдёте много полезного в описанных тут методах работы.
В этом уроке мы будет рисовать вот такой вот mp3 плеер.


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

Что-ж, если вы готовы, начнём!
Создайте изображение с каким-нибудь фоном, который исключит скукоту нашего изображения.


Начнём с главной формы нашего плеера. Используйте Rectangle Tool с сглаженными краями. Цвет формы - #E5E5E5.


Создав новый слой, вытяните фигуру.


Что изменять/гнуть фигуру необходимо воспользоваться инструментом - Direct Selection.



С помощью Direct Selection потяните за левую вверхнию точку вниз и левую нижнию вверх. Чтобы получилось как на рисунке.


Теперь надо воспользоваться инструментом Add Anchor Point tool и добавить точки как на рисунке.


Снова используя инструмент Direct Selection эти две точки сместить на 4 пикселя вверх и вниз. Это можно выполнить с помощью клавиатуры.




Нажмите CTRL+H чтобы снять выделения от Direct Selection.


Начнём работать над визуальной частью.
Воспользуемся Layer » Layer Style » Gradient Overlay.
А также: Satin, Bevel and Emboss, Inner Glow, Inner Shadow, Drop Shadow.
Со следующими параметрами:

Gradient Overlay:


Satin:


Bevel and Emboss:


Inner Glow:


Inner Shadow:


Drop Shadow:


Если вы хотите сохранить этот стиль кликните на панели стилей New Style, дайте ему имя и нажмите OK. Вы сможете его использовать в любых своих работах.


Следующая задача стоит перед нами это добавление на корпус модели кнопок, экрана, надписей и др.

Создайте новый слой и воспользуйтесь Rectangle tool со следующими параметрами:


Воспользуйтесь Layer » Layer Style » Gradient Overlay с настройками:


Чтобы получилось вот так:


Дублируйте этот слой и отмените все стили в нём чтобы получилась черная заливка. Нажмите CTRL+T чтобы войти в режим масштабирования и удерживая SHIFT+ALT немного уменьшите этот слой. Должно получится что-то вроде этого:


Самое время черному экрану придать немного объёмности.
Используйте Layer » Layer Style » Bevel and Emboss, а также Contour и Inner Glow со следующими настройками:

Bevel and Emboss:


Contour:


Inner Glow:



Теперь будем добавлять LCD-экран.
Создайте новый слой. Выберите цвет #86B7E7 и при помощи Rectangle tool с параметрами:


Нанесите прямоугольник:


Как и остальным деталям ему надо придать визуальный стиль.
Выбираем Layer » Layer Style » Drop Shadow, а также Inner Glow, Bevel and Emboss и Stroke со следующими настройками:

Drop Shadow:


Inner Glow:


Bevel and Emboss:


Stroke:



Теперь чтобы сделать экран более реалистичным можно добавить световые эффекты.
Дублируйте слой который содержит голубой экран. Отчистите его от стилей Clear Layer Style. Нажмите X, а потом D для сбрасывания и настройки цветов.
Фигура должна стать белой и теперь при помощи Direct Selection нажмите на фигуру и чтобы войти в режим масштабирования нажмите CTRL+T.
Введите в панель следующие значения:


Должно получиться вот так:


Установите Fill Opacity - 0.


Нажмите снова X и потом D.
Теперь воспользуйтесь Layer » Layer Style » Gradient Overlay с настройками:


Добавьте маску при помощи иконки на панели со слоями.
Теперь выберите Pen Tool со следующими параметрами:


Нарисуйте как на рисунке:


В результате должно получится:


Что-ж, теперь если необходимо можно нанести текст на экран:


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


Автор статьи/перевода ORC - RUPIXEL.COM