- Начинаем, создаем новый документ (ctrl + n) и устанавливаем размеры 710 x 250рх, с белым фоном.
- Создаем прямоугольник и переименовываем этот слой как " base shape "
-
Делаем новый слой, и размещаем на нем черный круг размером 49*49рх. Это
закруглит прямой край нашей формы. В 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 делаем форму. Это 203*21рх. Заполните
выделение темным серым цветом, когда вы закончите.
- Поместите эту форму как показано в screenshot ниже (увеличено к 300 %)
-
Загружаем выделение "angular shape и делать активным слой «2-ой lfx»,
после чего нажимает Delete. В итоге у вас должно получиться это:
-
Создаем новый слой, называем его "outside stroke", загружаем выделение
«base shape» и применяем Edit -> Stroke 1 пиксел, outside.
- Тянем слой с обводкой ниже основного слоя «base shape» в палитре слоев, и понижаем непрозрачность обводки к 50 %.
- Создаем новую группу слоев, размещаем ниже наших слоев и называем её «Top Green Bar».
-
В этой группе слоев, создайте новый слой с названием «rectangle», и
сделайте прямоугольное выделение (приблизительно 210*20рх), и
разместите его, как показано ниже:
-
Заполнить наше выделение светло-зеленым цветом, я использовал #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рх), который по размерам 133*29рх:
-
Выбираем 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». Сделайте два серых круга размером 17*17рх, и разместите их подобно этому:
- Добавьте еще два круга и сделайте выделение, как показано на картинке ниже:
-
Нажимаем shift + alt и щелкаем на слое «orb base». Это вычтет два
черных круга из выделения. После чего залейте ваше выделение тем же
самым цветом, в итоге у вас должно получиться нечто похожее:
- Добавить следующие стили слоя к этому слою.
Bevel and Emboss
Gradient Overlay
Это результат:
-
Создаем новый слой и называем его «inner stroke». Загружаем выделение
слоя «orb base» и применяем stroke с параметрами: 1рх, черный цвет,
inner. Понизите его непрозрачность к 40 %.
- Сделайте новый слой с название «top orb» и сделайте два зеленых шара размером 12*12рх и зальем их цветом #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, делайте
округленный прямоугольник, размером 93*40рх с серым цветом (#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»
и мягкой щеткой черного цвета формируют тень, так чтобы это напоминало
что оно - физически ниже основной формы:
