Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Иконки скачать для сайта Как сделать Анимированный аватар в PhotoShop Шаблон для сайта КС Шаблон для кланов играющих в Lineage II Меняем цвет автомобиля в фотошопе Как добавить фотографиям реалистично ярких цветов Зелёные иконки , для тёмного форума UCOZ Шаблон FALL out BOY Скачать бесплатно шаблон Design Vista Скачать иконки групп Скачать CS шаблон Скачать бесплатно шаблон для ucoz на тему футбол Barca Скачать набор кистей в виде растений. СКАЧАТЬ кнопки для форума Как сделать Стильный анимированный аватар в фотошопе Рисуем в фотошопе Sticky Notes Бесплатно Красивый шаблон для uCoz Скачать шаблон бесплатно для uCoz Черно-белый портрет в Фотошоп Скачать Шаблон на тему Call of Duty 4 Скачать шаблон для uCoz Создание травяного текста Иконки для форума UCOZ Коррозия текста Объемный текст, тени, отражения
Главная » Статьи » Уроки Adobe Photoshop » Общее

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

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

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

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

Кнопки управления окном (дизайн в стиле 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 (кнопки, иконки и другое).

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



Категория: Общее | Добавил: cinemania (28.12.2008)
Просмотров: 1121 | Рейтинг: 5.0/1 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Пятница, 29.05.2020, 13:49
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Логин:
Пароль:
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz