Круглые кнопки в стиле Windows Vista
В этом уроке мы попробуем создать круглую кнопку в одном из стилей Windows Vista.
Текст сопровождается скриншотами, на которых слева показано, что должно получится на этом этапе, а справа от него показаны параметры эффектов. Должны вас предупредить, что все значения параметров справедливы для конкретного размера объектов - приведенных здесь. В случаях, если ваш объект больше или меньше - нужно ставить другие значения. Поэтому в первый раз очень советуем делать все как в наших примерах (включая размеры объектов). Конечно, можно было бы сделать и без спец эффектов, но это чуть сложнее и, самое главное, менее гибко для дальнейших экспериментов.
Создание кнопки.
Из каких слоев состоит такая кнопка:
- Тело кнопки (назовем такой слой "body")
- Рассеяный внутренний блик (назовем этот слой "inner diffuse")
- Четкое отражение снизу (пусть будет "bottom specular")
- Рассеяный внешний блик (соответственно "outer diffuse")
- Четкое отражение сверху ("top specular")
1. Тело кнопки
- Итак, создаем новый слой, называем его "body"
- Рисуем на нем круг (Ellipse Tool) цветом #001767 (этот цвет, а также все последующие, взяты для максимального сходства с кнопками Vista)
- Затем применим к нему эффект Inner Glow (color #001767):
2. Нужно сделать рассеяный внешний свет. Для этого придется немножко порисовать.
- Включите "Ellipse Tool"
- В нем поставте режим "Paths"
- И нарисуйте примерно такой круг:
3. Теперь самый ответственный момент — нужно придать блику форму выдавленности
- Для этого переключаемся в режим Direct Selection Tool
- И меняем путь до тех пор, пока он не станет похож на приведенный ниже. Этот контур важно сделать правильным и аккуратным, т.к. потом от его ровности будет зависет восприятие кнопки в целом
- Затем нужно создать слой по образу полученного пути. Для этого создаем новый слой
- Переходим в окошоко Paths (в меню выбираем Windows -> Paths)
- Выбираем в нем наш путь, на нем жмем правую кнопку мыши.
- Выбираем Make selection, в диалоговом окне жмем "OK". Выделение готово
- Создаем новый слой (назовем "outer diffuse")
- Заливаем его цветом #ddf8ff:
4. Нужно добавить прозрачности в центре блика. Тут точного совета не будет — как вам удобней. Можно сделать обычным "Eraser" в режиме "Brush" — чуть подтереть центр. Или созданием маски, и в ней тоже самое, с помощью Brush Tool:
1.5. Рисуем рассеяный внутренний свет
- Создаем новый слой (назовем "inner diffuse")
- Для начала это просто круг цветом #42d6fb:
1.6. Применяем к нему фильтр Gaussian blur:
1.7. Опускаем его вниз кнопки. Части, выступающие за границы кнопки, можно срезать:
1.8. Рисуем новый круг для четкого отражения
- Создаем новый слой (назовем слой "bottom specular")
- Рисуем круг белого цвета и чуть большего размера, чем тело кнопки.
1.9. Теперь нужно стереть внутреннюю часть круга и создать маску
- (создаем выделение по телу кнопки (ctrl+click мышкой на слое "body"),
- выделяем слой "bottom specular", стираем (Del) в нем выделенную область.
- Затем создаем маску по телу кнопки: создаем выделение по телу кнопки (ctrl+click мышкой на слое "body"),
- выделяем слой "bottom specular" и нажимаем на кнопку Add layer Mask).
1.10. Перетаскиваем слой "bottom specular" на самый верх (если он еще не там).
- Чуть чуть (примерно на 4-6 точек) уменьшаем его относительно центра
- Затем рвем связь между маской и слоем (нажимаем на значок цепи)
- Выделяем слой (именно слой, а не маску) и немного поднимаем вверх до достижения такого эффекта:
1.11. Делаем дубликат (Duplicate) получившегося слоя "bottom specular"
- Называем его "top specular" и прячем его (это чтобы не делать тоже самое повторно)
- А текущий слой ("bottom specular") с кольцом размываем при помощи Motion Blur:
1.12. Осталось чуть чуть...
- Возвращаем продублированный в пункте 11 слой "top specular"
- и отражаем по вертикали (Edit -> Transform -> Flip Vertical):
1.13. Сокращаем маску "top specular" до размеров внешнего блика
- Для этого создаем выделение по созданному в пункте 1.3 пути (переходим в окошко Paths (в меню выбираем Windows -> Paths), выбираем в нем наш путь, на нем жмем правую кнопку мыши. Выбираем Make selection, в диалоговом окне жмем "OK". Выделение готово)
- Затем инвертируем выделение Shift+Ctrl+I
- Выбираем маску слоя "top specular"
- И закрашиваем выделенное черным цветом:
1.14. Проверим, выбран ли слой "top specular" (именно слой, а не маска)
- Применим Motion blur (Filter -> blur -> Motion Blur)
- и (в случае, если у вас кольцо находится не так, как на картинке ниже) слегка подвиньте его, чтобы получилось также:
1.15. Вау! мы сделали это! Теперь, если необходимо (например, для полной схожести с элементами управления Windows Vista), то можно добавить немножечко теней (на слой "body"):
1.16. Если на получившуюся кнопку добавить какой-нибудь значок, получим что-то подобное (а еще можно поиграть с цветами и прочими эффектами для достижения "своего" стиля):
Вы можете со слоями) в формате PSD (для свободного пользования) или
