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





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

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


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

Подсказка

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

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

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

Рисование web-плеера


Шаг 1 – Создание холста
Создайте новый документ с прозрачным фоном:

Рисование web-плеера


Выберите инструмент Заливка (Paint Bucket Tool) и залейте фон цветом #e4e4e4.

Шаг 2 – Область плеера
Стандартное разрешение для большинства видео в интернете – 640х390 пикселей. Мы создадим плеер таких же размеров. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру размером 640х390 пикселей.

Рисование web-плеера


Примените стиль Наложение градиента (Layer Style - Gradient Overlay): Режим – Нормальный, Стиль – Линейный.

Рисование web-плеера


Шаг 3 – Панель управления
Нам нужно будет добавить кнопку воспроизведения, иконку полного экрана, регулировку звука и полоску прокрутки.
Инструментом Прямоугольник (Rectangle Tool) создайте белую полоску под чёрным прямоугольником. Размер полоски – 640х40 пикселей.

Рисование web-плеера


Примените стиль Внутренняя тень:

Рисование web-плеера


Также примените Наложение цвета: #353535.

Рисование web-плеера


На стыке двух прямоугольников создайте 1-пиксельную разделительную линию чёрного цвета.

Рисование web-плеера


Шаг 4[ - Создание тени
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 640х430 пикселей. Расположите этот слой под всей областью видео, включая панель управления. К этому прямоугольнику примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2 пикселя.

Рисование web-плеера


Шаг 5 – Управляющие элементы
Поищите иконки плеера в интернете или воспользуйтесь этим набором. Вставьте иконки, как показано ниже. Их размер можно изменить при помощи инструмента Свободное трансформирование (Free Transform).

Рисование web-плеера


К слою с иконкой воспроизведения примените следующие стили:

Отбрасывание тени: Режим – Умножение.

Рисование web-плеера


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Рисование web-плеера

Рисование web-плеера

Рисование web-плеера


То же самое примените для других кнопок. Можете просто скопировать стили и вставить их на другие слои. Это делается через контекстное меню слоя (правый клик в палитре слоёв).

Рисование web-плеера


Шаг 6 – Полоса прогресса
Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 20 пикселей создайте фигуру, как показано ниже. Размер фигуры – 350х10 пикселей.

Рисование web-плеера


Скопируйте те же стили, что и для кнопок, на эту полоску.

Рисование web-плеера


Сделайте выделение слоя с полосой прогресса (Ctrl+Click). Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и настройте, как показано ниже. Удалите выделение на правой части полоски.

Рисование web-плеера


Создайте новый слой (Create New Layer) и залейте выделение любым цветом. Потом примените стиль Наложение градиента:

Рисование web-плеера


На конце синей части нарисуйте 1-пиксельную разделительную линию цветом #75aafb.

Рисование web-плеера


Таким же образом создайте полоску громкости. Радиус прямоугольника – 40 пикселей.

Рисование web-плеера


Шаг 7 – Индикатор времени
Выберите инструмент Горизонтальный текст (Horizontal Type Tool), шрифт – “Arial”, Regular, размером 12 пикселей. Напишите время, как показано ниже. Скопируйте стили с кнопки воспроизведения и вставьте их на время.

Рисование web-плеера


Шаг 8 – Создание большой кнопки воспроизведения
В центре области видео создайте большую кнопку воспроизведения. Можете использовать ту же иконку, что и ранее, либо нарисовать сами при помощи инструмента Многоугольник (Polygon Tool).
К кнопке примените эти стили:

Отбрасывание тени: Режим – Умножение.
Внутреннее свечение: Режим – Нормальный, Метод – Мягкий.
Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Рисование web-плеера

Рисование web-плеера


Финальный результат:

Рисование web-плеера




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





PSD файл

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