Хайтековский навигационный интерфейс - 10 Сентября 2008 - Шаблоны MOY-WEB и UCOZ , баннеры, скрипты, программы.

» Меню сайта

Разделы сайта

Шаблоны

Скрипты

Статьи

Графика

» Форма входа

»Мoy-weB ver.4.1

» Статистика

Главная » » Хайтековский навигационный интерфейс

Хайтековский навигационный интерфейс	10.Сен.2008 \| 16:23:05
Вот то что мы делаем тут - Начинаем, создаем новый документ (ctrl + n) и устанавливаем размеры 710 x 250рх, с белым фоном. - Создаем прямоугольник и переименовываем этот слой как " base shape " - Делаем новый слой, и размещаем на нем черный круг размером 4949рх. Это закруглит прямой край нашей формы. В screenshot ниже, я понизил непрозрачность моего круга к 50 %, чтобы показать вам, как я разместил его. - Теперь, сделайте черный круг тем же самым цветом как ваш прямоугольник, и слейте его (ctrl + e). - Теперь вы должны иметь один слой названный «base shape», которая выглядит подобной этому: - Загружаем выделение слоя с формой и создаем новый канал, названный " base shape channel ". - Залейте выделение белым цветом, примените к нему gaussian Blur 6 (Filter - Blur - gaussian Blur), после чего снова, но gaussian Blur 3, затем заключительное gaussian Blur 1. - Возвратитесь к палитре слоев, и с основной формой на рабочий слой (cwl) (только щелкните в палитре слоев, чтобы делать его активным cwl), примените Filter-> Render -> Lighting Effects … - Поместите ваш источник света как показано на скриншоте ниже, удостоверьтесь, что в настройке канала стоит - "base shape channel"): - Загружаем выделение основного слоя снова, и создаем новый слой "2-ой lfx". - Заливаем выделение цветом (я использовал #d6d6d6), и сбрасываем выделение. Снова заходим в lighting effects filter при активном слое "2-ой lfx". И прменяем настройки так, чтобы было похоже на металл. - Теперь возвратитесь к освещению, меняем фильтр и устанавливаем настройки как на картинке (все еще использующий "base shape channel" как наш Канал Структуры): Подсказка:Возможно вы должны изменить яркость и контраст "base shape" или «2-ого lfx», если он слишком яркий или темный. Выбираем Image -> Adjustments -> Brightness/Contrast чтобы настроить как нам нужно. Идеально Вы хотите, чтобы это напомнило следующий screenshot. - Изменяем способ наложения слоя «2-ого lfx» на Lighten, и понижаем его непрозрачность к 60 %. В итоге у вас должно получиться как на картинке: - Делаем новый слой выше «2-ого lfx» и называем его "inside shadow". - Загрузить выделение слоя «2-ой lfx» и выбираем stroke размером 1pixel с параметром inside. - Применяем gaussian Blur 1.5, после чего сбрасываем выделение. - Берем eraser tool с мягкой большой щеткой размером 45px стираем левые стороны тени (только основание и правая круглая сторона могут быть в тени): Подсказка: Вы можете думать, что это утомительный шаг, или что это не дает большого эффекта. Просто не забывайте применять его, когда вы делаете интерфейсы большого размера. - Создаем новый слой, называем его " angular shape". С polygonal lasso делаем форму. Это 20321рх. Заполните выделение темным серым цветом, когда вы закончите. - Поместите эту форму как показано в screenshot ниже (увеличено к 300 - Загружаем выделение "angular shape и делать активным слой «2-ой lfx», после чего нажимает Delete. В итоге у вас должно получиться это: - Создаем новый слой, называем его "outside stroke", загружаем выделение «base shape» и применяем Edit -> Stroke 1 пиксел, outside. - Тянем слой с обводкой ниже основного слоя «base shape» в палитре слоев, и понижаем непрозрачность обводки к 50 %. - Создаем новую группу слоев, размещаем ниже наших слоев и называем её «Top Green Bar». - В этой группе слоев, создайте новый слой с названием «rectangle», и сделайте прямоугольное выделение (приблизительно 21020рх), и разместите его, как показано ниже: - Заполнить наше выделение светло-зеленым цветом, я использовал #7cae33, и сбросьте выделение. В итоге у вас должно получиться нечто подобное: - Создаем новый слой и называем "shadow". Мы собираемся сделать градиент от черного к прозрачному в середине зеленого прямоугольника. - Делаем прямоугольное выделение как на картинке: - Теперь выбираем gradient tool от черного к прозрачному, и заливаем как показано на рисунке (увеличено к 200 %): - Теперь понизите непрозрачность этого слоя приблизительно к 40 %. - Создайте новый слой, назовите " subtle lines ", и нарисуйте белые линии размером 1рх, примерно на одинаковом расстоянии в 4 рх, делайте до тех пор, пока не получиться нечто похожее: - Понизите непрозрачность слоя с линиями к 10 %. - Создаем новый слой и называем его "stroke" и нарисуйте черную линию размеров в 1рх параллельно земле и понизите прозрачность до 80% Создание Экрана* - Сделайте новый набор слоев и назовите "Screen". - Создайте новый слой в этом наборе с названием "Screen". - При помощи polygonal lasso tool сделайте выделение как показано на картинке ниже. Но не заполняйте его цветом. Я это сделал только для демонстрации. - Теперь переходим к нашей палитре каналов, и делаем новый канал с названием "Screen". - заливаем наше выделение белым цветом. Сбросьте выделение и примените к нему gaussian Blur приблизительно 3 или 4, и затем откройте окно уровней (ctrl + L) и переместите ползунки к центру, пока пятно не станет четким. - Загружаем выделение канала и затем возвращаемся к нашему слою «Screen», и заливаем его темно-серым цветом, - Теперь идем в Layer -> Style -> Inner Shadow, и примените настройки для всех параметров: Inner Shadow Bevel and Emboss Gradient Overlay Satin Stroke - В итоге у вас должно получитсья: - Теперь добавьте слой " highlight " и загрузите выделение слоя «screen». - Сжимаем выделение на 2рх, и затем удерживая клавишу Alt убираем половину выделения, как показано на рисунке: - Теперь применяем белый к прозрачному градиенту к нашему выделению, после чего сбросьте выделение и понизьте непрозрачность слоя к 80%. У вас должно получиться нечто такое: Теперь мы создадим главную часть, которая будет располагаться выше экрана. - Создаем новый набор слоев, называем его "Top Gray Area". Размещаем его выше всех наборов в палитре слоев. - Делаем новый слой и называем "shape". - С помощью polygonal lasso tool (L), делайте форму похожую на это (угол - 45 градусов.) - Shift + ctrl + alt + щелчок на «base Shape» в палитре слоев, чтобы пересечь выбор с основной формой. После чего ctrl + alt + щелчок на слое «Screen», который находится в наборе слоя «Screen». Это вычтет часть «base Shape» и станет равномерно с вершиной экрана: - Заполнить выделение серым цветом 565656, и сбросьте выделение. - Дублируйте этот слой и выбираем Edit - Transform - Flip Horizontal. - С помощью move tool (V) выстройте форму вровень с дублированным слоем так, чтобы они сливались воедино: - Смените способ наложения слоя на «Linear Light» и понизите непрозрачность к 40 %. - И так, создайте некоторые вставки на отдаленных частях, с непрозрачностью 50 %. Темных вставки - черные линии с 60%-ой непрозрачностью: - Создайте новый набор слоев в пределах "Top Gray Area" и назовите его "Top Left Button". - В этом новом наборе, сделайте слой с названием "inset" и при помощи polygonal lasso tool сделайте выделение как показано ниже: - Войдите в нашу палитру каналов, и создать новый канал с названием "button rounded". - Заполните выделение белым цветом и сбросьте выделение. - Закруглите края нашей фигуры, как мы это уже делали несколькими абзацами выше. - Возвратитесь к вашей палитре слоев, и залейте градиентом: - Загрузить выделение слоя «inset» и сделайте новый слой с названием "button". - Сожмите выделение на 1рх (Select - Modify - Contract) и затем применяем градиент от светлого к темному: - Делаем новый слой и называем «hlight», применяем на нем белый к прозрачному градиент, который равняется приблизительно половине высоты кнопки: - Создаем новый слой и называем «stroke», и загружаем выделение слоя "button". Примените stroke с параметрами: черный цвет, 1рх, inside, после чего сбросьте выделение. Теперь дублируйте этот набор слоев и поверните его горизонтально, после чего установите его на противоположной стороне. - Создаем новый набор слоя, и называем его «Mid Area Inset». - Загружаем выделение слоя «base Shape» и сжимаем его на 9рх. - теперь при помощи elliptical marquee tool вычтите выделение, как показано на рисунке: - Как только вы это сделаете, повторим наши действия, когда вы закругляли края нашего выделения при помощи каналов. - Загрузите выделение канала, и вернитесь к нашей палитре слоев. Создайте новый слой и назовите «shape». Залейте выделение серым цветом #a4a4a4. У вас должно получиться нечто похожее: - Применить следующие стили слоя (Layer - Layer Style...) к этому слою: Bevel and Emboss* Satin Stroke Вы должны получить нечто похожее: - Делаем овально выделение с помощью elliptical seelction tool, как показано ниже: - Создаем новый слой и называем «wire», и выбираем светло-серый цвет как ваш передний план. - После чего применяем к нему Stroke с параметрами 7рх и устанавливаем center: - Чтобы сделать провод 3D, я загрузил выделение этого слоя, сделал канал, заполнил его белым, и сбросил выделение. После чего применил к нему gaussian blur1,5. Потом я использовал lighting effects Filter с этим каналом, чтобы получился желаемый эффект. - Загрузите выделение «shape», и сожмите выделение на 1рх (Select - Modify - Contract) и нажмите shift + ctrl + I, чтобы инвертировать выделение. - Удостоверьтесь что активным слоем является «wire», и нажмите Delete. Это удалит часть провода, который является вне формы: - Теперь примените к проводу stroke с параметрами: 1рх, черный цвет, outside stroke(на его собственном слое), и понизите непрозрачность к 70 %. - Теперь вы можете добавить тонкую тень к проводу, и добавить внутреннюю тень к обеим сторонам формы: Right Shadow Area - Делаем новый набор слоя, и называем его «Right Shadow Area». - Делаем новый слой и называем «inner shadow». Делаем черный округленный прямоугольник (с радиусом 4рх), который по размерам 13329рх: - Выбираем rounded rectangle и создаем новый канал и называем inner shadow rounded rectangle, поскольку мы будем нуждаться в этом еще в нескольких шагах. - Делаем новый слой ниже «inner shadow», и называем его «gradient». - Загружаем выделение «inner shadow» и заливаем выделение градиентом от черного к прозрачному. - Загружаем выделение (inner shadow layer) и сжимает его на 3рх. После чего удаляем и сбрасываем выделение. У вас должно получиться нечто похожее (градиент скрыт на этом скриншоте): - Применяем к слою gaussian Blur 2, и затем стираем основание мягкой щеткой с непрозрачностью 30 %. Отпуск только немного в основании: (слой градиента скрыт) - Делаем новый слой, не называем его никак. Загружаем канал «rectangle inner shadow». Примените к выделению stroke с параметрами: 1рх, белый цвет, inside. - Загрузите выделение этого слоя и создайте новый слой с названием «subtle hlight». - Выберите градиент от белого к прозрачному, и с помощью маски слоя удалите часть, подобному этому: - Понизите непрозрачность к 40 %. Right Orbs* - Делаем новый набор слоя с именем «Right Orbs». - Делаем новый слой с названием «orb base». Сделайте два серых круга размером 1717рх, и разместите их подобно этому: - Добавьте еще два круга и сделайте выделение, как показано на картинке ниже: - Нажимаем shift + alt и щелкаем на слое «orb base». Это вычтет два черных круга из выделения. После чего залейте ваше выделение тем же самым цветом, в итоге у вас должно получиться нечто похожее: - Добавить следующие стили слоя к этому слою. Bevel and Emboss* Gradient Overlay Это результат: - Создаем новый слой и называем его «inner stroke». Загружаем выделение слоя «orb base» и применяем stroke с параметрами: 1рх, черный цвет, inner. Понизите его непрозрачность к 40 %. - Сделайте новый слой с название «top orb» и сделайте два зеленых шара размером 1212рх и зальем их цветом #2a8517: - Теперь добавьте следующие стили слоя к «top orb». Inner Shadow* Stroke - В итоге у вас должно получиться нечто похожее: - Создаем новый слой и называем его «top orb top hlight». Теперь загружаем выделение слоя «top orb» и сжимает его на 1рх. - После чего, при помощи elliptical marquee tool убираем часть выделения, как показано на рисунке: - Заливаем наше выделение градиентом от белого к прозрачному: - Сделать ту же самую вещь с «top orb bot hlight»: - «top orb bot hlight» и «top orb». Дублируем эти слои и размещаем так как нам будет удобно: - Теперь вы можете добавить некоторый текст или художественные оформления. Я добавил «+» и «-». Bot Area - Делаем новый набор слоя с именем «Bot Area». - Создаем новый слой и называем его «shape» и выбираем polygonal lasso tool. - Меняем масштаб на 200% и делаем выделение как, показано на картинке: - Делаем новый канал, и заливаем выделение белым цветом. - Закругляем края, как мы делали уже не раз. Я использовал gaussian Blur 4. - Загружаем выделение этого канала и переходим к нашим слоям. shift + ctrl + alt, и нажимает на слой «base Shape». Заполните получившееся выделение темно-серым цветом (#444444): - Применяем inner shadow к этому слою: - Делаем новый слой и называем «subtle hlight», и загружаем выделение «shape». Инвертируем выделение shift + ctrl +I. - Выберете щетку с белыми краями размером приблизительно 13рх в диаметре, и проведите щеткой по верхнему краю слоя: (я скрыл выделение, чтобы вы могли видеть это лучше) - Понижаем непрозрачность к 65 %. Bot Slide Out - Создайте новый набор слоя, вне Bot Slide Out один вызванный «Bot Slide Out». - Делаем новый слой в пределах этого набора, и назвать его «shape». - Создать угловую форму с помощью polygonal lasso tool, подобно этому: (запомните положение фигуры и не заполняйте ее цветом, я только сделал это для примера) - Создайте новый канал и заполнить выделение белым цветом. Закруглите края фигуры, как мы делали это раньше. - Загружаем выделение канала, и переходим обратно к нашему слою. Заполните это выделение серым цветом: - Примените к слою следующие стили: Bevel and Emboss Stroke - У вас должно получиться такое: - Щелкаем правой кнопкой мыши на слое и выбираем «Create Layers». Это позволит создать слой, основанный на стилях выбранного нами слоя. - Теперь загружаем выделение основного слоя, после чего нажимаем ctrl + alt + щелкаем на слое shape, который в наборе слоя «Bot Area». Это вычтет выделение из основного слоя. Вы должны получить это: - Теперь, с активным shape's Inner Bevel Shadows сделайте тоже самое, после чего примените для : shape's Inner Bevel Highlights, shape, shape's outer stroke. Это удаляет дополнительную часть, в которой мы не нуждаемся. - Теперь, выберите эти четыре слоя, и переместите их вниз на 3рх: - Делаем новый слой и размещаем его выше формы «Inner Bevel Shadows». Назовите его «hlight». - Загружаем выделение «Shape», после чего сжимает его на 1рх, и применяем к нему stroke с параметрами: 1рх, белый цвет, inner. - Сбрасываем выделение и применяем gaussian Blur 1рх. Понизите непрозрачность к 50 %. - Теперь сотрите верхнюю и левую часть того слоя. Не стесняйтесь добавлять тонкую тень: - Я добавил ползунок и кнопку к этому набору слоя. - Создаем новый набор слоя с именем «Left Area». - Создайте новый слой с названием «inset shape. - С помощью polygonal lasso tool создайте выделение подобно этому: - Делаем новый канал и заполняем выделение белым цветом. Сбросьте выделение и округлите наши края, как мы делали это раньше. - Загружаем выделение нового канала и нажимаем shift + ctrl + alt + щелкаем на «base Shape». Возвращаемся к нашему слою «inset shape» и заполняем выделение #595959 серыми цветами: - Применяем inner shadow layer style для нашего слоя: - Делаем новый слой и называем «subtle hlight». - Загружаем выделение «inset shape» и применяем к нему stroke с параметрами: 1рх, белый цвет, center. Сбрасываем выделениеи смещает слой на 1 рх вниз вправо - Мягкой, небольшой щеткой размером 21рх, сотрите верхнюю и левую часть обводки, и понизите непрозрачность к 50 %: - После чего создайте новый слой с названием «shape». - При помощи rounded rectangle tool радиусом 10pixels, делайте округленный прямоугольник, размером 9340рх с серым цветом (#c8c8c8) и разместить это в приблизительно то же самое положение: - Примените следующие стиля для. Bevel and Emboss* Stroke - В итоге у вас должно получиться нечто подобное: - Щелкаем правой кнопкой мыши на слое и выбираем «Create Layers». - Теперь загружаем выделение слоя «base Shape», и нажимаем ctrl + alt + щелкаем на слое «inset Shape», который является в пределах слоя «Left Area». Это вычтет выделение «inset Shape» из «base Shape». - Щелкаем на одном из недавно созданных слоев, и нажимает Delete. Повторите это действие для других слоев: - Делаем новый слой и называем «drop shadow». - Загружаем выделение слоя «inset Shape», который находится в «Left Area» и мягкой щеткой черного цвета формируют тень, так чтобы это напоминало что оно - физически ниже основной формы: Итог нашей проделанной работы: Автор: Sincerely Перевод: Француз
Категория: Уроки фотошоп \| Просмотров: 811 \| Добавил: CorsaR

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