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

  • 17 июля 2011
  • 0
  • 3933

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



Дизайн сайта в стиле 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). Настройте, как показано ниже:

Режим – Осветление, Метод – Мягкий
 Дизайн сайта в стиле Vista в фотошопе

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


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

Шаг 2


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

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


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

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


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

Шаг 3


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

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

Шаг 4


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

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



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

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


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

Шаг 5


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

Режим – Нормальный, Стиль – Линейный
 Дизайн сайта в стиле Vista в фотошопе

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

Шаг 6


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

Шаг 7


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


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

Шаг 8


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


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

Шаг 9


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

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


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

Обводка:
 Дизайн сайта в стиле Vista в фотошопе
Дизайн сайта в стиле Vista в фотошопе

Шаг 10


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

Шаг 11


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


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

Шаг 12


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


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

Шаг 13


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

Шаг 14


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

Шаг 15


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


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

Шаг 16


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

Внутреннее свечение (Режим – Умножение):
 Дизайн сайта в стиле Vista в фотошопе

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


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

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


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

Шаг 17


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

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

Шаг 18


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

Шаг 19


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


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

Шаг 20


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


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

Шаг 21


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

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

Шаг 22


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


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

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




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




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.