Как создать анимированную кнопку в ImageReady

В современных сайтах широко применяются технологии анимации элементов управления, от отдельных кнопок перехода до системных анимированных меню всего сайта.

Среди множества инструментов, позволяющих анимировать картинки, кнопки, вкладки меню остановимся на популярной программе ImageReady.

Рассмотрим, основные этапы процесса создания анимированной кнопки.

Прежде всего, графическую кнопку необходимо превратить в ссылку. Затем подготовим ее изображение в программе Adobe ImageReady. Эта программа представляет собой приложение всем известной Adobe Photoshop и запускается нажатием кнопки «Создать в ImageReady».

Изготовление анимированной кнопки начинаем с создания нового документа необходимого Вам размера и прозрачным фоном. Для этого включите команду меню «Файл – Новый». На дисплее появится диалог Новый документ. В полях ввода «Ширина и Высота» введите необходимые Вам размеры в пикселях.

Установите переключатель «Прозрачный», чтобы сделать документ с прозрачным фоном и закройте диалог «Новый документ» нажатием кнопки ОК. Если Вы все правильно сделали, в рабочем окне программы появится окно документа установленных ранее размеров с фоном в виде сероватой шахматной мозаики.

Этот документ состоит только из одного прозрачного слоя, поэтому затем будет необходимо установить выбранный Вами для кнопки цвет из палитры «Каталог». Для этого, щелкните мышью на ярлыке этой палитры, чтобы вывести на экран всю палитру цветов.

При помощи инструмента «Прямоугольник» нарисуйте кнопку нужного Вам размера в пикселях, залитого выбранным цветом, после чего не забудьте обязательно установить флаг «Фиксированный размер».

Нажмите кнопку «Сделать заполненную область» на панели характеристик и нарисуйте нужного размера прямоугольник, перемещая указатель мыши удерживая нажатой ее левую кнопку.

Примените к слою, на котором размещен прямоугольник, эффект «Скос и рельеф», и она получится рельефной.

В поле ввода «Характеристики слоя» введите с клавиатуры заглавие слоя, которое и будет названием кнопки, и нажмите Enter. Наконец обрежьте изображение в окне документа и кнопка готова.

Чтобы кнопка реагировала на разные действия, используйте инструмент «Содержимое Web»: щелкните мышью на соответствующем ярлыке и с помощью команды «Наведение» создайте из отдельных кадров, отражающих то или иное событие, связанное с действиями мышью, анимированный элемент. При обычном состоянии изображения, когда мышь находится вне пределов объекта, анимированная кнопка с надписью будет смотреться как обычный «плоский» прямоугольник.