- Начинаем, создаем новый документ (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» и мягкой щеткой черного цвета формируют тень, так чтобы это напоминало что оно - физически ниже основной формы:

Итог нашей проделанной работы: