Суббота, 28.01.2023, 22:20


Главная
Онлайн уроки Регистрация ВходРеклама у нас / ПОМОЧЬ ПРОЕКТУ
Приветствую Вас, Новичок · RSS
Меню сайта
доска почета

brettnz69
Файлов:
8414

zyzy
Файлов:
2481

didl3
Файлов:
1056

NIKIG
Файлов:
1007
статистика
Онлайн всего: 2
Гостей: 1
Пользователей: 1

Сегодня были:
wallacetq3, brettnz69

 Каталог статей
Обучающие уроки » Статьи » Онлайн уроки Photoshop


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

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

Желаю удачи!

Результат переводчика:
Интерфейс плеера *

Смотрите также:


Категория: Онлайн уроки Photoshop | Добавил: GOR (13.01.2012)
Просмотров: 1164 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email:
Код *:
Copyright BENO Corp © 2023
кабинет
Суббота
28.01.2023
22:20

Требуются файловики за плату
Логин:
Пароль:
Пользователей: 47487 Зарегистрируйтесь чтобы убрать рекламу
Предлагаем:
БЕСПЛАТНОЕ РАЗМЕЩЕНИЕ ВАШИХ СТАТЕЙ С ВЕЧНЫМИ ССЫЛКАМИ!
Онлайн уроки
Метод быстрого скетча
Рисуем водяную лилию
Твики реестра Windows 7 - добавление
Рисуем шоколадный череп
Создаем ангельские крылья
Рисуем реалистичные значки
Корректируем цвет и контраст изображения, обработка фотографии
Создаем спецэффект разбитой мозаики
Учимся обводить эскиз
Установка Windows 7 с USB флешки, добавление новых языков в Windows 7
НОВЫЕ КОММЕНТАРИИ
Учимся создавать собственный форум Young Heaven - Naked Teens & Young Porn Pict

Учимся создавать собственный форум My new hot project|enjoy new website
Учимся создавать собственный форум Dirty Porn Photos, daily updated galleries <

Учимся создавать собственный форум My new hot project|enjoy new website
Учимся создавать собственный форум Scandal porn galleries, daily updated lists

Учимся создавать собственный форум My new hot project|enjoy new website
Учимся создавать собственный форум Big Ass Photos - Free Huge Butt Porn, Big Bo

Учимся создавать собственный форум Sexy pictures each day
http://bomdage

Учимся создавать собственный форум Nude Sex Pics, Sexy Naked Women, Hot Girls P

Учимся создавать собственный форум New hot project galleries, daily updates
Учимся создавать собственный форум Hot sexy porn projects, daily updates


Учимся создавать собственный форум Browse over 500 000 of the best porn galleri




Любая публикация опубликованная на софт портале предоставлена только для ознакомления и является авторским материалом. Администрация не несет никакой отвественности за размещенные новости, программы, статьи и ущерб не оплачивает. Копирование без авторского разрешения уголовно наказуемо законодательством РФ и Украины: "Об авторском и смежном праве". Если вы берете новость с сайта то вы обязаны поставить активную ссылку!
Карта сайта