Дизайн сайта в стиле Vista в фотошопе

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

Шаг 1

Создайте новый документ размером 800х950 пикселей и прозрачным фоном. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), в параметрах инструмента сверху установите стиль Заданный размер (Fixed Size): ширина - 800 пикселей, высота - 215 пикселей. Кликните один раз на холсте, чтобы создать выделение. Выберите инструмент Градиент (Gradient Tool) (G), стиль – линейный, цвет – от чёрно к тёмно-серому, и залейте выделение. Выберите инструмент Кисть (Brush Tool) (B) диаметром 2-6 пикселей, установите цвет заливки - #4c842d. Создайте новый слой (Ctrl + Shift + N), выберите инструмент Перо (Pen Tool) в режиме контуров и нарисуйте линию. Кликните правой кнопкой мыши на контуре и Выполнить обводку контура (Stroke Path), в появившемся окне выберите Кисть (Brush). Перейдите в меню Слой – Стиль слоя – Внешнее свечение (Layer – Layer Style – Outer Glow). Настройте, как показано ниже:

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

Вы получите такой результат:

Шаг 2

Выберите инструмент Перо (Pen Tool) (P) и нарисуйте ещё одну линию. Выполните обводку цветом #389fa4. Снова перейдите в меню Слой – Стиль слоя – Внешнее свечение (Layer – Layer Style – Outer Glow):

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




Вы получите такой результат:

Шаг 3

Используя метод, описанный выше создайте такие же две линии. Но не нужно применять стиль Внешнее свечение (Outer Glow). Вместо этого перейдите в меню Фильтр – Размытие – Размытие по гауссу (Filter – Blur – Gaussian Blur): значение радиуса: 3-5 пикселей.

 

Шаг 4

Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) (U) и создайте фигуру в верхней части холста, как показано ниже. Цвет фигуры – чёрный. Перейдите в меню Слой – Стили слоя – Обводка (Layer – Layer Styles – Stroke):

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





Прямоугольник должен выглядеть так:

Шаг 5

Тем же инструментом создайте ещё один прямоугольник на первом, как показано ниже. Это будет одной из кнопок меню. Перейдите в меню Слой – Стили слоя – Наложение градиента (Layer – Layer Styles – Gradient Overlay):

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

Шаг 6

Создайте ещё одну кнопку справа от той, что создали в предыдущем шаге. Вам нужно лишь изменить цвет стиля Наложение градиента (Gradient Overlay):
 

Шаг 7

Выберите инструмент Овальная область (Elliptical Marquee Tool) (M), создайте новый слой (Ctrl + Shift + N) и создайте белый круг, как показано ниже. Для этого сначала создайте выделение, потом залейте его белым цветом. Не убирайте выделение.

Шаг 8

Перейдите в меню Выделение – Инверсия (Select – Inverse) (Ctrl + Shift + I). На слое с белым кругом нажмите Delete. Установите Непрозрачность (Opacity) слоя с белым кругом – 20%. Сделайте то же самое с синей кнопкой.

Шаг 9

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

Наложение градиента:




Обводка:
 

Шаг 10

Вам нужно заполнить этот прямоугольник зелёными, кнопками. Вы можете создать их заново, или просто сделайте несколько копий первой кнопки.
 

Шаг 11

Подпишите все кнопки, добавьте название сайта, логотип, текст приветствия и ссылки на подпись и помощь. Для этого используйте инструмент Горизонтальный текст (Horizontal Type Tool) (T).

Шаг 12

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

Шаг 13

К большому белому прямоугольнику примените стиль Обводка (Stroke):
 

Шаг 14

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

Шаг 15

Дайте название этим областям:

Шаг 16

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

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

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




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

Шаг 17

Допишите названия пунктов.

 

Шаг 18

Создайте две кнопки (зелёную и синюю), как в предыдущих шагах, только сделайте из больше. Расположите их под областью Start Here!
 

Шаг 19

В эти области можно писать объявления:

Шаг 20

Пустую область по середине можно использовать для туториалов. Выберите подходящую иконку и справа напишите название.

Шаг 21

Дайте название каждой секции:

 

Шаг 22

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

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

Перевод: Хегай Глеб
Обязательно посмотрите урок про жёлтые тона.