Фотошоп для фотографа 2013

Рисуем интерфейс плеера используя Фотошоп

| Категория: Уроки по рисованию компьютерной графики в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания интерфейса для плеера.


Финальный результат

Рисуем интерфейс плеера используя Фотошоп

Приступаем к уроку Фотошопа


Часть первая. Основа.


В этой части мы создадим основную форму интерфейса.


Шаг 1.


Создайте новый документ в режиме RGB с произвольными размерами - File > New (Файл > Новый / Сочетание клавиш "Ctrl+N").

Создайте новый слой - New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N").

берем инструмент Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U"), выбираем прямоугольник.

Сделайте основным серый цвет - foreground Основной цвет в Фотошопе (Основной цвет).


Рисуем интерфейс плеера используя Фотошоп

Шаг 2.


Создайте прямоугольник серого цвета как показано на рисунке: ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 3.


Выберите Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") и удерживая клавишу Shift создайте овальное выделение.


Нажмите Delete чтобы удалить угол созданного прямоугольника.

Теперь перетащите выделение к противоположному углу.

Опять нажмите Delete чтобы удалить второй угол. У вас должно получится примерно как на изображении ниже: ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 4.


Теперь нам предстоит обработать нижнюю часть прямоугольника.

Выберите Polygonal Lasso Tool Инструмент - Многоугольное лассо (Инструмент Многоугольное лассо / Клавиша "L").

Создайте выделение как показано на картинке. Открою вам небольшую хитрость: чтобы при создании выделения на скосах добиться величины угла в 45 градусов, удерживая Shift переведите курсор ниже (или выше) и немного дальше от последней точки. Лассо сделает угол ровно в 45 градусов.

После того как вы создали нужное выделение нажмите Delete.


Рисуем интерфейс плеера используя Фотошоп

Шаг 5.


Выберите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и установите параметры как показано на рисунке (радиус скругления 3 px): ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 6.


Создайте новый слой - New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N").

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


Загрузите выделение этого слоя (Ctrl+клик на нужном слое в палитре слоев).

Перейдите к первому слою с интерфейсом.


Рисуем интерфейс плеера используя Фотошоп

Шаг 7.


Нажмите Delete для того чтобы удалить выделенную часть.


Рисуем интерфейс плеера используя Фотошоп

Итак первая часть урока закончена. Переходим ко второй.


Часть вторая. Добавление объема.


В этой части мы придадим нашему интерфейсу нужный объем.


Шаг 1.


Загрузите выделение слоя с интерфейсом (Ctrl+клик по данному слою в палитре слоев).


Рисуем интерфейс плеера используя Фотошоп

Шаг 2.


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

Создайте новый канал кликнув на иконке которая называется Create New Channel (Создать новый канал).


Рисуем интерфейс плеера используя Фотошоп

Шаг 3.


Если выделение как и фон черного цвета, нажмите Ctrl+I для того, чтобы инвертировать цвет выделения.

Снимите выделение нажав Ctrl+D.


Рисуем интерфейс плеера используя Фотошоп

Шаг 4.


Примените Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу).

Нажмите Ок.


Рисуем интерфейс плеера используя Фотошоп

Шаг 5.


Перейдите к палитре слоев.

Выберите первый слой с интерфейсом.

Важное примечание: даже если вы думаете, что работаете в нужном слое, все равно нужно щелкнуть по этому слою, чтобы убедиться что вы работаете во всех каналах, а не только в Альфа-канале.


Рисуем интерфейс плеера используя Фотошоп

Шаг 6. Добавим объема.


Примените Filter > Render > Lighting effects (Фильтр > Рендеринг > Эффекты освещения).

У вас должно открыться диалоговое окошко как показано ниже. Установите подходящие параметры. Не используйте никаких экстремальных подсветок, не забывайте что это интерфейс. Все должно выглядеть так как на картинке. Кстати при настройке параметров обратите внимание на небольшую уловку: под фактурным каналом мы выбираем созданный ранее канал Alfa 1 (Альфа 1).

Нажмите Ок.


Рисуем интерфейс плеера используя Фотошоп

Шаг 7.


Наш интерфейс должен быть похож на картинку, которую вы видите ниже.

Итак, мы придали 3D реализма нашему интерфейсу.


Рисуем интерфейс плеера используя Фотошоп

Шаг 8.


Теперь откройте диалоговое окошко Curves (Кривых). Для этого нажмите Ctrl+M. Так же вы можете открыть данное окошко перейдя Image > Adjustments > Curves (Изображение > Коррекция > Кривые / Сочетание клавиш "Ctrl+M").

Настройте кривые примерно так, как показано на изображении ниже. ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 9.


Теперь нам потребуется небольшая регулировка цвета.

Далее открываем → Image > Adjustments > Hue/Saturation (Изображение > Коррекция > Цветовой тон/Насыщенность - Сочетание клавиш "Ctrl+U").

Включите флажок Colorize (Тонирование / Колорирование). Придайте интерфейсу легкий голубоватый оттенок, для того чтобы он больше походил на хром.


Рисуем интерфейс плеера используя Фотошоп

Шаг 10.


Добавьте внешнюю тень - Layer > Layer Style > Drop Shadow (Слой > Стиль слоя > Тень).


Мы закончили создавать интерфейс, а вместе с ним и закончили вторую часть этого урока.

В результате должно получиться вот такое изображение: ↓


Рисуем интерфейс плеера используя Фотошоп

Часть третья. Создание дисплея.


В этой части мы постараемся создать реалистичный дисплей.


Шаг 1.


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

