Среда, 12.12.2018, 20:27
Приветствую Вас Гость | RSS
Главная | Каталог статей и материалов | Регистрация | Вход

Меню сайта

Категории каталога
Уроки [36]
Общее [5]

..::Мини-Чат::..
500

..::Наш опрос::..
Сайт хочет сменить дизайн, Вы согласны?
Всего ответов: 90

   
Главная » Файлы » Уроки в Photoshop'е » Уроки

Окно в стиле Windows Vista (в Adobe Photoshop)
[ ] 07.04.2008, 18:11

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

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

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

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

создаём в фотошопе (PhotoShop) интерфейс в стиле Windows Vista (дизайн в стиле Windows Vista)

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

дизайн в стиле Windows Vista

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

дизайн сайта в стиле Windows Vista

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

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

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

дизайн в стиле Windows Vista в PhotoShop

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

как нарисовать интерфейс в стиле Windows Vista в фотошопе

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

как нарисовать интерфейс в стиле Windows Vista в PhotoShop

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

стиль Windows Vista

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

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

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

стиль Vista

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

стиль Windows Vista в фотошопе

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

стиль Vista в фотошопе

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

стиль Windows Vista в PhotoShop

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

стиль Vista в PhotoShop

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

как сделать сайт в стиле Windows Vista

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

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

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

как сделать дизайн в стиле Vista

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

дизайн в стиле Windows Vista

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

дизайн в стиле Vista

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

стиль Windows Vista в фотошопе

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

стиль Windows Vista в PhotoShop

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

окно в стиле Windows Vista

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

как в фотошопе нарисовать окно в стиле Windows Vista

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

как в PhotoShop нарисовать окно в стиле Windows Vista

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

Категория: Уроки | Добавил: Администратор | Автор: Максим
Просмотров: 281 | Загрузок: | Рейтинг: 0.0/0 |
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

   
Форма входа

..::Поиск::..

..::Наши друзья::..

..::Статистика::..

Всего живых: 1
Гостей: 1
Пользователей: 0

D-e-s-i-g-n © 2018