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

Меню сайта

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

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

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

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

Кнопки управления окном
[ ] 07.04.2008, 18:12

Кнопки управления окном (дизайн в стиле Windows Vista в фотошопе)

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

кнопки управления окном в стиле Windows Vista

2. Выбираем инструмент Rectangle Tool и рисуем прямоугольник размером 24x16 пикселей, цвет — тёмнофиолетовый (#57697c):

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

3. Заходим в настройки Layer Style (кликните правой клавишей на слое с прямоугольником (на панеле слоёв — Layers) и выберите пункт Blending Options) и изменим непрозрачность Fill Opacity (сделаем равной 30%):

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

4. Переходим на вкладку Stroke и добавим бордюр, как показано ниже:

интерфейс в стиле Windows Vista

5. А сейчас переходим на вкладку Gradient Overlay и там сделаем так:

интерфейс в стиле Vista

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

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

Жмем везде Ok и получаем такой фон для кнопки:

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

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

Затем сбросьте все параметры слоя. Для этого кликайте правой клавишей на слое и выбирайте пункт Clear Layer Style.

Затем заходим в Layer Style (кликните правой кнопкой на слое (на панеле слоёв Layers) и из появившегося меню выберите Blending Options). Там непрозрачность Fill Opacity уменьшите до 0%:

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

7. Переходим на вкладку Inner Glow (внутреннее свечение), там выставьте следующие значения:

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

8. Теперь добавим блики с помощью градиента (на вкладке Gradient Overlay):

дизайн Windows Vista в PhotoShop

А вот так выглядят подробные настройки градиента (красным текстом указаны значения параметра Opacity для каждого квадратика; заметьте, что правый ромбик от центрального квадрата нужно подвинуть к нему вплотную):

дизайн Vista в PhotoShop

Жмём везде Ok и получаем такую-вот кнопку:

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

9. Сейчас выберите карандаш (Pencil Tool) и нарисуйте им такой прямоугольник:

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

10. Заходите в Layer Style слоя с этим прямоугольником, на вкладку Stroke и выставьте следующие значения (красным текстом указан шестнадцатиричный код нужного нам цвета):

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

11. Теперь перейдите на вкладку Gradient Overlay и сделайте так:

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

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

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

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

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

12. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов сделаем равным 3 пикселя (Radius: 3px) и рисуем прямоугольник размером 24x16 пикселей, цвет — #57697c:

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

13. Сейчас преобразуем полученную векторную фигуру в растр. Для этого жмём правой клавишей на слое и выбираем пункт Resterize Layer. Сейчас закрасьте все уголки (с помощью Pencil Tool), кроме нижнего левого (как именно — смотрите ниже):

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

14. Примените к этой фигуре те же эффекты, что и в предыдущем случае. Чтобы не водить лишний раз мышкой, лучше сделайте так: кликаем правой клавишей по нижнему слою недавно нарисованной кнопки (а она из трёх слоёв) и выбираем пункт Copy Layer Style, затем кликаем правой клавишей на только что нарисованном слое и выбираем пункт Paste Layer Style:

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

15. Сделайте копию слоя и примените к ней эффекты, но скопировав их со второго слоя (а не первого, как прошлый раз) ранее нарисованной кнопки:

как нарисовать дизайн Vista

16. Нарисуйте прямоугольник как ниже и тоже примените к нему эффекты, уже с третьего слоя прошлой кнопки:

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

17. Осталось нарисовать кнопку закрытия окна. Выберите инструмент Rounded Rectangle Tool и нарисуйте такую фигуру (размеры — 42x16 пикселей), цвет — красный (#aa1200):

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

18. Преобразуем в растр и закрасим карандашом все углы, кроме нижнего правого (тем же способом, как в пункте 13):

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

19. Применим к слою несколько эффектов. Заходим в Layer Style на вкладку Inner Glow и так делаем как у меня:

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

20. Затем сделаем градиент (вкладка Gradient Overlay):

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

С такими-вот подробными настройками:

кнопка в стиле Vista

Везде жмём Ok и получаем фон для кнопки закрытия окна:

в стиле Windows Vista

21. Делаем копию слоя и применим к нему эффекты со второго слоя одной из ранее нарисованных кнопок:

в стиле Vista

22. Выберите карандаш (Pencil Tool) и нарисуйте такой-вот крестик, примените к нему эффекты третьего слоя одной из ранее нарисованных кнопок:

как нарисовать элементы из Windows Vista

Вот и всё. Сейчас можно к нашему окошку добавить текст в заголовке и вот что мы после этого получим (тут я немного уменьшил непрозрачность кнопок):

кнопки управления в стиле Windows Vista

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

Спасибо за внимание!

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

   
Форма входа

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

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

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

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

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