действие1 | выбор изображения
для своего примера я выбрал фотографию из собственного архива.
желательно за основу брать изображение высокого разрешения, содержащие несколько цветов. желательно ярких.

действие2 | работа с изображением
- создаём новый слой. заливаем его чёрным цветом. он должен находиться под слоем с изображением.
- выполним действие: Filter -> Blur -> Motion Blur | Angle: 35; Distance: 999px.
- если результат не удовлетворил потребности, повторите предыдущее действие: Ctrl + F.
- я воспользовался фильтром ReDynaMix в режиме Ultra-Contrast с определёнными настройками.
- далее, необходимо добавить яркость и контрастность: Image -> Adjustments -> Brightness/Contrast... | Brightness: +40; Contrast: +100.
- советую выделить некоторые цвета, сделать их ярче: Image -> Adjustments -> Selective Color...

шаг2 | окно
о шаге: в данном шаге мы создадим окно.

действие1 | начало
я создал новый документ необходимого для меня размера, изображение, полученное в первом шаге, объеденил с чёрным фоном и уменьшил до нужных мне размеров.
буду работать с документом 800х600px.

действие2 | стекло
- создайте новый слой под слоем background. залейте его чёрным цветом.
- создайте новый слой над слоем background с нашим фоном. выберите инструмент Rectangular Marquee Tool. сделайте прямоугольное выделение размером 600х400рх. для этого необходимо выбрать режим Fixed Size.
- данное выделение залейте чёрным цветом. назовите слой window. примените следующие настройки слоя:
- разместите прямоугольник по центру. это в принципе важно.
- зажмите клавишу Ctrl и нажмите левой кнопкой мыши на превью-картинке слоя прямоугольника в палитре слоёв. у вас должно получиться прямоугольное выделение.
- не снимая выделения, выберите слой background и нажмите сочетание клавиш Ctrl + J, что должно создать новый слой с прямоугольным куском фона. назовите его window_background и поместите под слой window.
- необходимо выполнить размытие по Гауссу: Filter -> Blur -> Gaussian Blur...
| для слоя backround: Radius: 4-7px // по вкусу:)
| для слоя window: Radius: 50px

шаг3 | кнопки и финиш
о шаге: всё просто. мы сделаем кнопочки с разделителями. подкорректируем фон.

действие1 | основание
- выберите инструмент Rectangular Marquee Tool. сделайте прямоугольное выделение 600х40рх. залейте белым цветом. разместите также, как и слой window - по центру.
- назовите слой buttons. разместите его выше всех. примените следующие настройки слоя:
- разместите их в том месте, где считаете нужным.
- любым удобным способом сделайте горизонтальную линию. разместите её как показано на рисунке. слой назовите horizont_line. разместите выше всех слоёв в палитре.

действие2 | разделитель
- создайте новый слой. назовите его separator1. разместите его выше всех в палитре слоёв.
- создайте выделение размером 1х40рх. залейте белым цветом. примените настройки слоя аналогичные тем, что мы использовали для создания слоя buttons, за одним исключением. параметр Fill Opacity: 100%.
- примените маску слоя. залейте градиентом от чёрного к белому по вертикали. примените настройки слоя:
- продублируйте слой. установите параметр Fill на 50%; Opacity на 80%.

действие3 | коррекция фона
- выберите фон background. примените маску слоя. залейте градиентом от чёрного к белому к чёрному.
- сделайте выделение слоя window. проследуйте путём: Select -> Inverse.
- перейдите на слой window_background. нажмите delete на своей клавиатуре.
- выполните иные действия по вкусу:)

__

окно готово:)
в следующих шагах мы будем делать из данного шаблона небольшую html страничку.
спасибо за внимание:)
автор урока jupiter.sl | s.berezyuk aka line
помощь | Matias
*туториал предназначен для опытных пользователей photoshop