« Кнопки управления окном »

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

В прошлом уроке о дизайне интерфейса в стиле Windows Vista в фотошопе я вам показал как рисуется окошко. Чтобы придать ему более-менее законченный вид, я решил показать вам как можно нарисовать кнопки управления окном.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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