Если у вас отсутствует этот слой, вы можете создать его заново. Для этого воспользуйтесь Magic Wand Tool Инструмент - Волшебная палочка (Инструмент "Волшебная палочка" / Клавиша "W"). Щелкните этим инструментов в месте где должен быть экран. Появиться требуемое выделение. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и залейте выделение серым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


Рисуем интерфейс плеера используя Фотошоп

Шаг 2.


Добавим немного шума.

Для этого примените Filter > Noise > Add noise (Фильтры > Шум > Добавить шум).


Рисуем интерфейс плеера используя Фотошоп

Шаг 3.


Теперь нужно придать дисплею легкий зеленый оттенок.

Для этого откройте Image > Adjustments > Hue/Saturation (Изображение > Коррекция > Цветовой тон/Насыщенность - Сочетание клавиш "Ctrl+U").

Включите флажок Colorize (Тонирование / Колорирование) и настройте подходящий цвет.


Рисуем интерфейс плеера используя Фотошоп

Шаг 4.


Сейчас ваш экран должен выглядеть как в шаге номер пять.

Теперь добавим немного элементов для экрана.

Выберите инструмент Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U").

Установите параметры как на изображении ниже: ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 5.


Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и добавьте несколько треугольников как показано на изображении ниже. ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 6.


Теперь создадим шкалу баланса.

Создайте на новом слое (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) с помощью Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") одно деление шкалы. После этого удерживая клавишу Alt перетаскивайте это деление до тех пор пока не достигните нужного изображения.


Рисуем интерфейс плеера используя Фотошоп

Шаг 7.


Как вы видите каждое деление шкалы расположено на отдельном слое.

Свяжите эти слои между собой как показано на изображении ниже. ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 8.


Теперь нужно выровнять все деления. Для этого используйте панель выравнивания.


Рисуем интерфейс плеера используя Фотошоп

Шаг 9.


Добавьте текстовую информацию. Например список песен и т.п.


Рисуем интерфейс плеера используя Фотошоп

Шаг 10.


А теперь мы добавим "левелметер".

Выделите область где хотите его расположить.

Создайте новый слой - New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N").


Рисуем интерфейс плеера используя Фотошоп

Шаг 11.


Залейте выделение подходящей полосатой текстурой.


Рисуем интерфейс плеера используя Фотошоп

Шаг 12.


Если в вашей текстуре имеются белые полосы избавьтесь от них.


Рисуем интерфейс плеера используя Фотошоп

Шаг 13.


Удалите ненужные части так чтобы изображение разделилось на равные столбцы.


Рисуем интерфейс плеера используя Фотошоп

Шаг 14.


Удалите ненужные части так, чтобы все столбцы были разной высоты.


Рисуем интерфейс плеера используя Фотошоп

Шаг 15.


Мы подошли к концу третьей части этого урока. Ваше изображение должно быть примерно таким: ↓


Рисуем интерфейс плеера используя Фотошоп

Часть четвертая. Создание кнопок.


В этой части мы создадим кнопки и доработаем весь плеер до состояния фотореалистичности.


Шаг 1.


Итак, доработаем экран. Загрузите выделение слоя с экраном (Ctrl+клик на данном слое в палитре слоев).


Рисуем интерфейс плеера используя Фотошоп

Шаг 2.


Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), на котором мы создадим отражение.


Рисуем интерфейс плеера используя Фотошоп

Шаг 3.


Выберите основным цветом - белый. Выберите бело-прозрачный градиент - Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G").


Параметры градиента: ↓

Рисуем интерфейс плеера используя Фотошоп

Шаг 4.


Залейте этим градиентом 1/3 выделения.


Рисуем интерфейс плеера используя Фотошоп

Шаг 5.


Повторите четвертый шаг для нижней части.


Рисуем интерфейс плеера используя Фотошоп

Шаг 6.


Загрузите выделение слоя с градиентами. Перейдите в режим свободной трансформации и немного уменьшите размер градиентов.


Рисуем интерфейс плеера используя Фотошоп

Шаг 7.


Примените Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) со значением равным 2 px.

Установите непрозрачность слоя (Opacity) на 60%.


Шаг 8.


Сейчас вы должны иметь реалистичный экран.


Рисуем интерфейс плеера используя Фотошоп

Шаг 9.


Добавьте логотип компании-изготовителя.


Рисуем интерфейс плеера используя Фотошоп

Шаг 10.


Осталось добавить кнопки.

Создайте новый слой - New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N").

Создайте значки кнопок.


Рисуем интерфейс плеера используя Фотошоп

Шаг 11.


Выберите слой с изображением корпуса.


Рисуем интерфейс плеера используя Фотошоп

Шаг 12.


Создайте выделение для кнопки.


Рисуем интерфейс плеера используя Фотошоп

Шаг 13.


Нажмите Ctrl+J. Мы скопировали часть слоя, которая будет служить кнопкой.


Рисуем интерфейс плеера используя Фотошоп

Шаг 14.


Щелкните на слое с кнопкой два раза. В открывшемся окне стилей (Blending Options (Параметры наложения)) установите параметры как на изображении ниже. ↓


Bevel and Emboss (Тиснение и рельеф): ↓

Рисуем интерфейс плеера используя Фотошоп

Шаг 15.


У вас должна получиться вот такая кнопка: ↓


Рисуем интерфейс плеера используя Фотошоп

Шаг 16.


Аналогичным способом создайте нижние кнопки.


Рисуем интерфейс плеера используя Фотошоп

Шаг 17.


Вот мы и создали довольно реалистичный плеер. При помощи этого урока вы можете создавать реалистичный интерфейс для различных программ, приложений, веб-сайтов и т.д.


Финальный результат

Рисуем интерфейс плеера используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru