С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Музыкальный плеер для сайта в Фотошопе

Музыкальный плеер для сайта в Фотошопе

Из этого урока вы узнаете, как создать графическую часть музыкального мини-плеера в Фотошопе.

 

Окончательное изображение

 

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

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 1

 

Откройте Photoshop и нажмите комбинацию клавиш Ctrl + N, чтобы создать новый документ. Введите такие же значения, которые показанные на рисунке ниже и нажмите кнопку OK. Включите сетку (Просмотр> Показать> Сетку (View> Show> Grid)) и привязку к сетке (Просмотр> Привязать к> Линиям сетки (View> Snap To> Grid)).

 

Теперь необходимо настроить сетку нужным нам образом, для этого перейдите в меню Редактирование> Установки> Направляющие, сетка и фрагменты (Edit> Preferences> Guides, Grid & Slices) и отредактируйте нужным образом раздел с настройками сетки. Введите значения, как показано на изображении ниже и измените цвет сетки на # 696969. После того как вы установите все эти настройки, нажмите кнопку ОК. Данная сетка облегчит вашу работу позже. Вы также должны открыть панель Инфо (Info), для этого перейдите в меню Окно> Инфо (Window> Info). Эта панель предназначена для предварительного просмотра размеров и положений ваших форм.

 

Музыкальный плеер для сайта в Фотошопе


 

Шаг 2

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), установите радиус скругления в 5 пкселей и создайте векторную фигуру размеров в 492 на 40 пикселей. Переместитесь в панель слоев и дважды щелкните на эту новую форму, чтобы открыть окно Стили слоя (Layer Style). Введите значения, как показано на изображениях ниже и нажмите кнопку ОК.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 3

 

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте квадратную форму со стороной в 10 пикселей. Выберите форму в панели слоёв и переключитесь на инструмент Стрелка (Direct Selection Tool). Выберите верхнюю левую точку и переместите её на 5 пикселей вниз, затем выберите нижнюю левую опорную точку и переместите её 5 пикселей вверх. В конце концов, ваш прямоугольник должен превратиться в треугольник. Откройте окно Стили слоя (Layer Style) для этой новой формы и введите значения, как показано в следующих изображениях ниже.

 


Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 4

 

Продублируйте треугольник, который вы создали в предыдущем шаге (Ctrl + J) и переместите копию на несколько пикселей вправо. Выберите эту копию вместе с оригинальным треугольником и разместите их, как показано на первом изображении. Сделайте три новых копий вашего треугольника, разверните их на 180 градусов и разместите так, как показано на втором изображении.

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 5

 

Снова выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и установите радиус скругления в 5 пикселей. Измените цвет переднего плана на # 4b738c и создайте векторную фигуру размером в 200 на 4 пикселей и поместите её, как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для этой новой формы и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 6

 

Опять выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), измените цвет переднего плана на # a6ddff, создайте векторную фигуру размером в 135 на 2 пикселей и поместите её как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для этого новой формы и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 7

 

Выберите инструмент Эллипс (Ellipse Tool), создайте круг размером в 12 пикселей и поместите его как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для этого новой формы и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 8

 

Снова выберите инструмент Эллипс (Ellipse Tool), измените цвет переднего плана на # 4b738c, создайте круг размером в 4 пикселя и поместите его как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для этого новой формы и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 9

 

Выберите инструмент Текст (Type Tool) и добавьте значения времени белым цветом, как показано на следующем рисунке. Используйте шрифт Calibri, размер шрифта установите в 11 пунктов. Откройте окно Стили слоя (Layer Style) для вашего текста и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 10

 

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте векторную фигуру размером в 7 на 10 пикселей. Выделите ее и переключитесь на инструмент Стрелка (Direct Selection Tool). Выберите верхнюю левую точку и переместите её на 5 пикселей вниз, затем выберите нижнюю левую опорную точку и переместить её на 5 пикселей вверх. В конце концов, ваш прямоугольник должен превратиться в треугольник. Выделите его и выберите инструмент Прямоугольник (Rectangle Tool). На панели управления выбранным инструментом выберите операцию с контуром Объединить фигуры (Add to Shape Area) и создайте квадрат со стороной в 4 пикселя, как показано в третьем изображении.

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 11

 

Выберите инструмент Эллипс (Ellipse Tool) и создайте круг размером в 10 пикселей, выберите его. На панели управления выбранным инструментом выберите операцию с контуром Вычесть переднюю фигуру (Subtract from Shape Area) и создайте круг размером в 8 пикселей, как показано на втором изображении.

 

Теперь ваша векторная фигура должна выглядеть как на втором изображении. Выделите ее и переключитесь на инструмент Прямоугольник (Rectangle Tool). На панели управления выбранным инструментом выберите операцию с контуром Вычесть переднюю фигуру (Subtract from Shape Area) и создайте прямоугольник размером в 5 на 10 пикселей, как показано в третьем изображении.

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 12

 

Выберите инструмент Эллипс (Ellipse Tool) и создайте круг размером в 4 пикселя, выберите его. На панели управления выбранным инструментом выберите операцию с контуром Вычесть переднюю фигуру (Subtract from Shape Area) и создайте круг размером в 2 пикселя, как показано на втором изображении.

 

Теперь ваша векторная фигура должна выглядеть как на втором изображении. Выделите ее и переключитесь на инструмент Прямоугольник (Rectangle Tool). На панели управления выбранным инструментом выберите операцию с контуром Вычесть переднюю фигуру (Subtract from Shape Area) и создайте прямоугольник размером в 3 на 6 пикселей, как показано в третьем изображении.

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 13

 

Выберите все векторные фигуры, которые созданы в течение последних трех шагов и разместите их, как показано на следующем рисунке. Откройте окно Стили слоя (Layer Style) для вашего текста и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 14

 

Выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и установите радиус скругления в 5 пикселей. Измените цвет переднего плана на # 4b738c и создайте векторную фигуру размером в 50 на 4 пикселя, поместите её как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для вашего текста и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 15

 

Снова выберите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool), измените цвет переднего плана на # a6ddff, создайте векторную фигуру размером в 29 на 2 пикселя и поместите её как показано на первом изображении. Откройте окно Стили слоя (Layer Style) для вашего текста и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Шаг 16

 

Выберите инструмент Прямоугольник (Rectangle Tool) и измените цвет переднего плана на черный. Создайте три векторных фигуры размером в 1 на 10 пикселей и разместите их, как показано ниже. Откройте окно Стили слоя (Layer Style) для вашего текста и введите настройки, как показано в следующих изображениях ниже.

 

Музыкальный плеер для сайта в Фотошопе

 

Финальное изображение

 

Вот как должен выглядеть окончательный результат.

 

Музыкальный плеер для сайта в Фотошопе

 

Вот и всё! Урок по теме - Создание музыкального шаблона в Фотошопе.

 

 


Автор урока: photoshopstar.com

 

Переводчик урока: Ирина Шипилова 

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

 



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 31.01.2013
  •   Просмотров: 2989
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Юрий Петрович (04.02.2013 | 22:04)

Работа проделана большая,но пустая.
Я так и не понял зачем было рисовать такой плеер, если его не куда применить.
А если есть ему применение то где и как. просто показали как рисовать?
А видео урок Вам слабо наверно зделать,да ещё в русскоязычном Фотошопе.
Вы же создаёте урок для РУССКОГО пользователя или для америкосов?
А тупо заниматься переводом,я думаю не стоит,нужно создавать своё и
для РУССКОГО пользователя,на родном Русском языке.
Короче,я просмотрел 2 таких урока и честно признаюсь,что эти уроки очень
сложно понять,особенно новичку.
Так для чего же рисовался этот плеер и геде и как его можно применить.
Юрий Петрович.

irina (18.03.2013 | 12:00)

Юрий Петрович, очень многие пользователи Фотошопа используют оригинальную Fнглийскую версию программы, так как она намного удобнее. Перевод в Русской версии CS6 сделан всё также коряво как и в предыдущих...  Если вы на все руки мастер, то вы должны знать. что делать дальше с рисунком плеера. Конечноже можно сделать урок по написанию кода плеера, но это уже урок по программированию и не по тематике этого сайта.

Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки