Главная > How to > Круглые кнопки в стиле Windows Vista

Круглые кнопки в стиле Windows Vista

В этом уроке мы попробуем создать круглую кнопку в одном из стилей Windows Vista.

002_01

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

Создание кнопки.
Из каких слоев состоит такая кнопка:
002_02

  • Тело кнопки (назовем такой слой "body")
  • Рассеяный внутренний блик (назовем этот слой "inner diffuse")
  • Четкое отражение снизу (пусть будет "bottom specular")
  • Рассеяный внешний блик (соответственно "outer diffuse")
  • Четкое отражение сверху ("top specular")

1. Тело кнопки

  • Итак, создаем новый слой, называем его "body"
  • Рисуем на нем круг (Ellipse Tool) цветом #001767 (этот цвет, а также все последующие, взяты для максимального сходства с кнопками Vista)
  • Затем применим к нему эффект Inner Glow (color #001767):

002_03
2. Нужно сделать рассеяный внешний свет. Для этого придется немножко порисовать.

  • Включите "Ellipse Tool"
  • В нем поставте режим "Paths"
  • И нарисуйте примерно такой круг:

002_04
3. Теперь самый ответственный момент — нужно придать блику форму выдавленности

  • Для этого переключаемся в режим Direct Selection Tool
  • И меняем путь до тех пор, пока он не станет похож на приведенный ниже. Этот контур важно сделать правильным и аккуратным, т.к. потом от его ровности будет зависет восприятие кнопки в целом
  • Затем нужно создать слой по образу полученного пути. Для этого создаем новый слой
  • Переходим в окошоко Paths (в меню выбираем Windows -> Paths)
  • Выбираем в нем наш путь, на нем жмем правую кнопку мыши.
  • Выбираем Make selection, в диалоговом окне жмем "OK". Выделение готово
  • Создаем новый слой (назовем "outer diffuse")
  • Заливаем его цветом #ddf8ff:

002_05
4. Нужно добавить прозрачности в центре блика. Тут точного совета не будет — как вам удобней. Можно сделать обычным "Eraser" в режиме "Brush" — чуть подтереть центр. Или созданием маски, и в ней тоже самое, с помощью Brush Tool:
002_06
1.5. Рисуем рассеяный внутренний свет

  • Создаем новый слой (назовем "inner diffuse")
  • Для начала это просто круг цветом #42d6fb:

002_07
1.6. Применяем к нему фильтр Gaussian blur:
002_08
1.7. Опускаем его вниз кнопки. Части, выступающие за границы кнопки, можно срезать:
002_09
1.8. Рисуем новый круг для четкого отражения

  • Создаем новый слой (назовем слой "bottom specular")
  • Рисуем круг белого цвета и чуть большего размера, чем тело кнопки.

002_10
1.9. Теперь нужно стереть внутреннюю часть круга и создать маску

  • (создаем выделение по телу кнопки (ctrl+click мышкой на слое "body"),
  • выделяем слой "bottom specular", стираем (Del) в нем выделенную область.
  • Затем создаем маску по телу кнопки: создаем выделение по телу кнопки (ctrl+click мышкой на слое "body"),
  • выделяем слой "bottom specular" и нажимаем на кнопку Add layer Mask).

002_11
1.10. Перетаскиваем слой "bottom specular" на самый верх (если он еще не там).

  • Чуть чуть (примерно на 4-6 точек) уменьшаем его относительно центра
  • Затем рвем связь между маской и слоем (нажимаем на значок цепи)
  • Выделяем слой (именно слой, а не маску) и немного поднимаем вверх до достижения такого эффекта:

002_12
1.11. Делаем дубликат (Duplicate) получившегося слоя "bottom specular"

  • Называем его "top specular" и прячем его (это чтобы не делать тоже самое повторно)
  • А текущий слой ("bottom specular") с кольцом размываем при помощи Motion Blur:

002_13
1.12. Осталось чуть чуть...

  • Возвращаем продублированный в пункте 11 слой "top specular"
  • и отражаем по вертикали (Edit -> Transform -> Flip Vertical):

002_15
1.13. Сокращаем маску "top specular" до размеров внешнего блика

  • Для этого создаем выделение по созданному в пункте 1.3 пути (переходим в окошко Paths (в меню выбираем Windows -> Paths), выбираем в нем наш путь, на нем жмем правую кнопку мыши. Выбираем Make selection, в диалоговом окне жмем "OK". Выделение готово)
  • Затем инвертируем выделение Shift+Ctrl+I
  • Выбираем маску слоя "top specular"
  • И закрашиваем выделенное черным цветом:

002_16
1.14. Проверим, выбран ли слой "top specular" (именно слой, а не маска)

  • Применим Motion blur (Filter -> blur -> Motion Blur)
  • и (в случае, если у вас кольцо находится не так, как на картинке ниже) слегка подвиньте его, чтобы получилось также:

002_17
1.15. Вау! мы сделали это! Теперь, если необходимо (например, для полной схожести с элементами управления Windows Vista), то можно добавить немножечко теней (на слой "body"):
002_18
1.16. Если на получившуюся кнопку добавить какой-нибудь значок, получим что-то подобное (а еще можно поиграть с цветами и прочими эффектами для достижения "своего" стиля):
002_19
Вы можете скачать готовую кнопку с офф. сайта со слоями) в формате PSD (для свободного пользования) или скачать с Народа
logo-1

How to

  1. Комментариев пока нет.
  1. Трекбеков пока нет.

*