Перед вами проект блога в тёмных цветовых тонах, которые сейчас набирают всё большую популярность.
Всего пару ярких деталей на тёмном фоне, которые складываем с вашим воображением - и у вас в руках отличный дизайн, который можно использовать для личного блога.

Что может привлечь внимание гостей вашего веб-сайта или блога?

Проанализируем итог нашего урока. Как видим, самая яркая и привлекательная часть сайта - это навигация и надпись в шапке.
Далее наше внимание перебирается на логотип сайта в верхнем правом углу страницы. Объясняется это просто: изучая сайт и его содержимое мы сразу видим название ресурса вместе с описанием, а так как логотип находится рядом - невольно замечаем и его.
Подавляющее большинство людей оценивают сайт в первые секунды посещения. Чтобы задержать гостя вашего сайта подольше, очень важно, чтобы он в первые секунды посещения увидел достаточно для того, чтобы не закрыть вкладку в браузере.

Что может привлекать внимание? Как один из вариантов - названия и заголовки новостей. Они сразу сообщают посетителю направленность и содержимое вашего сайта.


Шаг 1.
Теперь, когда мы поняли, чем собираемся заниматься, можем перейти к осуществлению задуманного.

Для начала необходимо создать пустой документ размером в 1024\1200 пикселей в ширину\высоту. Основное содержание расположим в центре, выделив ему 800px. Выбранная заведомо большая ширина документа сможет показать нам, как будет выглядеть задуманное на широкоэкранных мониторах.
Теперь выполним заливку фона черным цветом.


