Created using
htm2chm 3.0

Download it NOW!


WDstudio. Все для Веб. Обзоры по Дизайну в Web. В помощь Вебмастеру -->>Photoshop. Создаем эффект стекла

Клуб друзей

Создаем эффект стекла

Объекты из стекла можно конечно делать на 3D редакторах, например 3D Studio Max и других, но Photoshop тоже кое-что может. Вот образец такой вот кнопочки из стекла. Времени на ее изготовление требуется порядка 3-5 минут. Визуализация делается при помощи наборов фильтров Eye Candy 3.0, он должен быть установлен в Photoshop.

Для начала, берем бэкграунд, на который нужно положить стеклянную кнопку. Делаем прямоугольное выделение, соответствующее размеру будующей кнопки. На всякий случай сохраняем выделение в альфа-канал. (лучше привыкнуть сохранять выделения, которые могут в последствии понадобится сохранять в альфа-канале). Копируем это выделение в буфер. Создаем новый рисунок. Так, как в буфер копировался выделенный фрагмент, автоматически предложено будет создать рисунок размером, совпадающим с размером сохраненного выделения. Затем вставляем сохраненный фрагмент в новый рисунок. Сразу после чего соединяем все слои.
Далее создаем еще два рисунка того же размера. Перый рисунок с черной заливкой, второй - цветом предполагаемого цвета стекла. В данном случае зеленой. Переходим в режим "Быстрая маска" , устанавливаем инструмент "Градиент", причем маска должна быть 100% непрозрачной, а градиент от черного до белого. Делаем градиент на рисунке из черного фона. Должно получиться как показано на рисунке.
Теперь выходим из режима "Быстрая маска" должно появиться выделение на черном рисунке в виде прямоугольника ближе по размерам к квадрату. Копируем в буфер картинку с изображением фрагмента бэкграунда и вставляем его в выделение на черной картинке.
Если вы все сделали правильно, то должно получиться приблизительно так. Теперь накладываем поверх этой картинки новый слой из картинки с цветным фоном, в данном случае зеленом. Здесь кому как удобно, и кто как привык. Можно просто добавить новый слой и залить его определенным цветом. Тем не менее у нас теперь добавился слой и он наверху. Делаем ему прозрачность приблизительно 15%, в данном примере 14%. Получается Бэкгаунд с градиентным освещением и зеленоватым оттенком. Соединяем все слои. Это нужно не забыть сделать, так, как на это изображение в целом будем копировать в буфер, предварительно его полностью выделив.
Замечательно. Теперь у нас в буфере хранится исходная картинка, над которой и будем колдовать. Создаем новый рисунок с черным цветом фона. А вот размер его должен быть на 1/3 больше исходного. Так, если одна сторона исходной картинки =100 пикселей, то при установленном флажке "Сохранять пропорции" нужно поставить порядка 135 - 139 пикселей - это самое оптимальное. После чего вставить сохраненный рисунок. Вот так приблизительно и должно получиться, как показано на рисунке. Самое главное. ВНИМАНИЕ: Нажмите ctrl и удерживая ее щелкните по новому появившемуся слою во вкладке слои, тоесть по картинке, которую только что вставили. Сохраните это выделение в альфа-канал. Теперь соедините все слои. Заготовка готова.

Снимите выделение с рисунка и примените фильтр Eye Candy Water Drops. "Капли воды" Причем настройте на всего одну каплю. Преломление можете ставить какое нужно. Если под кнопкой будет текст, то меньше, а если обычный бэкграунд. то можно и по более. На рисунке изображено несколько не верно. Слои не соединены. Этот рисунок был сделан несколько раньше, немного не усмотрел. Должно на превьюшке быть подобие стеклянной кнопки на черном фоне

Теперь восстановите выделение из альфа-канала. Просто щелкните по нему во вкладке "Каналы" удерживая клавишу Ctrl. (Надеюсь вы сохранили выделение, я предупреждал. . .) И далее к выделенному фрагменту примените фильтр "Eye Candy - Inner Bevel". Приблизительные параметры изображены на рисунке.

Теперь остается копировать выделенную часть в буфер и перенести на исходный бэкграунд. Получилось? Пользуйтесь. Ниже приведены мои небольшие опыты с подобным эффектом. Сделано все по схеме, приведенной выше.

Рисунки выполненые по аналогичной схеме:

[<<Назад] [В начало]

WDstudio © 2000г.