Дизайн черного аудио плеера

В этом уроке мы научимся создавать хороший дизайн музыкального плеера, используя вектора и стили слоев.

Для начала создадим новый слой (File---New) с размерами 1280х1024 px и разрешением 72 dpi.

Берем инструмент Rectangle Tool (U), это необходимо для создания фона картинки.


Установите следующие параметры как на картинке ниже, нажатием на слой правой кнопкой мыши. Blenging Options --- Gradient Overlay



Параметры градиента:




Теперь при помощи Rounded Rectangle Tool (U) с радиусом 35 px рисуем основной слой будущей панели плеера. Цвет слоя - #303030



Параметры слоя в blending options---drop shadow:



Blending Options>Inner Shadow


Blending Options>Bevel and Emboss




Делаем копию последнего слоя и затем меняем параметры слоя на:
Заливка (Fill) - 0%
Blending Options>Bevel and Emboss





Тепеь мы должны нарисовать более мелкие детали нашего плеера. Работать будем при помощи Rounded Rectangle Tool (U) и Free Transform



Параметры слоя:
Fill 0%
Blending Options>Inner Shadow




Blending Options>Outer Glow



Blending Options>Gradient Overlay




Gradient’s parameters:


Blending Options>Stroke


Gradient’s parameters:




Теперь нарисовать экран медиа плеера. При помощи Rounded Rectangle Tool (U) с радиусом 15 px.



Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke




Создаем копию последнего слоя и снова выбираем Free Transform для того чтобы сделать более маленькую копию.
Ориентируемся по картинке ниже.



Blending Options>Drop Shadow


Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke


Gradient’s parameters:




В следующем шаге мы будем рисовать главный слой с кнопками. Для этого пользуемся Ellipse Tool (U) и затем удерживаем SHIFT и работаем с Rounded Rectangle Tool (U) (радиус10 px) для вставки нескольких дополнений слева, справа, сверху и снизу. Удерживайте ALT пока используете Rectangle Tool (U) для разделения кнопок на сектора. Сделайте соответсвующие изменения при помощи Free Transform.



Blending Options>Inner Glow


Blending Options>Gradient Overlay


Gradient’s parameters:




Blending Options>Stroke



Используем тот же метод, чтобы создать следующий слой.



Blending Options>Inner Glow


Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke


Gradient’s parameters:




В этот раз мы будем использовать Ellipse Tool (U) для рисования главной, центральной кнопки.


Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke




Снова выбираем Ellipse Tool (U) для рисования следующего слоя.


Blending Options>Inner Glow


Blending Options>Bevel and Emboss


Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke:


Gradient’s parameters:




Используя Pen Tool (P) нарисуем символ Play


Blending Options>Gradient Overlay


Gradient’s parameters:


Blending Options>Stroke




Используем Rectangle Tool (U) тоже самое для кнопок PAUSE, STOP


Теперь нужно нарисовать стрелки перемотки вперед и назад.
При помощи Custom Shape Tool (U) и Free Transform






Теперь необходимо реализовать несколько декоративных деталей. Используем Rounded Rectangle Tool (U) с радиусом 2 px.


Параметры слоя:
Fill 0%
Blending Options>Drop Shadow



Blending Options>Inner Glow


Blending Options>Stroke




Делаем три копии. поворачиваем при помощи Free Transform и ставим в разные места как на картинке


Тем же методом рисуем справа кнопку.
Инструмент - Rounded Rectangle Tool (U) с радиусом 10 px.


Параметры слоя:
Fill 0%
Blending Options>Inner Shadow



Blending Options>Color Overlay


Blending Options>Stroke


Gradient’s parameters:




Теперь попробуем нарисовать декоративный элемент при помощи Rectangle Tool (U)


Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay




Gradient’s parameters:


Blending Options>Stroke




Делаем две копии.


Группируем все три элемента, и копируем их в другое место. Как на картинке. И меняем некоторые параметры слоя:
Blending Options>Gradient Overlay


Gradient’s parameters:




Теперь нарисуем один или более декоративных элементов на правой стороне уже сделанных деталей. Как обычно применяя
Rectangle Tool (U) и Convert Point Tool


Параметры слоя:
Fill 0%
Blending Options>Stroke



Gradient’s parameters:






Теперь будем рисовать регулятор громкости.
Используем Rounded Rectangle Tool (U) (radius 10 px)
Для пометки рабочей области. и удерживаем ALT работая с Rectangle Tool (U).



Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay



Gradient’s parameters:


Gradient’s parameters:




Теперь напишем текст на экран плеера:




Blending Options>Drop Shadow




Инфа по треку:




Rounded Rectangle Tool (U) с радиусом 10 px


Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay



Gradient’s parameters:


Blending Options>Stroke




Ну как квадратики поставить, я думаю вы уже знаете... Не буду описывать.

Теперь создаем новый слой для специальных кнопок.
При помощи все того же Rounded Rectangle Tool (U) (radius 5 px) и цветом - #5E5E5E


Копируем два раза.



Параметры слоя:
Fill 0%
Blending Options>Stroke






Дорисовываем иконки



Тем же методом дорисовываем панель возле часов


Берем какой нибудь орнамент и вставляем туда.








Источник - http://www.adobetutorialz.com/articles/298...layer-Interface
Перевод - Азат Хайрикенов

Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится
!!! Спасибо !!!


Эта новость называется - Дизайн черного аудио плеера. Не забудьте добавить в закладки, чтобы не потерять.


Распечатать
1

вот это - то что надо,спасибо!
2 июня 2008 10:49
2

ого! вот это перевод! спасибо.... как нибудь, по окончании сессии попробую реализовать его... respekt
5 июня 2008 05:36
3

отличная информация
5 января 2009 14:20
4

это просто изюминка
5 января 2009 14:33
5

Класс! Большое спасибо!!! Добавил сайт в закладки.
21 января 2009 07:55
6

Пишите чаще! И больше! ) А вообще спасибо!
21 января 2009 19:39
7

+1. Подписался.
19 февраля 2009 20:49

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости. Только для зарегистрированных пользователей
теги 2дтуториалс
фотошоп скачать клипарт Кисти шрифтов коллекция скачать иконки набор Обои для рабочего стола иконок Тонкости и секреты Часть шаблоны Новогодние фоторамки разные шаблоны исходники фотошопа кистей Wallpapers текстуры Иконки стилей Стили для фотошоп обоев Подборка скачать обои стиле текстур Скачать текстуры бесплатно текстуры для фотошоп Рамки для фотографий psd исходники фотошоп Клипарт скачать clipart бесплатно бекграундов фоторамок скачать иконки для windows Кисти для фотошопа скачать кисти фотошоп
{slin}
2дтуториалс.ру - проект компании ООО "Российские Интернет Технологии", 2011г.
Офис расположен по адресу - Россия, г. Москва, ул. Обуховской обороны, д. 12, оф.5.

счетчик рамблер   Рейтинг SIMPLETOP.NET   [Valid RSS]   Здесь находится аттестат нашего WM идентификатора 194801541119