Читать


Главная » 2014 » Декабрь » 1 » Урок 8. Рисуем аудио проигрыватель
03:55
Урок 8. Рисуем аудио проигрыватель
Попробуем сегодня нарисовать такой веб-элемент как аудио проигрыватель, часто используемый на сервисах, хранящих аудиозаписи, для воспроизведения выбранной композиции. Обычно аудио проигрыватель включает в себя стандартный набор кнопок: вкл., пауза, громкость, таймер, загрузка и ползунок. Думаю, можно пропустить инструкцию по подготовительным работам, так как начальных пошаговых действий хватает в первых уроках.

Итак, создаём с помощью различных фигур (прямоугольник, прямоугольник со скруглёнными углами, эллипс) форму плеера и кнопки с ползунком. Напомню, что если к одной фигуре мы хотим присоединить на том же слое другую просто зажимаем Shift и рисуем. А подкорректировать получившееся всегда можно с помощью "стрелки" (А), двигая опорные точки фигур. Для наглядности я раскрасил фигуры разными цветами и обвёл контуром.

Урок. Рисуем аудио проигрыватель

Используя тот же инструмент (Фигуры (U)), рисуем на кнопках опознавательные знаки. Остановлюсь подробнее лишь на кнопке громкости. Обычно она выглядит как динамик, из центра которого расходятся волны. Нарисовать эти волны не так-то и сложно. Нарисуем круг (Эллипсом с зажатой Shift). Затем скопируем эту фигуру (Ctrl+C) и вставим в неё же (Ctrl+V). Выберем инструмент "Стрелку" (А)(1) и трансформацией уменьшим выделенный сейчас круг (удерживая Shift). Вверху в панели можно увидеть иконки команд для действий над выделенными контурами. Нам необходима та, что вырежет уменьшенный круг из бОльшего (3). Затем мы снова скопируем выделенный контур (уже мЕньшего круга), вставим и также трансформацией уменьшим его. Но на этот раз не вычтем его, а добавим к области (2). Проделаем эти операции до тех пор, пока у нас не получатся три "баранки" одна в другой. Жмём "Объединить" (4):

Урок. Рисуем аудио проигрыватель

Нарисуем новую фигуру инструментом "Перо" (P) с учётом того, что она должна будет вычесть собой ненужные участки полученных "баранок". При выбранном инструменте "Выделение контура" (Чёрная стрелка)

Урок. Рисуем аудио проигрыватель

копируем контур новой фигуры (Ctrl+C), кликаем по контуру фигуры "баранок" и вставляем (Ctrl+V). После чего знакомым способом вычитаем область из фигуры:

Урок. Рисуем аудио проигрыватель

Жмём "Объединить" и дорисовываем оставшуюся часть.  Рисуем и остальные знаки для кнопок:

Урок. Рисуем аудио проигрыватель

Осталось добавить стили слоя для фигур. Знакам выставим тёмно-серый цвет, я выбрал #333333. Такой же цвет выставим и полосе, по которой будет двигаться ползунок. Ну и добавим некоторые надписи:

Урок. Рисуем аудио проигрыватель

Перейдём на слой одной из кнопок и дважды кликнем по нему (чтобы, как мы уже знаем, открыть стили слоя). Придадим кнопкам объёма. Сначала градиент настроим:

Урок. Рисуем аудио проигрыватель

Затем внутреннюю тень с настройками:
Режим: Нормальный
Цвет: белый
Угол: 90
Смещение: 1
Размер: 0

Настраиваем обводку и ОК.

Урок. Рисуем аудио проигрыватель

Теперь копируем стиль слоя (кликнув по нему правой кнопкой и выбрав соответствующую команду):

Урок. Рисуем аудио проигрыватель

Затем кликаем правой кнопкой по слоям с другими  кнопками и выбираем "Вклеить стиль слоя":

Урок. Рисуем аудио проигрыватель

Кнопку "Скачать" мы преобразим по тому же принципу, только используя другие цвета. Загрузкам больше всего присущ зелёный цвет. Ну и шкалу громкости приведём к общему цветовому стилю:

Урок. Рисуем аудио проигрыватель

Над слоем со шкалой времени создадим слой (Shift+Ctrl+N) и нарисуем прямоугольник с цветом, сходным с кнопкой загрузки. После чего комбинацией клавиш Shift+Ctrl+G придадим прямоугольнику форму шкалы, таким образом у нас будет отражена та часть записи, которая уже проиграна:

Урок. Рисуем аудио проигрыватель

Осталось придать законченный вид самой форме проигрывателя. Для этого дадим обводку слою в 1 пиксель цветом #bbbbbb, к примеру, и тень с настройками:
Режим: Нормальный
Непрозрачность: 10%
Смещение: 3

Готово!

Урок. Рисуем аудио проигрыватель


И как обычно, прикладываю исходник запакованный в архив весом всего 56 КБ
Скачать


Категория: Уроки | Просмотров: 612 | Добавил: M-Wizard | Теги: урок, аудиопроигрыватель, фотошоп, интерфейс, Веб-дизайн, кнопки | Рейтинг: 0.0/0

Всего комментариев: 0
avatar


НЕКОТОРЫЕ ПУБЛИКАЦИИ БЛОГА