« Окно в стиле Windows Vista (в фотошопе) »

Создаём в фотошопе (PhotoShop) интерфейс в стиле Windows Vista (дизайн в стиле Windows Vista) — серия уроков. Урок первый — окно...

Решил я написать серию уроков по созданию в фотошопе (PhotoShop) графического интерфейса, дизайна, в очень популярном сейчас стиле операционной системы Windows Vista.

Это первый урок — урок о создании в фотошопе дизайна в стиле Windows Vista, в котором мы нарисуем окно.

Применить можно это где угодно — от создания сайта в стиле Windows Vista и до различных скинов в стиле Vista...

Как нарисовать дизайн в стиле Windows Vista

1. Открываем какое-нибудь изображение, которое послужит нам фоном:

2. Берём инструмент Rounded Rectangle Tool, радиус скругления ставим равным 5 пикселей (Radius: 5px) а цвет выбираем тёмносиний (#233d50) и рисуем так:

3. Непрозрачность слоя (Fill) с этим скруглённым прямоугольником ставим равной 70% (данный параметр находится сверху панели слоёв — Layers):

4. Открываем окно Layer Style (делаем клик правой клавишей на нашем слое на панеле слоёв и из появившегося меню выбираем пункт Blending Options). Переходим в этом окошке на вкладку Drop Shadow (отбрасывание тени) и выставим там следующие значения:

5. На вкладке Gradient Overlay следующие:

Вот так выглядят подробные настройки градиента (чтобы открыть их, кликните по полосе с градиентом, которая справа от надписи Gradient:) — красным цветом я указал значения непрозрачности в процентах (чтобы их изменить - кликайте по верхнему квадратику и в поле Opacity вписывайте эти значения), при чём, заметьте, квадратиков четыре, просто два в центре (с непрозрачностями 0 и 60) расположены настолько близко, что налегают друг на друга:

6. Переходим на вкладку Stroke (добавление бордюра) и там выставим такие параметры:

Данный бордюр с градиентом, вот его подробные настройки (красными цифрами указаны шестнадцатиричные значения цветов). Тут заметьте то, что ромбики вокруг центрального нижнего квадрата придвинуты к нему впритык:

Жмём везде Ok и смотрим на результат:

7. Сейчас нужно создать такой же прямоугольник (по размерам), но лучше сделать копию уже созданного (просто на панеле слоёв Layers перетащите слой на иконку для создания нового слоя или нажмите на слое правой клавишей и выберите Duplicate Layer...).

Если вы создали копию слоя, то нужно сбросить все параметры слоя (кликайте правой клавишей на слое и выбирайте пункт Clear Layer Style).

Затем непрозрачность слоя (Fill) сделайте равной 0% и переходите в окошко Layer Style. Там, на вкладке Stroke выставьте следующие параметры:

Жмите Ok и смотрите что получилось:

8. Сейчас нарисуйте следующий прямоугольник (с помощью инструмента Rectangle Tool) слегка голубоватого цвета (#cfdae7):

9. Зайдите в настройки Layer Style этого слоя и выставьте следующие параметры (на вкладке Stroke):

10. Создайте копию этого слоя, сбросьте его параметры, непрозрачность Fill сделайте равной 0% и заходите в Layer Style на вкладку Stroke, там делайте следующее:

Жмите Ok и у вас должно получиться что-то вроде этого:

11. Простое окошко готово. Сейчас нарисуем небольшую панельку сверху. Выбирите инструмент Rectangle Tool, цвет — почти чёрный (#111111) и нарисуйте такой прямоугольник:

12. Залазим в Layer Style этого слоя и переходим на вкладку Gradient Overlay и делаем как показано ниже:

А вот так выглядят подробные настройки градиента:

13. На вкладке Stroke сделаем следующее:

Жмём Ok и получаем результат такого вида:

14. Делаем копию этого слоя, сбрасываем настройки слоя, затем параметр Fill выставим в 0% и идём в Layer Style. Там переходим на вкладку Gradient Overlay и делаем как показано ниже:

Подробные настройки градиента выглядят следующим образом:

15. Затем идём на вкладку Stroke и там делаем как у меня:

Жмём Ok и получаем конечный результат этого урока — красивое окошко в стиле Windows Vista:

Это мы нарисовали часть интерфейса в стиле Windows Vista (окно). Окно я не наполнял всякими эффектами, просто чтобы вас сразу не запутать. И не пытался всё полностью повторить с точностью до мелочей — суть не в этом, а в понимании как всё это рисуется. В следующих уроках на тему создания интерфейса в стиле Windows Vista мы нарисуем какие-нибудь элементы, кнопки, украсим наше окошко и т.д. — будем сами рисовать мнигое элементы красивого и современного интерфейса Windows Vista!