
*Для этого урока я использовал одну не стандартную кисть, при желании ее можно скачать здесь.
Шаг 1.
Создаем новый документ (Ctrl+N) 1000х800px.
Заливаем фон черным цветом.
Далее включаем отображение линеек (если не включены) “View > Rulers (Ctrl+R)”.
Берем инструмент Move Tool (V)
, зажимаем курсор на левой линейке и вытягиваем две направляющие, разместите одну на 100px, вторую на 900px.
Далее берем инструмент Rectangle Tool (U)
и создаем прямоугольник любого цвета (можно назвать ее “Body”):

Шаг 2.
Выполняем для этого слоя “Layer > Layer Style > Blending Options” и настраиваем по картинкам:



Шаг 3.
Создаем новый слой (Shift+Ctrl+N), берем инструмент Elliptical Marquee Tool (M)
и создаем выделение как на скриншоте:

Шаг 4.
Далее зажимаем Shift+Alt+Ctrl и в окне слоев щелкаем по иконке слоя “Body”. Останется только то выделение, которое находилось на “Body”:

Шаг 5.
Берем инструмент Paint Bucket Tool (G)
и заливаем выделение любым цветом, выполняем “Layer > Layer Style > Blending Options” и настраиваем по картинкам (выделение не снимайте):



Шаг 6.
Создаем новый слой.
Берем инструмент Magic Wand Tool (W)
, зажимаем Shift и шесть раз нажимаем на стрелку вверх (на клавиатуре). Далее берем инструмент Gradient Tool (G)
, тип “Linear Gradient”, выставляем белый цвет и выбираем градиент от белого к прозрачному. Применяем градиент как на рисунке:

Шаг 7.
Меняем режим наложения слоя на “Overlay”, выставляем “Opacity:50%” и нажимаем Ctrl+D для снятия выделения:

Шаг 8.
Создаем новый слой.
Берем инструмент Brush Tool (B)
, выбираем загруженную кисть и используя белый цвет добавляем узор. Меняем режим наложения для слоя на “Overlay” и добавляем внешнего свечения (Layer > Layer Style > Blending Options – Outer Glow):


Шаг 9.
Берем инструмент Horizontal Type Tool (T)
и добавляем текст ссылок (я использовал шрифт “Visitor TT2 BRK”):

Шаг 10.
Далее добавим стиль для слоев с текстом (Layer > Layer Style > Blending Options). Для того, что бы не мучиться с настройками для каждого слоя, после настройки первого слоя щелкните по нему правой кнопкой мыши и выберите “Copy Layer Style”, потом правой кнопкой щелкните по слою без стиля и выберите “Paste Layer Style”:




Шаг 11.
Добавим в шапку сайта логотип и название (для логотипа я использовал стандартную форму сделанную инструментом Custom Shape Tool (U)
):

Шаг 12.
Добавим этим слоям стиль:



Шаг 13.
Временно свернем этот документ и создадим новый, размером 8x20px с прозрачным фоном.
Используя инструмент Pencil Tool (B)
и белый цвет создайте узор как на рисунке (я специально показываю вам два рисунка, что бы лучше было видно, у вас должен быть один на прозрачном фоне). После того как нарисовали, выполняем “Edit > Define Pattern” и закрываем этот документ:

Шаг 14.
Вернувшись к нашему основному документу, берем инструмент Rectangular Marquee Tool (M)
, на панели “Options” выставляем “Style: Fixed size”, “8x800px” и создаем выделение у левого края документа.
Создаем новый слой, берем инструмент Paint Bucket Tool (G)
, выставляем для него режим “Pattern” и заливаем выделение нашим узором:

Шаг 15.
Нажимаем Ctrl+D для снятия выделения, берем инструмент Move Tool (V)
и переносим этот узор к левой направляющей. После этого выполняем “Layer > Duplicate Layer”, потом “Edit > Transform > Flip Horizontal” и переносим эту копию к правой направляющей. Меняем режим наложения для обоих слоев на “Overlay”:

Шаг 16.
Вытягиваем из линеек еще две вертикальные направляющие, размещаем их на 120px и на 880px. Так же добавим одну горизонтальную направляющую на 250px.
Берем инструмент Rounded Rectangle Tool (U)
, выставляем радиус 10px и с зажатой клавишей Shift создаем прямоугольник (только сначала начинаем создание, а потом нажимаем Shift, для получения равностороннего прямоугольника):

Шаг 17.
Настроим стиль для этого слоя:




Шаг 18.
Зажимаем Ctrl и в окне слоев щелкаем по этой форме для загрузки выделения.
Берем инструмент Rectangular Marquee Tool (M)
, зажимаем Alt и выделяем нижнюю часть уже существующего выделения, для ее вычитания. Создайте новый слой и залейте выделение любым цветом (само выделение не снимайте):

Шаг 19.
Стиль для этого слоя мы скопируем у слоя шапки (который мы настраивали в шаге №5), но без тени (Drop Shadow):

Шаг 20.
Создаем новый слой и используя загруженную кисть, добавляем узор белого цвета. Меняем режим наложения для слоя на “Overlay” и нажимаем Ctrl+D для снятия выделения:

Шаг 21.
Берем инструмент Line Tool (U)
толщиной 1px и рисуем белую линию (при создании линии держите Shift):

Шаг 22.
Теперь берем инструмент Move Tool (V)
зажимаем Alt+Shift и один раз нажимаем на клавишу стрелка вниз, отпускаем Alt (Shift по-прежнему зажат) и еще два раза нажимаем стрелку вниз. Повторите это действие еще несколько раз и для получившихся слоев поменяйте режим наложения на “Overlay” и “Opacity: 50-60%” (слои можно объединить):

Шаг 23.
Сдублировав слои созданные с 16 по 22 шаг, я сделал второе такое окно:

Шаг 24.
Далее повторив шаги 16 – 21 создайте большую форму в левой части окна (в 16 шаге Shift держать не нужно. Так же помните, что стили слоя можно просто копировать, а не настраивать каждый раз заново):

Шаг 25.
Добавим блики на окна.
Для этого создадим новый слой над слоями левого окна, возьмем инструмент Elliptical Marquee Tool (M)
и создадим выделение как показано ниже:

Шаг 26.
Зажимаем Shift+Ctrl+Alt и в окне слоев щелкаем по иконке слоя с нашей формой окна. Останется только та часть выделения, которая находилась на этой форме. Далее берем инструмент Gradient Tool (G)
, тип “Linear Gradient”, выбираем от белого к прозрачному и создаем как на картинке:

Шаг 27.
Меняем режим наложения для этого слоя на “Overlay” и выставляем “Opacity: 40%”:

Шаг 28.
Таким же методом можно создать блики на боковых окнах, для этого даже не обязательно создавать новый слой:

Шаг 29.
Берем инструмент Rounded Rectangle Tool (U)
и создаем форму в нижней части окна (подвал). Копируем для этого слоя стиль от шапки:

Шаг 30.
Создаем новый слой.
Зажимаем Ctrl, щелкаем по иконке этого слоя, для загрузки выделения. Инструментом Rectangular Marquee Tool (M)
убираем нижнюю часть выделения и уже по старой схеме, используя градиент, создаем блик. Меняем режим наложения на “Overlay”, “Opacity:50%”:

Ну вот и все, основная часть шаблона готова, вам останется только наполнить его содержимым:

Автор урока: SandWicH



