Photoshop :: Графические эффекты. Стеклянная кнопка


Стеклянная кнопка
Карасев Алексей

Все применённые эффекты входят в стандартную установку Фотошопа.
Не будем обсуждать техническую и этическую стороны вопроса "Нужно ли размещать на сайте "декоративную" графику". Научиться делать её - вот наша задача. Есть множество способов создать кнопку для интернет страницы. Мы постараемся время от времени освещать некоторые из них. Вот один из них.
1. Создадим новый документ (Ctrl+N). Создайте новый документ. Я делал 200х200 px, так что при применении фильтров и пр. учитывайте масштабы и параметры. Выберите инструмент "Эллиптическое выделение" и, удерживая Shift, для равномерного построения и Alt, для построения из центра, создайте круглое выделение.
2. Инструментом "Радиальный градиент" проведите градиент под углом 45°. от одного края выделения до другого. Цвета градиента чёрный и ваш выбор. Проводите так, чтобы результат был приблизительно похож на то, что вы видите на иллюстрации. Обзовите слой "Button", ибо это она и есть.

Наложение градиента на выделенную область. Стрелкой указано направление градиента.
3. Создайте новый слой и на нём, удерживая клавишу "Alt" создайте ещё одно круглое выделение. Оно вычтется из уже имеющегося и получится что-то похожее на серп месяца. Таким же способом вычтете из этого выделения "рога" этого месяца и залейте оставшуюся выделенную область белым цветом. Снимите выделение.

Создание выделения. Красным отмечены выделенные области. Белая - последний шаг на этой стадии - заливка выделения белым цветом.
4. Примените на слой фильтр "Радиальное размытие" - Фильтры / Размытие / Радиальное размытие (Filter / Blur / Radial Blur) с параметрами Method:Spin; Quality: Good; Amount 10. Повторяйте применение фильтра (Ctrl+F) до тех пор, пока границы не станут плавными и размытыми, как на иллюстрации. Мне для этого пришлось "повториться" 13 раз. Можно, конечно, увеличить значение Amount, но я предпочёл использовать повторы, для лучшего контроля за качеством. Теперь используйте фильтр "Размытие в движении" - Фильтры / Размытие / Размытие в движении (Filter / Blur / Motion Blur) под углом 45° c дистанцией 30. Назовите слой "Light" - он будет имитировать световой блик на кнопке.

После многократного применения фильтра "Радиальное размытие".

После применения фильтра "Размытие в движении".
5. Удерживая Ctrl выполните щелчок мышью на вашем первом слое "Button" с кругом и загрузите выделение. Используя инструмент Contract c параметром 8 px вычтите данную величину из круглого выделения. Инвертируйте выделение. Создайте новый слой и залейте на нём выделенное белым цветом. Дайте слою имя, например, "Bevel".
 
Применение инструмента Contract с последующей инвертацией выделения и заливкой.
6. Снова загрузите выделение с первого слоя и инвертируйте его. Очистите выделение и снимите его. В результате всех этих действий у вас на отдельном слое должен получиться белый обод шириной 8 px, внешней границей совпадающий с внешней границей круга на первом слое.

Белый обод - будущий рельеф для кнопки.
7. Используя инструмент "Полигональное лассо" выделите несколько секторов получившегося обода, как это показано на рисунке и вырежьте их (Ctrl+X). Теперь вставьте (Ctrl+V) и выравняйте так, как если бы разреза не было. Назовите слой "Bevel_Black". Временно отключите слой.
 
Выделение секторов получившегося обода с помощью "Полигонального лассо". Красным отмечена выделенная область.
8. Вернитесь на слой "Bevel" и примените фильтр "Радиальное размытие" с теми же что и ранее параметрами. Повторите применение фильтра (Ctrl+F) до тех пор, пока границы не потеряют резкости, как на иллюстрации.

После многократного применения фильтра "Радиальное размытие" на часть обода, расположенную на отдельном слое.
9. Включите слой "Bevel_Black" и на нём, снова используя "Полигональное лассо" и выделите несколько секторов круга, как это показано на рисунке, и очистите эту область. Удерживая Ctrl выполните щелчок мышью на слое "Bevel_Black". Загрузится выделение. Залейте его чёрным. Снимите выделение и примените фильтр "Радиальное размытие" с теми же что и ранее параметрами. Повторяйте применение фильтра, как и ранее, до тех пор, пока границы не потеряют резкости, как на иллюстрации.
   
Выделение, очистка и заливка второй части обода на слое "Bevel".

После многократного применения фильтра "Радиальное размытие" на часть обода, расположенную на отдельном слое.
10. Вот, собственно, и всё. Чтобы блик на гранях не бросался в глаза столь откровенно, я уменьшил прозрачность слоя "Bevel" до 70%. Сдвинул блик к краю, добавил тень и немного "подретушировал" получившееся ластиками и кистями с разными степенями прозрачности. Результат мне понравился.

Финальный результат. После "ретуши".
 
Финальный результат. После "ретуши" Остаётся уменьшить до требуемого размера и кнопка завершена.
В принципе, можно добавлять слои почти до бесконечности. Это даст эффект глубины и прозрачности.

читать еще по теме