[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создание стеклянной кнопки (иконки)
DooDLeZДата: Понедельник, 11.05.2009, 17:24 | Сообщение # 1
Admin
Группа: Проверенные
Сообщений: 805
[ 21 ]
:-)

Шаг 1. Cоздаем новый файл размером 100x100px.
Если нужно, то заливаем его нужный фоном.
Создаем новый слой (ctrl+shift+N).
Далее выбираем инструмент "прямоугольник с округленными углами" (shift+U).
1. Выбираем режим "контуры".
2. Проверяем, что выбран именно "прямоугольник с округленными углами".
3. Выставляем "радиус округления углов" 10px.

Теперь с зажатой клавишей shift, на созданном нами слое рисуем "прямоугольник с округленными углами".
Нажимаем ctrl+enter для преобразования "контура" в "выделение" и заливаем любым цветом (цвет не имеет значения, т.к. далее он будет заменен).
Получается так:

Шаг 2. Создаем тень и задаем цвет нашего прямоугольника.
В окне "слои" правой кнопкой мыши щелкаем на нашем слое и выбираем из списка "параметры наложения":

В появившемся окне, в списке (слева) жмем на слово "Тень":

и выставляем следующие параметры:

Теперь в том же списке (слева) выбираем "Наложение градиента":

и выставляем следующие параметры:

Шаг 3. Создаем изображение на кнопке
Создаем новый слой (ctrl+shift+N) и наносим на него изображение:

Создаем тень для этого рисунка (Шаг 2) и выставляем следующие параметры:

Получается так:

Шаг 4. Создание блика
Снова создаем новый слой (ctrl+shift+N) и с помощью инструмента "прямоугольник с округленными углами" с зажатой кнопкой shift, рисуем на нем новый прямоугольник меньше первого на 2-3 пикселя с каждой стороны и "радиус округления углов" выставляем 8px. Далее нажимаем ctrl+enter для преобразования "контура" в "выделение" и заливаем "градиентом" (G) от белого к прозрачному. Выбираем инструмент "Перо" (P) и в нижней половине кнопки создаем контур с "волнистой" верхней частью:

Далее нажимаем ctrl+enter для преобразования "контура" в "выделение" и жмем клавишу delete для удаления этой части блика.

Совет:
Допустим вы решили использовать эту кнопку на своем сайте. Тень у кнопки полупрозрачная и если сохранить кнопку в формате ".gif", то полупрозрачность потеряется, т.к. этот формат поддерживает только 100% прозрачность; формат ".jpg" вообще не поддерживает прозрачность; можно сохранить в ".png", но прозрачность этого формата поддерживают не все браузеры.
Остается только рисовать кнопку на таком же фоне как и на сайте либо рисовать без тени.


IP админа скрыт!
  • Страница 1 из 1
  • 1
Поиск: