Уроки по Photoshop, Illustrator, Flash и 3ds max. Статьи по дизайну и фотографии.

Рисуем профессиональную кнопку с помощью Флэш

кнопка во Флэш

Шаг 1. Создаем новый документ размером 400*400px.

Шаг 2. Переназываем текущий слой (layer1) на "base". Выбираем Инструмент Овал (Oval Tool(O)) на Панели Инструментов со следующими параметрами:

Инструмент Овал

и рисуем овал, как на картинке внизу

Рисуем Овал

Шаг 3. Теперь, давайте зальем наш овал градиентом. Убедитесь, что Панель Color Mixer (Смешение цветов) открыта и введите там следующие цифры: (овал должен быть при этом выделен, естественно).

Color Mixer

наш градиент будет выглядеть так

градиент

Шаг 4. Все отлично, только направление градиента не то, что хотелось бы. Поэтому выбираем Инструмент Трансформации Градиента (Gradient Transformation Tool (F)) и поворачиваем наш градиент по часовой стрелке (см.картинку).

Gradient Transformation Tool

у вас должно получиться что-то в этом роде:

Шаг 5. Теперь для того, чтобы добавить эффекты типа "отбросить тень (drop shadow)" и "внутреняя тень (inner shadow)", необходимо конвертнуть наш круг в movie clip, так как Flash позволяет применять эти эффекты только к movie clip. Поэтому кликаем правой кнопкой мыши по нашему объекту и выбираем Convert to Symbol (Перевести в Символ). Используем следующие параметры:

movie clip

Нажимаем Ок. Теперь идем в Панель Свойств. Кликаем на кнопке "+", чтобы добавить фильтры...

Шаг 6. Выбираем фильтр "Drop Shadow (Отбросить Тень)" и используем следующие значения:

drop shadow

Мы создали эффект Внешней Тени. Теперь создадаим Внутренюю Тень. Для этого опять нажимаем "+" и выбираем Drop Shadow (Отбросить Тень), но на этот раз вводим вот такие параметры:

inner glow

Наш основной слой готов, он должен выглядеть так:

Шаг 7. Создадим новый слой и назовем его "bevel". Выбираем опять Инструмент Oval (Овал) и рисуем круг, как на рисунке внизу:

Oval Tool

Закрашиваем Овал Градиентом с установками на Панели Color Mixer, как внизу:

gradient tool

У вас должно получиться что-то такое:

Шаг 8. Опять, используя Инструмент Gradient Transform Tool (F), для поворота градиетной заливки на 90 градусов.

gradient transform tool

Шаг 9. Создаем еще один новый слой и называем его "blue". Он должен быть самым верхним. Панель слое будет выглядеть так:

новый слой

Шаг 10. На этом слое мы будем создавать светящееся голубое стекло. Для начала рисуем круг с помощью Инструмента Oval.

Oval Tool

Теперь, используя все ту же Панель Color Mixer, окрашиваем наш круг в такой Градиент:

gradient tool

У вас должно получиться что-то наподобие этого:

Шаг 11. Мы близки к цели. Создадим еще один слой и назовем его "gloss", нарисуем в нем овал, как на рисунке внизу:

Шаг 12. Выделяем наш новый прямоугольник и задаем для него на Панели Color Mixer следующие параметры. Обратите внимание, что Градиент меняется от Белого к Прозрачному (Для достижения этого эффекта, для начала создаем градиент от Белого к Белому, а затем выставляем значение alpha=0% на конце Градиента).

Oval Tool

У вас должно получиться что-то в этои духе:

Шаг 13. И в очередной раз поворачиваем Градиент на 180 градусов.

Шаг 14. Ну вот и все. Можно поместить какой-нибудь значок (например, как на картинке внизу) на новом слое между "gloss" и "blue". Результат внизу:

Урок переведен автором сайта и при цитировании его на русском языке ссылка на сайта обязательна. Автор www.desktopdeck.com

Другие уроки по Flash >>