Стильный сайт в стиле Vista

Конечный результат:

1. Создайте новый документ размером 800х950 пикселей с прозрачным фоном и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение шириной 800 пикселей и высотой 215 пикселей. Залейте выделение градиентом в новом слое, используя чёрный и тёмно-серый цвета. Выберите инструмент Кисть (Brush Tool) и задайте ему размер 2-6 пикселей, цвет заливки установите #4c842d. Инструментом Перо (Pen Tool) в новом слое нарисуйте контур линии, кликните на нём правой кнопкой и выберите Выполнить обводку контура (Stroke Path) и в появившемся окне выберите Кисть (Brush). Потом к этой линии примените стиль Внешнее свечение (Layer Style - Outer Glow):

Режим – Осветление, Метод – Мягкий

2. Таким же способом нарисуйте ещё одну линию цветом #389fa4 и примените к ней тот же стиль слоя с такими настройками:

Режим – Осветление, Метод – Мягкий

3. Создайте ещё две такие линии обоих цветов, но не применяйте к ним стилей слоя. После создания примените к ним фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 3-5 пикселей.

4. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте небольшую фигуру в верхней части холста чёрного цвета и примените к ней стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет

5. Тем же инструментом создайте фигуру сверху и примените к ней стиль Наложение цвета (Layer Style - Gradient Overlay):

Обводка (Режим – Нормальный, Стиль – Линейный):

6. Создайте ещё одну кнопку сверху с такими настройками того же стиля:

Режим – Нормальный, Стиль – Линейный

7. Инструментом Овальная область (Elliptical Marquee Tool) в новом слое создайте белый круг, как показано ниже.

8. Сделайте выделение слоя с зелёной кнопкой (Ctrl+Click), Инвертируйте его (Select – Inverse) и в слое с белым кругом нажмите Delete. Потом установите Непрозрачность круга – 20%. Проделайте то же самое для второй кнопки:

9. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру в нижней части шапки сайта. Примените к ней такие стили слоя:

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

10. Заполните этот прямоугольник зелёными кнопками:

11. Напишите заголовок, слоган, подпишите кнопки и вставьте логотип.

12. Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение оставшейся области, включая нижнюю часть навигационной панели, и залейте его белым цветом.

13. К этому прямоугольнику примените стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет

14. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте три фигуры белого цвета и примените к ним стиль Обводка (Layer Style – Stroke):

Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет

15. Подпишите эти три области:

16. Инструментом Овальная область (Elliptical Marquee Tool) создайте 4 круга в левом прямоугольнике, залейте их любым цветом и примените такие стили слоя:

Внутреннее свечение (Режим – Умножение):

Глянец (Режим – Осветление основы):

Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Градиент, Стиль – Разбивка фигуры):

17. Добавьте текст:

18. Используя тот же метод, что и при создании кнопок, создайте два больших прямоугольника:

19. Эти области отведены под объявления:

20. Пустую область по середине отведите для туториалов.

21. Добавьте заголовки:

22. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте чёрный футер и заполните его нужной информацией:

Финальный результат: