В этом уроке мы попытаемся нарисовать тёмный дизайн для веб сайта. 
Приблизительное время выполнения: 40-45 минут
Шаг 1. Создайте новый документ размером 950x1130 пикселей с чёрным фоном. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) и установите значение радиуса – 15 пикселей.
Шаг 2. Создайте прямоугольник в верхней части холста по центру.
Шаг 3. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:
Наложение градиента (Режим – Нормальный, Стиль – Линейный):
Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль –Зеркальный):
В итоге должно получиться так:
Шаг 4. В левой стороне прямоугольника вставьте заголовок и слоган, а на правой – навигационный текст. 
Шаг 5. Слева от текста навигации добавьте 3-пиксельные линии белого цвета и примените к ним стиль Внешнее свечение (Layer Style - Outer Glow): Режим – Осветление, Метод – Мягкий
Шаг 6. Сделайте выделение заголовка сайта, как показано ниже. 
Шаг 7. Залейте его белым цветом (FFFFFF) в новом слое и установите Непрозрачность – 2%. Под заголовком сайта создайте ещё один прямоугольник с закруглёнными краями. 
Шаг 8. Примените такие стили слоя с этому прямоугольнику - Отбрасывание тени (Режим – Умножение):
Внутренняя тень (Режим – Умножение): 
Наложение градиента (Режим – Нормальный. Стиль – Линейный): 
Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):
Шаг 9. Сделайте выделение половины последнего прямоугольника.
Шаг 10. Залейте его белым цветом в новом слое и установите Непрозрачность – 5%. Добавьте навигационный текст и между разделами меню создайте разделители – две вертикальные линии, стоящие рядом друг с другом разных цветов (я использовал светлый и тёмный оттенки серого).
Шаг 11. Создайте белый круг, как показано ниже (он должен немного заступать на область навигационной панели).
Шаг 12. Примените к нему фильтр > Размытие по гауссу (Gaussian > Blur Filter) со значением 6-8 пикселей и установите Непрозрачность слоя – 23%. Потом сотрите нижнюю часть круга.
Шаг 13. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте выделение в новом слое, как показано ниже.
Шаг 14. Выберите инструмент Градиент (Gradient Tool), установите цвет заливки - #2c2d2d, цвет фона – чёрный и сделайте радиальную заливку из нижнего левого угла. Потом примените стиль Обводка (Layer Style – Stroke) - Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный
Шаг 15. Добавьте любое изображение и текст приветствия. 
Для серебряной кнопки были применены такие стили:
Внутренняя тень (Режим – Умножение):
Наложение градиента (Режим – Нормальный, Стиль – Линейный):
Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Градиент, Стиль – Зеркальный):
Шаг 16. Создайте несколько областей контента, таких же, как и заголовок.
Шаг 17. Потом добавьте светящиеся точки в нужные места:
Шаг 18. Первую область контента я буду использовать как галерею изображений. Создайте в нём закруглённый прямоугольник и примените к нему такие стили:
Наложение цвета:
Обводка:
Шаг 19. Вставьте изображение в созданный прямоугольник, установите Непрозрачность слоя – 40% и добавьте информацию об изображении. 
Шаг 20. Правую область контента я отведу использовать для новостей. 
Шаг 21. В третьей будет галерея Flickr. Создайте там прямоугольник: 
Шаг 22. Добавьте изображения: 
Шаг 23. Создайте два круга по краям: 
Шаг 24. Внутри них добавьте стрелки: 
Шаг 24. В конце создайте футер:
Ссылка на источник
| 
