Плеер в стиле Windows 7
Открываем новый документ и задаем значение ширины 1024px, а высоты - 768px, после чего выполняем заливку фонового слоя черным цветом.



Плеер в стиле Windows 7


Пишем две надписи, одну для Vista Stick, вторую – для Windows Media Player 10 & 11. Соответствующие скриншоты приведены ниже.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Результат:

Плеер в стиле Windows 7


Воспользуемся Пером (Pen Tool) и с его помощью создадим овальную область.

Плеер в стиле Windows 7


И для этой области применяем стиль Градиент (Layer Style -> Gradient Overlay). Параметры стиля должны быть следующие:

Плеер в стиле Windows 7


А на этом скриншоте приведены настройки самого градиента:

Плеер в стиле Windows 7


Теперь обращаемся к инструменту Прямоугольник со скругленными краями (Rounded Rectangle Tool) и создаем такую фигуру (будет использоваться в качестве панели плеера) цветом #121212:

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Снова берем Закругленный прямоугольник (Rounded Rectangle Tool) и создаем длинный узкий прямоугольник, после чего, зажав кнопку Alt, с помощью Эллипса (Ellipse Tool) вычитаем из него посередине окружность.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


И для этого слоя редактируем стили, применив Градиент (Layer Style -> Gradient Overlay) и Обводку (Stroke). Параметры этих стилей приведены на соответствующих скриншотах.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Плеер в стиле Windows 7


Добавим блеска панели. Для этого воспользуемся Закругленным прямоугольником (Rounded Rectangle Tool). Блеск должен иметь цвет #5A5A5A. Лишние вершины удаляем с помощью пункта Удалить точку привязки (Delete Anchor Point Tool), а коррекция нижних углов производится с помощью инструмента Преобразовать точку привязки (Convert Point Tool).

Плеер в стиле Windows 7


Для данного слоя устанавливаем режим наложения на Осветление (Blending Mode – Screen), а Непрозрачность (Opacity) - 50%.

Плеер в стиле Windows 7


Инструмент Произвольная фигура (Custom Shape Tool) поможет нам создать треугольники на кнопке. Выбираем нужный символ и красным цветом ставит три треугольника.

Плеер в стиле Windows 7


Используем Свободную трансформацию (Free Transform) и в этом режиме переворачиваем треугольники на нужную позицию. Далее берем из панели инструментов Прямоугольник со скругленными краями (Rounded Rectangle Tool) и создаем кнопочный указатель. Везде используем цвет #696969.

Плеер в стиле Windows 7


Режим смешивания цветов для данного слоя должен быть Наложение (Blending Mode –> Screen).

Плеер в стиле Windows 7


Для удобства дальнейшей работы, можно все слои с указателями объединить в одну группу, после чего скопировать ее, перевернуть копию и переместить на соседнюю кнопку справа.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Снова обращаемся к Произвольной фигуре (Custom Shape Tool) и выбираем символ, указанный на скриншоте. Цвет - #DFDFDF.

Плеер в стиле Windows 7


Чтобы лишние части элементов не мешали, удалим их с помощью инструмента Удалить точку привязки (Delete Anchor Point Tool).

Плеер в стиле Windows 7


Режим наложения слоя - Осветление (Blending Mode –> Screen).

Плеер в стиле Windows 7


Переходим к созданию кнопки Stop, создавать которую будем с помощью Закругленного прямоугольника (Rounded Rectangle Tool), цвет - #DFDFDF.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


В основании панели создадим светлую линию при помощи инструмента Линия (Line Tool). Цвет - #484848.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Теперь полоса прокрутки. Инструмент Прямоугольник (Rectangle Tool) поможет нам в этом (см. скриншот).

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Далее устанавливаем нулевую заливку для слоя и, дважды щелкнув на слое в списке слоев, настраиваем для него Градиент (Layer Style -> Gradient Overlay), настройки которого показаны ниже.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Теперь берем из панели инструментов Эллипс (Ellipse Tool) и с его помощью рисуем круглую кнопку с цветом #484848.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Эллипсом создаем еще одну окружность внутри предыдущей, цвет которой - #1E339C.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


С помощью того же Эллипса создаем еще один слой кнопки.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


И в стилях настраиваем Градиент (Layer Style - Gradient Overlay) и Обводку (Stroke). Скриншоты, соответственно, показаны ниже.

Градиент

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Обводка

Плеер в стиле Windows 7


Для центральной круглой кнопки создадим блеск в верхней ее части. Берем Перо (Pen Tool) и рисуем соответствующую фигуру. При этом, с помощью инструмента Преобразовать точку привязки (Convert Point Tool), корректируем форму.

Плеер в стиле Windows 7


Заливка этого слоя должна быть 22%-я, а стиль - Внутренняя тень (Layer Style - Inner Shadow) (см. скриншот).

Плеер в стиле Windows 7


Плеер в стиле Windows 7


С большой кнопкой покончили, поэтому, пора все слои, составляющие ее, можно объединить в общую группу. Далее копируем эту группу, уменьшаем ее в размерах и перемещаем эту копию на место, указанное ниже.

Плеер в стиле Windows 7


Возвращаемся к центральной кнопке и в ее середине устанавливаем треугольник. Делаем это при помощи инструмента Произвольная фигура (Custom Shape Tool). Цвет – белый.

Плеер в стиле Windows 7


Плеер в стиле Windows 7


И, используя Свободную трансформацию (Free Transform), переворачиваем треугольник в нужное положение и применяем к нему Обводку (Layer Style - Stroke).

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Нарисуем полосу прокрутки для звука. С помощью инструмента Прямоугольник (Rectangle Tool) рисуем полосу, слой которой должен располагаться под круглой мини-кнопкой, которая находится справа.

Плеер в стиле Windows 7


Для этой полосы применяем стиль Градиент (Layer Style -> Gradient Overlay).

Плеер в стиле Windows 7


А здесь – его настройки:

Плеер в стиле Windows 7


Плеер в стиле Windows 7


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

Плеер в стиле Windows 7


Плеер в стиле Windows 7


Между кнопками плеера и информацией о треке не хватает разделителя. Берем инструмент Линия (Line Tool) и с ее помощью разделяем эти две области.

Плеер в стиле Windows 7


И для разделителя применяем стиль Градиента (Layer Style -> Gradient Overlay).

Плеер в стиле Windows 7


Настройки цветов градиента:

Плеер в стиле Windows 7


Плеер готов

Плеер в стиле Windows 7


Источник: adobetutorialz.com
Переведено специально для 8ART.RU


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