Создаем стильный интерфейс плеера, Онлайн уроки Photoshop

Photorealistic Interface

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

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

Шаг 1.
Создайте новый документ в режиме RGB.
Создайте новый слой.
Выберите Rectangle Shape Tool.
Сделайте основным серый цвет.



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



Шаг 3.
Выберите Elliptical Marquee Tool и удерживая клавишу Shift создайте овальное выделение.
Нажмите Delete чтобы удалить угол созданного прямоугольника.
Теперь перетащите выделение к противоположному углу.
Опять нажмите Delete чтобы удалить второй угол. У вас должно получится примерно так:



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



Шаг 5.
Выберите Rounded Rectangle Shape Tool и установите параметры как показано на рисунке:



Шаг 6.
Создайте новый слой.
Создайте прямоугольник такого размера, какого по вашему мнению должен быть дисплей.
Загрузите выделение этого слоя (Ctrl+клик на нужном слое).
Перейдите к первому слою с интерфейсом.



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



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

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

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

Шаг 1.
Загрузите выделение слоя с интерфейсом.



Шаг 2.
Откройте палитру каналов.
Создайте новый канал кликнув на иконке которая называется Create New Channel



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



Шаг 4.
Примените Filter>Blur>Gaussian Blur
Нажмите ОК.



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



Шаг 6.
Добавим объема.
Примените Filter>Render>Lighing effects
У вас должно открыться диалоговое окошко как показано ниже. Установите подходящие параметры. Не используйте никаких экстремальных подсветок, не забывайте что это интерфейс. Все должно выглядеть так как на картинке. Кстати при настройке параметров обратите внимание на небольшую уловку: под фактурным каналом мы выбираем созданный ранее канал Alfa 1.
Нажмите ОК.



Шаг 7.
Наш интерфейс должен быть похож на картинку, которую вы видите ниже.
Итак, мы придали 3D реализма нашему интерфейсу.



Шаг 8.
Теперь откройте диалоговое окошко Curves. Для этого нажмите Ctrl+M. Так же вы можете открыть данное окошко перейдя Image>Adjust>Curves
Настройте кривые примерно так, как показано на рисунке.



Шаг 9.
Теперь нам потребуется небольшая регулировка цвета.
Откройте Image>Adjust>Hue/Saturation или просто нажмите Ctrl+U.
Включите флажок Colorize. Придайте интерфейсу легкий голубоватый оттенок, для того чтобы он больше походил на хром.



Шаг 10.
Добавьте внешнюю тень.
Мы закончили создавать интерфейс, а вместе с ним и закончили вторую часть этого урока.
В результате должно получиться вот такое изображение:



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

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

Шаг 1.
Выберите второй слой, который как мы помним должен иметь форму дисплея.
Если у вас отсутствует этот слой, вы можете создать его заново. Для этого воспользуйтесь Волшебной Палочкой (Magic Wand). Щелкните этим инструментов в месте где должен быть экран. Появиться требуемое выделение. Создайте новый слой и залейте выделение серым цветом.



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



Шаг 3.
Теперь нужно придать дисплею легкий зеленый оттенок.
Для этого откройте Image>Adjust>Hue/Saturation или просто нажмите Ctrl+U.
Включите флажок Colorize и настройте подходящий цвет.



Шаг 4.
Сейчас ваш экран должен выглядеть как в шаге номер пять.
Теперь добавим немного элементов для экрана.
Выберите Custom Shape Tool.
Установите параметры как на картинке:



Шаг 5.
Создайте новый слой и добавьте несколько треугольников как показано на рисунке.



Шаг 6.
Теперь создадим шкалу баланса.
Создайте на новом слое с помощью Pen Tool одно деление шкалы. После этого удерживая клавишу Alt перетаскивайте это деление до тех пор пока не достигните нужного изображения.



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




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



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



Шаг 10.
А теперь мы добавим "левелметер".
Выделите область где хотите его расположить.
Создайте новый слой.



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



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



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



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



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



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

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

Шаг 1.
Итак, доработаем экран. Загрузите выделение слоя с экраном.



Шаг 2.
Создайте новый слой, на котором мы создадим отражение.



Шаг 3.
Выберите основным цветом - белый. Выберите бело-прозрачный градиент.



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



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



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



Шаг 7.
Примените Filter>Blur>Gaussian Blur со значением равным 2px.
Установите непрозрачность слоя (Opacity) на 60%

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



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



Шаг 10.
Осталось добавить кнопки.
Создайте новый слой.
Создайте значки кнопок.



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



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



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



Шаг 14.
Щелкните на слое с кнопкой два раза. В открывшемся окне стилей установите параметры как на картинке.



Шаг 15.
У вас должна получиться вот такая кнопка:



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



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



Желаю удачи!

Результат переводчика: