Мир твоих увлечений · статьи сайта

MP3 Плеер

24 февраля 2008 · Photoshop

[картинка не сохранилась]

ШАГ 1

Создайте документ с черным фоном размером примерно 700х400. Возьмите инструмент rounded rectangle tool, радиус скругления углов поставьте на 20px. Создайте новый слой и нарисуйте на нем прямоугольник с округленными краями размером width: 417 x height: 268, цветом #F6F5F3

Теперь применим к слою с прямоугольником следующие параметры Layer Style

Inner Shadow

[картинка не сохранилась]

Inner Glow:

[картинка не сохранилась]

Color Overlay:

[картинка не сохранилась]

Satin:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

ШАГ 2

Нажимаем Select - > Load Select.

Ставим foreground color на #FFFFFF. Берем инструмент brush tool с мягкой кистью, создаем новый слой и на новом слое закрашиваем небольшой участок как на картинке ниже:

[картинка не сохранилась]

Создайте новый слой и назовите его Button. На это слое с помощью eclipse tool нарисуйте круг размером width: 95 x height: 95, цветом #323943

[картинка не сохранилась]

Снова создайте новый слой и нарисуйте круг размером width: 87 x height: 87, цветом #40454B

Добавьте к нему следующие параметра layer styles

Inner Shadow

[картинка не сохранилась]

Inner Glow:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Опять создаем новый слой и рисуем круг размером (width: 27 x height: 27) цветом #40454B

Применяем параметры Layer Style

Inner Shadow

[картинка не сохранилась]

Outer Glow:

[картинка не сохранилась]

Inner Glow:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Берем pencil tool и рисуем стрелочки на новом слое. В layer styles ставим

Stroke

[картинка не сохранилась]

Слою со стрелочкой ставим прозрачность на 60%.

[картинка не сохранилась]

Дорисовываем со всех сторон:

[картинка не сохранилась]

Создайте новый слой и назовите его Screen.

Выберите rounded rectangle tool с округлением углов 2px.

Рисуем на этом слое прямоугольник с округленными краями размером (width: 259 x height: 195), #7B7A80. Добавляем следующие параметры Layer Style

Inner Shadow

[картинка не сохранилась]

Outer Glow:

[картинка не сохранилась]

Gradient Overlay:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Создайте новый слой

Выберите rounded rectangle tool с округлением углов 2px.

Рисуем на этом слое прямоугольник с округленными краями размером (width: 235 x height: 182), #2A242E Добавляем следующие параметры Layer Style

Stroke.

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Создайте новый слой

Выберите rounded rectangle tool с округлением углов 20 px.

Рисуем на этом слое прямоугольник с округленными краями размером (width: 96 x height: 25), #000000 Добавляем следующие параметры Layer Style

Inner Shadow

[картинка не сохранилась]

Inner Glow:

[картинка не сохранилась]

Color Overlay:

[картинка не сохранилась]

Gradient Overlay:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Добавляем текст Verdana, Regular, 14pt, Sharp and #FFFFF

Добавьте стрелочку с помощью шрифта Webdings или сами нарисуйте с помощью Pencil Tool.

[картинка не сохранилась]

Для удобства создайте новы Set перенесите туда кнопку, а далее дублируйте ее столько сколько вам нужно.

[картинка не сохранилась]

[картинка не сохранилась]

Откройте любое понравившееся фото и добавте его в наш проект. Автор урока создал специальную картику.

[картинка не сохранилась]

Получилось так:

[картинка не сохранилась]

Рисуем отверстие от микрофона.

Создадим новый слой. С помощью round rectangle tool нарисуем прямоугольник размером (width: 11 x height: 12), цветом #121921. И применим следующие параметры слоя Layer Style.

Drop Shadow

[картинка не сохранилась]

Inner Shadow:

[картинка не сохранилась]

Outer Glow:

[картинка не сохранилась]

Stroke:

[картинка не сохранилась]

Результат:

[картинка не сохранилась]

Создайте новы слой. На этом слое будет сетка динамика.

Создайте pattern как на картинке ниже. И примените* его на нашем плеере.

[картинка не сохранилась]

* insane-z: в уроке не рассказывается, как применить этот pattern, поэтому во избежание тысячи вопросов я расскажу, как это сделать )) Создайте новый слой, возьмите инструмент round rectangle tool размером 40х40 пикселей, округление углов 2-3 px. Нарисуйте его по круглой кнопкой плеера. Далее применяем к нему Pattern Overlay, где выбираем уже создайнный pattern из предыдущего пункта.

Добавьте к плееру логотип. Автор урока воспользовался этим:

[картинка не сохранилась]

[картинка не сохранилась]

Итог урока:

[картинка не сохранилась]

Источник: www.zymic.com
Перевод: insane-z

Оригинал: снимок Wayback Machine от 08.03.2008.

Статичная копия: без входа, поиска, комментариев и скриптов. Ники и тексты авторов — как были; адреса почты скрыты.