Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2011 » Январь » 11 » Интерфейс плеера
17:32
Интерфейс плеера

Интерфейс плеера

Интерфейс плеера \ The player 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.
Вот мы и создали довольно реалистичный плеер. При помощи этого урока вы можете создавать реалистичный интерфейс для различных программ, приложений, веб-сайтов и т.д.
У вас должно получиться вот такое изображение:

Интерфейс плеера *

Желаю удачи!



Автор:Colin Smith

Переводчик:Medvejonok

***






9mm в голову
кто скупает запчасти?
Angelina кто она?
Вот они Англичане
Безопасны круизы?










изящный хищник
Ёжики монстры
Что тварят бабули
новая бэха
что за прибор?


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[02.04.2019][Lessons PHOTOSHOP]
Создаём сырный текст в Adobe Photoshop (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[13.02.2015][Plugins Photoshop]
AKVIS AirBrush 2.5.300.11214 (x86/x64) (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[22.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Beauty (0)
[22.10.2015][Lessons PHOTOSHOP]
Мастер-класс photoshop Oil Retouch (0)
[18.11.2015][Brushes Photoshop]
Rons Deviney Cyborg Circuitry 75 Brushes (0)
[19.11.2015][Lessons PHOTOSHOP]
Повышение практики мастерства в фотошоп (2015) (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[12.02.2015][video futage]
Awards Pack II - Project for After Effects (Videohive) (0)
[19.11.2015][Lessons PHOTOSHOP]
Ретушь и цветокоррекция от Гавра (2015) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Womans Retouch (2015) (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[12.02.2015][rastER KLipardy]
Фото младенцев \ Newborns, 25 x JPG (0)
[12.02.2015][vectOR KLipardy]
Цветные абстрактные фоны в векторе 9 (0)
[12.02.2015][DesiGN SofT]
GraphiSoft ArchiCAD 18 Build 4020 (x64) + Add-Ons (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
 

Прикрепления:
Категория: Lessons PHOTOSHOP | Просмотров: 1382 | Добавил: kzd | Теги: интерфейс плеера, Photoshop Кнопки плеера, реалистичность, интерфейсы плееров, интерфейс, созда, скин на плеер в фотошопе, фотошоп нижняя полоса плеер
Всего комментариев: 2
2 BARBARISSka   [Материал]
вот это истенно классно, интерфейс распрастранённая ситуация в веб проектировании

1 zanchi   [Материал]
занимательный урок, что не говори

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск






[07.04.2013][Veb DeSiGn]
Множество примочек для системы UCOZ \ Vol6 (0)
[13.04.2011][rastER KLipardy]
Easter - UHQ Stock Photo | Пасха (0)
[28.09.2011][PSD-files, исходники]
Шаблон digital world PSD825 (1)
[29.09.2011][Brushes Photoshop]
Кисть Длина волны (0)
[19.11.2015][Lessons PHOTOSHOP]
Повышение практики мастерства в фотошоп (2015) (0)
[18.09.2011][Lessons Adobe Illustrator]
Создаем иллюстрацию забавного зайца (0)
[23.10.2010][rastER KLipardy]
Stock Photo: Group of business people (0)
[13.02.2015][Plugins Photoshop]
AKVIS Sketch 16.0.2853.11126 (x86/x64) (0)
[20.12.2015][DesiGN SofT]
Smith Micro Poser Pro 11.0.1.31230 (0)
[27.09.2011][PSD-files, исходники]
Шаблон сайта PSD985 (0)

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Среда
02.12.2020
00:47


Copyright artpost and semantic product zanchi 2010-2011 © 2020