Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Интерфейс музыкального плеера


Загрузите эти элементы:

Узор
Звёзды

Начнём!
Создайте новый документ размером 600х300 пикселей и залейте фон цветом #101010. Примените фильтр Добавить шум (Add Noise Filter) со значением 75.

Интерфейс музыкального плеера


Выберите обложку любого музыкального альбома. Я использую обложку альбома Eminem – Recovery. Размер – 180х180 пикселей. Вставьте её в наш документ и перейдите в меню Стилей слоя (Layer Style - Blending Options). Примените эти стили:

Обводка: Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет.

Интерфейс музыкального плеера


Внутреннее свечение: Режим – Осветление, Метод – Мягкий.

Интерфейс музыкального плеера


Расположите изображение обложки на расстоянии 55 пикселей от верхней границы холста и 35 пикселей от левой.

Интерфейс музыкального плеера


Выберите инструмент Горизонтальный текст (Horizontal Type Tool). Я использовал шрифт “Muncie”. Установите размер шрифта – 36pt, цвет - #e2e2e2. Напишите названия песни. Я написал “No Love”. Текст находится на расстоянии 25 пикселей от правой границы обложки и 80 пикселей от верхней границы холста.

Интерфейс музыкального плеера


Тем же шрифтом, но размером 24pt напишите информацию об исполнителе. Эта строка находится на расстоянии 5 пикселей от нижней границы названия песни.

Интерфейс музыкального плеера


Полоса прогресса
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) со значением радиуса 25 пикселей. Установите цвет заливки - #464646 и создайте фигуру размером 360х30 пикселей. Установите Режим наложения слоя – Мягкий свет (Blending Mode – Soft Light). Расположите фигуру на расстоянии 15 пикселей от правой границы обложки и 25 пикселей от нижней границы текста об исполнителе.

Интерфейс музыкального плеера


Выберите инструмент Прямоугольник (Rectangle Tool) и установите цвет заливки - #393939. Создайте фигуру размером 250х5 пикселей. Централизуйте его вертикально внутри закруглённого прямоугольника. Расстояние от правой границы закруглённого прямоугольника – 15 пикселей.

Интерфейс музыкального плеера


Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), приблизьте холст и создайте выделение шириной 70 пикселей на всю высоту серого прямоугольника.

Интерфейс музыкального плеера


Создайте новый слой (Create New Layer) и залейте его цветом #cbbf00. Примените стиль Наложение узора (Layer Style - Pattern Overlay): Режим – Мягкий свет.

Интерфейс музыкального плеера

Интерфейс музыкального плеера


Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), создайте новый слой (Create New Layer) под предыдущим. Установите цвет заливки - #282828. Создайте выделение на расстоянии 65 пикселей от правой границы полосы прогресса.

Интерфейс музыкального плеера


Примените стиль Наложение узора (Layer Style - Pattern Overlay):

Интерфейс музыкального плеера

Интерфейс музыкального плеера


Мы получили часть, отвечающую за буферизацию.
Переходим к кнопкам. Их легко рисовать. Выберите инструмент Произвольная фигура (Custom Shape Tool), в настройках сверху выберите фигуру треугольника, установите цвет заливки - #f3f3f3. Создайте фигуру размером 12(ширина)х11(высота) пикселей. Инструментом Свободное трансформирование (Free Transform) её можно повернуть. Расположите треугольник на расстоянии 10 пикселей от верхней границы закруглённого прямоугольника и левой границы полосы прогресса.

Интерфейс музыкального плеера


Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте две фигуры размером 2х11 пикселей. Расположите их на расстоянии 2 пикселей друг от друга. Расположите эту кнопку на расстоянии 20 пикселей от треугольника.

Интерфейс музыкального плеера


Сделайте копию слоя с треугольником, примените Отражение по горизонтали (Transform – Flip Vertical) и расположите её на расстоянии 20 пикселей от кнопки паузы.
Интерфейс музыкального плеера


Завершение
Откройте документ со звёздами. Перетащите папку с 4 звёздами в наш документ. Чтобы создать 5 звезду, как на моём рисунке, в меню стилей выключите стиль Наложение цвета (Color Overlay). Расположите звёзды по центру под обложкой на расстоянии 10 пикселей от её нижней границы.

Интерфейс музыкального плеера


Выберите текстовый инструмент, выберите шрифт “Verdana” размером 12pt., цветом #cbcbcb. Напишите “4/5 Stars” и расположите эту надпись на расстоянии 5 пикселей от звёзд. Расположите по центру относительно звёзд.

Интерфейс музыкального плеера


Понизьте размер шрифта до 11pt., измените цвет на #7a7a7a. В правой нижней части холста напишите “Download | Get Lyrics” (это ссылки на загрузку и получения текста песни). Расположите надпись на расстоянии 25 пикселей от правой границы холста и 10 пикселей от нижней границы.

Интерфейс музыкального плеера


В конце можно добавить информации о следующей и предыдущей песнях.

Интерфейс музыкального плеера




Обсудить данный урок на форуме






Ссылка на источник урока