Создание кнопки Aqua Interface
Сборка кнопок в Fireworks MX
Опять вспомним не раз повторявшийся совет: "Правильно выбирайте инструмент". Fireworks MX – это специальное приложение, и поэтому рисунок может быть оптимизирован с его помощью для использования в Web-пространстве. Используя слои, управление прозрачностью, множество эффектов и фильтров, рисунок может быть экспортирован в формате. PNG во Flash MX.
Для того чтобы сделать кнопку Aqua Button в Fireworks MX, выполните следующее.
- Откройте новый документ Fireworks и в диалоговом окне создания документа установите для него следующие параметры: ширина – 200 пикселей; высота – 150 пикселей; разрешение – 100; цвет фона – белый. Щелкните на кнопке ОК.
- Выберите в меню File › Import и укажите папку, в которой хранится кнопка, сделанная с помощью FreeHand. Дважды щелкните на файле в окне импорта.
Откроется диалоговое окно Vector Options. Флажки Antialias Paths и Text должны быть установлены. В списке Text Options выберите значение Crisp. Это нужно для того, чтобы текст при импорте не утратил четкости. Щелкните на кнопке ОК.
- Наведите курсор на левый верхний угол холста и щелкните один раз. Рисунок появится на сцене, и откроется панель Layers.
- Выделите форму кнопки на холсте и залейте ее цветом 0000СС. Перетащите область блика на ее место на кнопке. В панели Layers создайте две копии слоя Button. Дайте им осмысленные имена, например Buttonl и Button2. Отключите видимость всех слоев, кроме слоя Reflect.
Совет
Если у вас нет особых соображений по поводу выбора имен для слоев, можете поручить это программе. Для этого вам нужно перетащить копию слоя Button на значок нового слоя, который расположен внизу панели. Появится новый слой с именем Button1. Повторите это еще раз, и у вас будут две копии слоя с автоматически созданными именами. - Блик на кнопке должен затеняться по направлению к центру кнопки. Для того чтобы создать этот эффект, увеличьте масштаб изображения. Откройте слой Reflect и перетащите значок рисунка на значок New Bitmap в нижней части панели. Это создаст копию рисунка точно над оригиналом.
- Выделите новый рисунок. Залейте его линейным градиентом, переходящим от белого к черному. Для этого выберите инструмент Paint Bucket и перетащите маркеры так, чтобы квадратный маркер был над рисунком, а круглый – под рисунком.
- Выделите оба рисунка и выберите в меню Modify › Mask › Group as Mask. Отключите видимость слоев Button и New Riders. Теперь блик на кнопке становится темнее по направлению к низу кнопки.
- Для того чтобы создать иллюзию искривления текста вместе с кнопкой, перетащите слой New Riders под слой Reflect и поместите текст под маской. Можете проверить полученный эффект. Дважды щелкните на инструменте Magnifying › Glass, установив масштаб 100%.
- Выберите слой Button2, выделите объект и отключите его видимость. Выберите в меню Modify › Transform › Numeric Transform › Scale. В открывшемся диалоговом окне Scale снимите флажки Scale и Constrain Proportions.
- Установите коэффициент преобразования по горизонтали 90%, а по вертикали – 40%. Щелкните на кнопке ОК и выберите в окне свойств цвет заливки #CCFFFF.
- Выделите фигуру в слое Button 1. Установите коэффициент преобразования по горизонтали 95%, а по вертикали – 60%. Цвет заливки сделайте #330099. Выделите оба объекта и сгруппируйте их.
- Примените к объекту эффект Gaussian blur радиусом в 8 пикселей, выбрав его из меню Effects в окне свойств. Выберите в меню Effects › Brightness/Contrast и установите ползунок яркости в значение 40, а контраста – в 25.
- Установите для прозрачности сгруппированного объекта значение 90%.
- Создайте тень от букв. Выберите слой New Riders и выделите текст. Щелкните на кнопке Effects в окне свойств и выберите Effects › Shadow and Glow › Drop Shadow. Установите значение Offset, равное 6 пикселям; прозрачность – 50%; Softness – 7; и Angle – 270. Теперь кнопку можно экспортировать во Flash (рис. 17.9).