Фотошоп

Saturday, July 6, 2013

Hi-tech интерфейс для mp3 плеера

1. Создайте новый документ размером 392×306 px и разрешением 72 dpi и залейте его цветом #0B9EE3.

Hi-tech интерфейс для mp3 плеера



2. При помощи инструмента Эллипс (Ellipse Tool) создайте эллипс цветом #017CCA.

Hi-tech интерфейс для mp3 плеера



3. Используя тот же инструмент Эллипс (Ellipse Tool), нарисуйте ещё одну фигуру цветом #189FD7.

Hi-tech интерфейс для mp3 плеера



4. Создайте ещё один элемент вокруг предыдущего цветом #22B5E1:

Hi-tech интерфейс для mp3 плеера



5. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и нарисуйте элемент корпуса медиа плеера цветом #F3B91D. Инструментом Преобразовать точку привязки (Convert Point Tool) подкорректируйте углы элемента.

Hi-tech интерфейс для mp3 плеера



6. Примените для элемента стиль Внутреннее свечение (Layer Style - Inner Glow).

Hi-tech интерфейс для mp3 плеера



7. Используя тот же инструмент Прямоугольник с закругленными краями

(Rounded Rectangle Tool), создайте основной слой корпуса (подкорректируйте форму элемента инструментом Преобразовать точку привязки (Convert Point Tool)).

Hi-tech интерфейс для mp3 плеера



8. Примените для слоя стиль Внутреннее свечение (Layer Style - Inner Glow).

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



Обводка:

Hi-tech интерфейс для mp3 плеера



9. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и нарисуйте выступ экрана медиа плеера.

Hi-tech интерфейс для mp3 плеера



10. Установите Заливку (Fill) слоя - 0% и примените для элемента стиль Внутренняя тень

(Layer Style - Inner Shadow).

Hi-tech интерфейс для mp3 плеера



Обводка:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



11. При помощи того же инструмента Прямоугольник с закругленными краями

(Rounded Rectangle Tool) нарисуйте панель для кнопок медиа плеера. Инструмент Удалить точку привязки (Delete Anchor Point Tool) поможет стереть ненужные элементы. С помощью инструмента Преобразовать точку привязки (Convert Point Tool) выпрямите нижние углы панели.

Hi-tech интерфейс для mp3 плеера



12. Примените для панели стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



Наложение узора:

Hi-tech интерфейс для mp3 плеера



Обводка:

Hi-tech интерфейс для mp3 плеера



13. Скопируйте новый слой и в режиме Свободного трансформирования (Free Transform) переверните копию и разместите её вертикально, как на рисунке ниже:

Hi-tech интерфейс для mp3 плеера



14. Примените для копии стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



15. С помощью инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте экран медиа плеера:

Hi-tech интерфейс для mp3 плеера



16. Примените для экрана стиль Внутреннее свечение (Layer Style - Inner Glow).

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



17. Скопируйте новый слой и, удерживая Alt, инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) вырежьте внутреннюю зону копии.

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



18. Примените для копии стиль Тиснение (Layer Style - Bevel and Emboss).

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



19. Выберите инструмент Перо (Pen Tool) и создайте блеск на экране медиа плеера:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



20. Примените для блеска стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



21. При помощи инструмента Карандаш (Pencil Tool) нарисуйте несколько знаков белого цвета, расположенных на экране медиа плеера:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



22. Используя инструмент Прямоугольник (Rectangle Tool), нарисуйте прямоугольник белого цвета. Выделите слой (Shift+Alt) и инструментом Преобразовать точку привязки

(Convert Point Tool) скопируйте прямоугольник.

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



23. Напишите на экране время и имя певца и песни. Настройки указаны ниже. Для (time):

Hi-tech интерфейс для mp3 плеера



Для (name, singer, track):

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



24. При помощи инструмента Эллипс (Ellipse Tool) создайте углубление для кнопки медиа плеера.

Hi-tech интерфейс для mp3 плеера



25. Примените для слоя стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



26. Скопируйте новый слой и в режиме Свободного трансформирования (Free Transform) немного уменьшите копию.

Hi-tech интерфейс для mp3 плеера



27. Примените для копии стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



Обводка:

Hi-tech интерфейс для mp3 плеера



28. Объедините в группу все слои, содержащие кнопку. Сделайте 5 копий новой группы и добавьте специальный эффект на слой последней кнопки:

Hi-tech интерфейс для mp3 плеера



29. Примените для слоя стиль Внешнее свечение (Layer Style - Outer Glow).

Hi-tech интерфейс для mp3 плеера



30. При помощи инструмента Прямоугольник (Rectangle Tool) нарисуйте указатель паузы на кнопке.

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



31. Установите Заливку (Fill) слоя - 0% и примените для указателя стиль Отбрасывание тени (Layer Style - Drop Shadow).

Hi-tech интерфейс для mp3 плеера



Внутренняя тень:

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



32. Используя тот же инструмент Прямоугольник (Rectangle Tool), также нарисуйте указатель остановки:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



33. Установите Заливку (Fill) слоя - 0% и примените для указателя стиль Отбрасывание тени (Layer Style - Drop Shadow).

Hi-tech интерфейс для mp3 плеера



Внутренняя тень:

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



34. Инструменты Прямоугольник (Rectangle Tool) и Перо (Pen Tool) помогут нарисовать указатель “вверх”:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



35. Установите Заливку (Fill) слоя - 0% и примените для указателя стиль Отбрасывание тени (Layer Style - Drop Shadow).

Hi-tech интерфейс для mp3 плеера



Внутренняя тень:

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



36. Используя те же инструменты, нарисуйте указатель “назад”:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



37. Установите Заливку (Fill) слоя - 0% и примените для указателя стиль Отбрасывание тени (Layer Style - Drop Shadow).

Hi-tech интерфейс для mp3 плеера



Внутренняя тень:

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



38. Скопируйте последний указатель на кнопке медиа плеера (переверните треугольник на 180 градусов инструментом Свободное трансформирование (Free Transform)).

Hi-tech интерфейс для mp3 плеера



39. Найдите похожий указатель, как на рисунке:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



40. Установите Заливку (Fill) слоя - 0% и примените для указателя стиль Отбрасывание тени (Layer Style - Drop Shadow).

Hi-tech интерфейс для mp3 плеера



Наложение градиента:

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



41. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и создайте указатель проигрывания чёрного цвета:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



42. Скопируйте новый слой и в режиме Свободного трансформирования (Free Transform) расположите копию горизонтально:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



43. Примените для копии стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



44. Теперь перейдите к созданию “ползунка”:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



45. Примените для элемента стиль Наложение градиента (Layer Style - Gradient Overlay).

Hi-tech интерфейс для mp3 плеера



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

Hi-tech интерфейс для mp3 плеера



Обводка:

Hi-tech интерфейс для mp3 плеера



46. Выберите инструмент Карандаш (Pencil Tool) и нарисуйте кнопку минимизации медиа плеера:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера



47. Инструментом Карандаш (Pencil Tool) также нарисуйте кнопку “стоп”:

Hi-tech интерфейс для mp3 плеера


Hi-tech интерфейс для mp3 плеера


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

No comments:

Post a Comment