Рубрика: Photoshop Уроки | Урок прочитали: 1058
 (голосов: 0)

Рисуем медиа проигрыватель в 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
Ссылка на источник

 

           

Похожие файлы и публикации:

Рисуем медиа проигрыватель в Photoshop
Если вы хотите знать, как сделать выразительные обои, тогда почитайте этот Photoshop урок.
Рисуем медиа проигрыватель в Photoshop
Урок по созданию обоев для азартных людей.
Рисуем медиа проигрыватель в Photoshop
Этот урок посвящён тому, как с помощью Adobe Photoshop CS3 создать шаблон портфолио.
Рисуем медиа проигрыватель в Photoshop
В этом уроке мы будем учиться создавать удивительные обои  с "магическими" цветовыми  эффектами с помощью простых методов.
Рисуем медиа проигрыватель в Photoshop
Сейчас мы узнаем, как с нуля создать логотип Microsoft Windows Media Player 10.     
Рисуем медиа проигрыватель в Photoshop
Огненный текст - одна из классических техник, которые любят применять в уроках по Photoshop. Я покажу другую версию использования изображения реального огня, с применением фильтров и режима наложения. Поехали!
Рисуем медиа проигрыватель в Photoshop
Создайте новый файл, размером 773х220 px и разрешением 72. Используя следующий инструмент , разметьте документ как показано ниже.
Рисуем медиа проигрыватель в Photoshop
Итоговый результат:
Рисуем медиа проигрыватель в Photoshop
В этом уроке вы узнаете, как создать мрачный текстовый эффект, используя стили слоя.
Рисуем медиа проигрыватель в Photoshop
В этом уроке Вы узнаете, как создать винтажный дизайн для шаблона Wordpress в Фотошоп.
Рисуем медиа проигрыватель в Photoshop
В этом уроке вы узнаете, как создать светящийся текстовый эффект с нуля.
Рисуем медиа проигрыватель в Photoshop
Детали урока Программа: Adobe Photoshop CS2+ Сложность: Легкая Примерное время выполнения: 20 минут
Рисуем медиа проигрыватель в Photoshop
Сегодня мы создадим симпатичную кнопку-переключатель, которую вы сможете использовать в своих работах. Для начала взглянем на финальное изображение.
Рисуем медиа проигрыватель в Photoshop
Adobe Photoshop часто используют для создания веб элементов. Согласитесь, в этом он хорош. Поэтому сегодня мы создадим прайс лист, используя векторные фигуры и стили слоя.
Рисуем медиа проигрыватель в Photoshop
В этом уроке я покажу вам, как создать стильную визитку в Фотошоп. Она будет простой, но в то же время интересной.