Интерфейс аудио плеера в adobe photoshop

Шаг 1
Создайте новый документ 600 ? 400 пикселей.

Шаг 2 
Используйте радиальный градиент расцветкой от #5e6c78 до #20282e для наполнения фона. 

Шаг 3 
Дублируйте фон и перейдите в Filter-Noise-Add Noise. Используйте данные опции: Amount:5%; Uniform; Monochromatic. Нажмите клавишу ОК. Сейчас понизьте Opacity слоя до 30%. У вас обязано выйти что-то сходственное. 

Шаг 4 
Хорошо, давайте создадим аудиоплеер. Создайте новейший слой (Ctrl+Shift+N) и назовите его "Base". Используя Rounded Rectangle Tool, радиусом в 5px, нарисуйте прямоугольник, как на рисунке, и применяйте данные стили слоя. Цвета Gradient overlay последующие #3d4a59; #1c2329; #303a44. Цвет Strokе: #191919.


Шаг 5 
Теперь делаем свежий документ 600 ? 600px. Перейдём в Edit-Fill-50%Gray. Затем Filter-Noise-Add Noise со последующими опциями: 80%; Gaussian; Monochromatic. Затем Filter-Blur-Radial Blur со последующими опциями: сто; Spin; Best. Нажмите Ctrl+F, дабы повторить фильтр. Получится что-нибудь вроде данного. 

Шаг 6 
Копируйте изображение в документ с плеером повыше слоя "Base". Измените режим смешивания на Soft Light и непрозрачность на 80%. Назовем данный слой "Texture". Ctrl+клик по иконке слоя "Base" в панели слоёв, дабы его выделить. Затем нажмите Ctrl+Shift+I и delete.

 
Шаг 7 
Создайте новейший слой. Название ее "Higlights". Используйте Pencil tool, чтоб устроить 2 полосы - 1 на верхней доли причины и 1 в нижней доли. Сотрите стороны полосы немалым мягеньким ластиком и понизьте непрозрачность до 80%. Для простоты организации, выделите 3 слоя - Base, Texture и Highlights - и нажмите Ctrl+G, дабы повернуть их в категорию. Назовите групп "Base".

Шаг 8 
Теперь давайте создадим выступы с двух сторон. Создайте новейший слой. Назовите его "speaker". Выделите слой "Base”. Затем берите Rectangular marquee tool и, удерживая Shift+Alt, перетащите его так, чтоб обрести выделение как на иллюстрации. Заполните его расцветкой #3a3a3a. Продублируйте слой, назовите его "texture". Перейдите в Blending Options и добавьте последующие характеристики: Pattern Overlay подберите структуру "Spiderman pattern"(скачайте её отсель), режим смешивания – Overlay и Scale 12%. 
Как сделать интерфейс проигрывателя в Photoshop * 
 
Шаг 9 
Создайте новейший слой, назовите его "Highlight". Опять при помощи Карандаша нарисуйте линию в 1px, как на картине. Затем смоделируйте свежий слой и назовите его "Shadow". Используя Elliptical Marquee Tool, нарисуйте выделение как на рисунке, залейте его черным и перейдите на Filter-Blur-Gaussian Blur, радиус 5. Сотрите его часть, чтоб обрести итог, как на рисунке ниже, и поставьте непрозрачность на 50%.

Шаг 10 
Группируйте прошлые 4 слоя - Speaker, Texture, Highlight и Shadow и назовите категорию "Speaker_left”. Дублируйте категорию, и переверните её по горизонтали в место на правой стороне. Назовите ее "Speaker_Right".

Шаг 11 
Давайте устроим клавишу «Закрыть». Создайте свежий слой, назовите его "Button". Используйте Rounded Rectangle tool, радиус 2px, сделайте небольшую клавишу, наполните его белоснежным расцветкой. Затем добавьте Blending Options. Gradient Overlay: #8799ab-#485664-#8799ab, Stroke: #384251.

Шаг 12 
Создайте новейший слой, назовите его "X". Чтобы обрести X, у вас есть возможность применять шрифт, какой вам нравится либо нарисовать pencil tool-ом, как я и устроил. Я применял Gradient Overlay (серый и серый) и 1px drop shadow, дабы обрести данный результат.

 
Шаг 13 
Группируйте 2 прошлых слоя и назовите категорию "X". Затем устройте 2 иных клавиши, копируем категорию "X" и лишь измените слой "X". Я вновь употреблял Карандаш.

Шаг 14 
Теперь давайте делать экран. Создайте свежий слой, назовите его "Screen Base". Нарисуйте прямоугольник, как на рисунке и залейте его градиентом от #303a44 до #4a5968.

Шаг 15 
Создайте свежий слой. Назовите его "Gloss". Выделите маленький прямоугольник и залейте его белоснежным прозрачным градиентом. Нижняя Непрозрачность до 10%.

Шаг 16
Снова используя 1px белого Карандаша, добавьте некоторые основные блики вокруг. Просто играйте с ним, с тем чтобы получить эффект, как вам нравится

Шаг 17
Давайте заполним экран с содержанием. Сделайте новую группу, я назвал ее "Content". Я постараюсь, чтобы эта часть была краткой и понятной. На каждую вещь сделайте новый слой. Во-первых, с помощью мягкой кисти сделайте пятно, которое выделит на общем фоне таймер. Затем, используя Horizontal Type tool (я использовал шрифт Digital-7), напишите например: 03:59. Затем введите имя трека (я использовал шрифт Walkway Bold). Используя Arial, введите Repeat и Shuffle. Режим Shuffle является более удобным, так что сделайте его немного светлее, чем Repeat. Затем я добавил небольшие детали, используя методы, описанные ранее, а именно однопиксельные линии карандашом и пятна мягкой кистью для световых эффектов.

Шаг 18
Создайте новый слой. Назовите его " Progress bar ". Используя Rounded Rectangle tool, радиус 5px, нарисуйте тонкие, длинный прямоугольник. Залейте его черным и добавьте следующие параметры слоя: Gradient Overlay от #303a44 до #1c2329 и Stroke 1px, цвет #afbbc6, Opacity 16%. Теперь создайте новый слой и назовите его "Progress knob". Нарисуйте маленький прямоугольник и заполните его черным цветом. Добавьте следующие параметры слоя:
Inner shadow: Blend mode- Normal, Color – White, Distance 0, Size 1;
Gradient Overlay: #5c6977-#212a30-#5c6977;
Stroke: Size 1px, Color #222b31.

Шаг 19
Теперь сделаем кнопки. Начнём с новой группы и назовём ее "Buttons". Сначала мы сделаем базу для кнопок. Создайте новый слой, назовите его "Button Base". Для получения формы я использовал Radius Rounded Rectangle too радиус 5px. Если вы хотите, вы можете сделать это просто, как округлую форму прямоугольника. Затем добавьте Blending Options
Drop Shadow: Angle – -90 (убрать галочку с "Use Global Light"), Distance – 1, Size 0.
Inner shadow: Blend Mode – Normal, Color – Белый, Angle – 90 (опять убрать галочку с "Use Global Light"), Distance – 1, Size – 0.
Gradient Overlay: #4d5c6a-#1c2329-#303a43.

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

Шаг 21
Для того чтобы сделать кнопки Play, Pause, Stop, Forward and Backward, я использовал формы прямоугольников и треугольников. Примените Gradient Overlay к кнопкам: #b7d9ed-#458fb2-#b7d9ed.

Шаг 22
Теперь давайте сделаем окончательные 4 кнопки - Repeat, Shuffle, Playlist и Equalizer. Все они будут небольшими прямоугольниками с закругленными концами. Добавьте Blending Options:
Drop Shadow – Opacity 26%, Spread 100%, Size 1.
Inner shadow: Blend mode – Normal, Color – White, Opacity 40%, Angle – 90, Distance – 1, Choke – 100%, Size – 0.
Gradient Overlay: #3d4a59-#1c2329-#303a44
Затем разместите их как на картинке.

Шаг 23
Теперь добавьте в текст. Я использовал шрифт Arial, и следующий стили слоя:
Drop Shadow – Opacity 42%, Angle 90, Distance 1, Size 0.
Gradient Overlay: #4c5a69-#8495a7.

Шаг 24
Снова добавьте небольшие детали карандашом.

Шаг 25
Теперь последнее, что мы будем добавлять к интерфейсу, этим является регулятор громкости. Во-первых, сделайте значок с помощью Pencil Tool. Добавьте градиент, такой же что вы сделали к кнопкам воспроизведения(Play, Pause, и т.д.).

Шаг 26
Используя Rounded Rectangle tool, радиус 5px, нарисуйте прямоугольник и добавьте такой же градиент как у Progress Bar.

Шаг 27
Рисуем 10 малых кругов. Активные будут иметь градиент, как значок динамика, а остальные из них будут иметь простой от светло-серого до темно-серого градиент.

Шаг 28
Давайте закончим его и добавим отражение. Объедините все слои кроме фона. Продублируйте его, и размойте на 1,2 пикселя с помощью Gaussian Blur, переверните его вертикально и сотрите часть мягкой резинкой, удалить дно.