Мастер-класс по видео и анимации на Web. Часть II Анимируйся!*
Построение анимированного GIF
Fireworks 2 и ImageReady — идеальные инструменты для создания анимированных GIF-файлов, однако, чтобы строить и оптимизировать рекламные баннеры, достаточно иметь Photoshop, бесплатную программу для построения анимированного GIF и доступ в Сеть…
- Постройте в программе Photoshop новое изображение размером 75×75 пикселов.
Залейте его фон текстурой, после чего создайте второй слой, на котором нарисуйте
или вклейте логотип. В нашем примере мы использовали просто одну букву. Сохраните
файл в формате Photoshop.
- Постройте анимацию, постепенно внося в изображение последовательные изменения.
В нашем примере «логотип» на втором слое понемногу, шаг за шагом, поворачивается
на 360 градусов. На каждом этапе мы сохраняли GIF-версию изображения, но при
этом не сохраняли изменения в исходном Photoshop-файле.
- Чтобы размер файла был как можно меньшим, на всех стадиях нашей анимации
используется одна и та же цветовая палитра. Для этого в первом изображении
мы установили палитру Optimum Indexed, а затем на каждом последующем этапе
использовали опцию Use Previous.
- Остальная часть баннера (а это изображение размером 75×300 пикселов) была
также построена в программе Photoshop и оптимизирована под ту же самую цветовую
палитру. Эта часть окончательного баннера не будет анимироваться, поэтому
мы можем «порезать» его на куски, а затем «собрать» в HTML-редакторе.
- После этого анимированный GIF собирается в программе Microsoft GIF Animator
путем последовательного импорта одного за другим всех изображений. При этом
мы включили параметр Optimum Palette, чтобы сохранить оптимизацию, проведенную
нами в программе Photoshop.
- Чтобы еще больше сократить объем файла, мы посетили сайт GIFcruncher по
адресу http://www.gifcruncher.com.
Этот сайт представляет собой бесплатный Web-сервис по оптимизации изображений.
К примеру, нашу анимацию они сократили в объеме на 6%. После этого окончательный
баннер был собран в программе Dreamweaver.