Шаг 2.
Придадим фону эффект глубины, добавив градиент и обводку. Воспользуемся инструментом Область - Прямоугольная строка(для англ. версий Single Row Marquee Tool) и выделим 400px от вершины документа. Зальём выделенное цветом(#1b1b1b).

Выставим основной цвет(#0d0d0d).

Выделим прямоугольник с шириной 1024px и высотой 20px. Применим инструмент линейный градиент от основного цвета к прозрачному. Создание градиента начнём вверху выделения и закончим снизу.



Шаг 3.
Начнём создание шапки проекта, место для неё мы уже наметили, теперь придадим ей соответствующий вид.

Выделим и заполним черным 800px в ширину и 225px в высоту. Сделаем обводку с внутренней части, толщиной в 1px, с цветом (#0a0a0a).Проверьте, активна ли Линейка(Cntl+R). Воспользовавшись линейкой, установим направляющую на 512px.
Задача направляющей - определять центр шапки. Для выравнивания заголовка перетащим хедер туда, где его центр и направляющая совпадут.

Применим внешнее свечение к нашему хедеру. В стиле слоя находим раздел Внешнее свечение и там выставляем следующие настройки:Цвет - чёрный, Прозрачность - 50%, Размер - 29px, Размах - 0%, Режим - нормальный. Поначалу мы не заметим никакого эффекта, но когда будет присутствовать графика, мы увидим как тени отбрасываются на неё.


Шаг 4.
Выделим прямоугольник шириной в 800px и с высотой хедера. Зальём выделенное чёрным и выполним внутреннюю обводку(Стиль слоя - обводка) с цветом (#0a0a0a). Сместим выделение на 1px, чтобы оно было сверху заголовка.

Чтобы избежать набрасывание тени хедером на слой с центральной частью обязательно убедитесь, что он находится выше. Сделаем полосу в 10px, зальём её градиентом от (#0a0a0a) до прозрачного. Применим Стиль слоя - обводка.

Выполним группировку слоёв. Создадим группу "главная" и в неё поместим слой с хедером и с центральной частью. Создадим также группу фон, в которую внесём все остальные слои.


Шаг 5.
Создадим группу "Behind_header". Разместим её между двумя существующими. После создания нового слоя в ней, выберем в панели инструментов Прямолинейное Лассо.

Повыделяем треугольные области, будущие лучи света, зальём их цветом (#151515). Данный приём сможет удержать внимание гостя сайта на хедере. Лучи должны быть за за хедером. Для того, чтобы не делать лишнюю работу, просто нарисуем лучи для одной из сторон, а затем дублируем этот слой и отразим по горизонтали. Для этого в типах трансформации выберем Отразить по горизонтали.

Выставим основной цвет белым, а второстепенный чёрным. Для эффекта лучей воспользуемся радиальным градиентом, выходящем из центра луча к внешней стороне.


Шаг 6.
В создании эмблемы в виде сердца нам помогут несколько кистей, которые можно найти здесь.
Приступим к созданию яркой и красочной графики. Выбрав цвет и кисть, рисуем то, что нам нужно на слое. Теперь создадим ещё один слой выше\ниже предыдущего, в зависимости от того, что мы хотим видеть на сверху. Выставляем новый цвет и меняем кисть. Этот процесс можно продолжить, в зависимости от того, сколько разных изображений мы планируем. Главное здесь, чтр каждое изображение должно быть на новом слое.

Дальше, по вашему желанию , можете менять прозрачность и стили слоёв. Если при создании изображения, часть его закрыла важную часть хедера, удалите ненужное или воспользуйтесь маской.



Шаг 7.
Посмотрим на то, что имеем на данный момент. Итак, это фон, залитый градиентом, который даёт проекту эффект глубины. Есть также основная часть и хедер с внешней тенью. Имеется несколько изображений вместе с логотипом. Они делают наш проект уникальным.

Элементы, в которых мы пока ещё нуждаемся - навигация, названия и описания, внутренний контент, нижние ссылки.


Шаг 8.
Перейдём к работе непосредственно над хедером. Создадим новую группу с названием "InHeader" и поместим её выше слоя с основной частью. Дублируем всё то, что мы сделали раннее в верхних левых и правых углах хедера.

Графику разместим в новой группе. Теперь решим проблему с тем, что внешние стороны хедера всё ещё отображаются и блокируют эффект тени.
Делаем ctrl-клик по иконке слоя с нашим хедером. Этим мы выделим что нам надо. Осталось добавить маску слоя к группе InHeader. После изменяем прозрачность соседней группы "BehindHeader" до 90%.


Шаг 9.
Поместим надпись в хедере и над хедером. Теперь нам нужно создать какой-нибудь графический объект или эмблему и поместить его слева так, чтобы он привлёк внимание к главной области. Также тут можно использовать градиент от основного цвета к прозрачному. В нашем примере я взял (#030a0e). Если вы всё-таки решите добавлять градиент, то сделайте тень ярче градиента. В нашем примере я взял цвет (#0b1316). Этот приём добавит плавный переход от заголовка к навигации.


Шаг 10.
Ищем слой с заголовком и выделяем его. Применим для него стиль слоя, параметры которого показаны на изображение ниже. Для свойства Перекрытия узора использовалась геральдическая лилия, этот узор нетрудно найти в сети. Создадим маску слоя, использовав пункт Добавить слой маску. Проверим, что применили маску к нужному слою. Добавим радиальный градиент, идущий от белого к чёрному. Эффект можно глянуть на рисунке ниже.


Шаг 11.
Приступим к созданию навигации. Для этого создадим отдельную группу с одноимённым названием. Создадим выделение черного цвета под основной частью хедера с высотой 35px. Зальём наше выделение градиентом с основным цветом (#0c0c0c) и до прозрачного. Заливку выполним сверх вниз. Было бы неплохо сделать плавный переход от баннера к главной части, для этого будет достаточно добавить однопиксельную обводку цвета (#232323) в основании.

Заполним нашу навигацию ссылками. В нашем примере мы взяли жирный шрифт Verdana 18pt.


Шаг 12.
Создадим группу "Данные". Выделим квадратную область в 100х100 пикселей. Создадим слой выше. Найдём в панели инструментов Прямоугольник со скруглёнными углами и, установив радиус в 5px, нарисуем квадрат 50х50 пикселей. Применим следующие эфекты: установим внешнее свечение с нормальным режимом и цветом от чёрного.

Для украшения можно взять уменьшенную копию созданных раннее лучей и поместить их за вашим прямоугольником. Заполним прямоугольник текстом. Для нашего примера использовался шрифт 12px и 24x Verdana.

Теперь добавим название и содержание. Заголовки у нас будут белого цвета, шрифт 30px Verdana, контент - цвета (#dddddd) и шрифт 12px Verdana. У ссылок будет цвет (#36ade1).


Шаг 13.
Для создания сайдбара используем ранее используемый нами Прямоугольник со скруглёнными углами. Значение радиуса выставим в 10px, применим обводку цвета(#080808). И закончим добавлением двух градиентов, от основного цвета к прозрачному, как размещать градиенты показано на рисунке ниже(один сверху, другой в основании).


Шаг 14.
Последний шаг состоит в добавление нижнего блока ссылок. Воспользуемся тем же приёмом, что и для основной части хедера.
Для этого создадим маску слоя размером 800х300px. Поместим картинку в верхний левый угол блока. Сымитируем списки, создадим небольшие квадраты со стрелками. Используем их в качестве маркеров списка. Чтобы различать область ссылок от основной части добавим обычный градиент от основного цвета к прозрачному.


Итог
Мы получили тёмный psd шаблон, который уже можно верстать. Напоследок хотел бы ещё раз обратить внимание на размещение графики в таких местах, в которых она нужна для привлечения внимания.