Интерфейс mp3 player
Если вы создаёте дизайн для прикладного интерфейса или скин для вашего любимого 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 со следующими параметрами:
Нарисуйте как на рисунке:
В результате должно получится:
Что-ж, теперь если необходимо можно нанести текст на экран:
Используя те же методы что описаны ранее, вы можете добавить кнопки и доработать свой интерфейс.
