Уроки Все для Художника John Jackson 11 сентября 2009

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

Сложность урока: Сложный

Этот урок покажет вам как создать красивый медиа плеер используя средства Adobe Photoshop CS3.
Для ясности мы все вам покажем.

Для начала работы создайте новый документ, File - New (Файл - Новый), ширина и высота 478x600 пикс, разрешение 72.

Выберите инструмент Rectangle Tool (U) (Инструмент "Прямоугольник"), режим "Слой-фигура", чтобы нарисовать задний вид, растяните прямоугольник на весь документ.

Используйте следующие параметры для созданного слоя, для этого кликните два раза по слою в Палитре слоев чтобы открыть окно Стиль слоя.
Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

Настройки градиента:
Комментарий переводчика:  Для тех кто еще не научился редактировать градиенты просим пройти по ссылке.

Далее автор загрузил из интернета картинку, которая показана ниже.
Комментарий переводчика: Картинка всего лишь задний фон, к нашему медиа плееру она отношения не имеет. Но если вам она (Фрактал) понравилась и вы тоже такую хотите, то могу дать совет как можно легко найти подобную. Я люблю пользоваться интересным и очень полезным сайтом. Там всегда можно найти что-нибудь подходящее. Просто вводите в строке поиска, не переживайте что портал на английском, там все понятно, искомое слово, в нашем случае fractals и жмите на Enter, все что подойдет появиться у вас перед глазами, это могут быть и кисти и готовые PSD и конечно рисунки, осталось выбрать что понравиться. Желаю приятного поиска.

Перетащите картинку в наш документ поверх слоя с градиентом.

Примените к ней следующие параметры:  Fill (Заливка) 55%, Blending mode - Soft Light (Режим наложения - Мягкий свет)

Первым делом рисуем первый слой и главный экран нашего медиа плеера, для этого выберите Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами") с радиусом 5 пикс.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #2c3543

На следующем слое мы продолжим рисовать экран плеера, тем же инструментом и тем же радиусом растяните прямоугольник как показано ниже. Цвет - черный.

Параметры слоя: Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #11141b

Поместите поверх предыдущего слоя любую картинку того же размера:

Теперь нарисуем верхнюю часть экрана. Выберите снова Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 5 пикс и с помощью инструмента Convert Point Tool (Инструмент "Угол") измените положение нижних точек, как показано ниже:

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #000f1f

Blending Options - Inner Glow (Параметры наложения - Внутреннее свечение)

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

На нижней части главного экрана мы изобразим временную дорожку воспроизведения, Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 5 пикс.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #021a3c

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Используя последний инструмент, но уже с радиусом 10 пикс мы должны установить полоску воспроизведения, зажмите кнопку Alt чтобы вырезать ненужную область.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #116291

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Далее, используя Custom Shape Tool (U) (Инструмент "Произвольная фигура"), нарисуйте две маленькие стрелки, в стандартном наборе найти можно под названием "Стрелка 2", цвет #313540

Напишите необходимые слова на панели медиа плеера, используйте параметры Палитры символ указанные ниже:
Цвет #505559

Добавьте в правом верхнем углу системные кнопки управления окном, параметры текста смотрите ниже:
Цвет #4e5e78

Далее рисуем панель управления медиа плейером, она будет располагаться ниже главного экрана. Выберите Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами") с радиусом 5 пикс и растяните фигуру необходимой ширины.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #020f22

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #2e3444

Сделайте копию верхней части (фигура, которую мы делали как шапку для главного экрана плейера) медиа плеера. Используя инструмент Free Transform, перетащите копию на "панель управления", которую мы только что создали.

Так же сделайте копии стрелок и так же перетащите их на панель управления, как показано ниже:

Для следующего шага воспользуйтесь инструментами Rectangle Tool (U) (Инструмент "Прямоугольник") и Pen Tool (P) (Инструмент "Перо") чтобы нарисовать фигуру означающую открытие файла. Цвет #1D2331

Создайте кнопку для закрытия панели. Цвет #2a3646

Используя Pen Tool (P) (Инструмент "Перо") нарисуйте регулятор громкости.

Параметры слоя: Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #070d27

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Выберите Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 5 пикс, нарисуйте кнопку на панели управления.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #0c61a4

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #04061f

Сделайте необходимое количество копий кнопки и расположите их как показано на картинке ниже:

Выберите Pen Tool (P) (Инструмент "Перо") и Rectangle Tool (U) (Инструмент "Прямоугольник"), нарисуйте символы управления на кнопках медиа плейера.

Для слоев с символами примените следующие параметры: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень)

Сделайте надписи перед регулятором громкости, настройки используйте, как показано ниже:
Цвет #4e5e78

Теперь будем рисовать окно "Список воспроизведения", расположим его под панелью управления, с помощью Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 5 пикс, растяните фигуру.

Параметры слоя: Fill (Заливка) 0%
Blending Options - Inner Shadow (Параметры наложения - Внутренняя тень) Цвет тени #020f22

Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)

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

Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #2c3546

С помощью Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 5 пикс, нарисуйте зону для списка воспроизведения.

Параметры слоя: Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #2c3546

Сделайте копию слоя шапки главного экрана нашего медиа плеера.

Создайте новый слой выше сделанной копии, выделите на панели слоев оба слоя, затем нажмите сочетание клавиш CTRL+E. Используя инструмент Free Transform, перетащите новый слой в нижнюю часть и поверх списка воспроизведения, так же отразите фигуру по вертикали Редактирование - Трансформирование - Отразить по вертикали.

Сделайте снова копию стрелочек и перетащите на новое место:

Используя инструмент, нарисуйте кнопки для прокрутки списка. Цвет #36373C

Сделайте так же копию кнопки для закрытия панели и перетащите ее на панель списка воспроизведения:

Напишите имена файлов и их продолжительность. Для первого (movie 01) используйте первые настройки. Цвет #52a1f0

Для остальных:
Цвет #4d565d

В заключении напишите название панели списка воспроизведения, используйте следующие настройки:
Цвет #4e5e78

И мой вариант:

Красивая обложка для нашего медиа плеера готова.

Автор: Adobe Photoshop Tutorials
Перевод: John Jackson
Ссылка на источник

 

Источник: www.adobetutorialz.com

Комментарии 21

Спасибо автору и переводчику! Было интересно.

Благодарю!

Спасибо за урок!

Вот моя работа) блин перо никак освоить немогу!(
изображение размазано,тк уменшил размер

Спасибо, Иван... Классный перевод и оформление...))

Спасибо большое)))))))))))))))))))))))))))))))

Урок очень интересный.Побольше бы таких! Спасибо

хахахах Александр у тебя Chaper 04 - 45:00 , а показано что ты сейсас этот фильм сотришь ка 48:04 , как так можно?)))
Ты хоть думай что делаешь)

Я это сделал... фух, спасибо:)

А можно ведь и не только mp3 плеер сделать, но и полноценный медиа-плеер )

Спасибо большое!
Вот мое творчество )

Возьми, вырежь картинку и наклей на проигрыватель. Кнопки отдельно.

Может, правда, кто расскажет, как поставить на проигрыватель?

Интересно как теперь эту обложку сделать на медиа плеер?

Спасибо ПРЕОГРОМНОЕ за урок! очень был нужен!
просто вах!

У меня вообще после того как нада:
Первым делом рисуем первый слой и главный экран нашего медиа плеера, для этого выберите Rounded Rectangle Tool (U) (Инструмент "Прямоугольник со скругленными углами") с радиусом 5 пикс.
Параметры слоя: Fill (Заливка) 0%
Blending Options - Gradient Overlay (Параметры наложения - Наложение градиента)
Blending Options - Stroke (Параметры наложения - Обводка) Цвет обводки #2c3543
На следующем слое мы продолжим рисовать экран плеера, тем же инструментом и тем же радиусом растяните прямоугольник как показано ниже. Цвет - черный.

Кароче после этого у меня гардиентом покрывается весь Слой а не этот прямоугольник...чё делать?помогите))

А можно спросить? Как применить это оформление для настоящего проигрывателя? Или это так, рисунок просто?

ВЕЛИКОЛЕПНО!!!

Спасибо за урок!!! Низкий вам поклон!

Добавить комментарий / работу

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее