В этой статье я познакомлю вас с принципами создания анимированных gif баннеров при помощи программ Photoshop и ImageReady. Желательно, чтобы вы уже имели некоторый опыт работы с Photoshop, т.к. данная статья в основном посвящена работе с программой ImageReady.

Первое, что необходимо сделать — это разработать сценарий баннера, т. е. решить каким будет фон, что именно будет двигаться. А когда вы все это представили себе, создайте в Photoshop файл с размерами равными размерам баннера. Теперь создаем фон баннера. Он не будет изменяться при анимации. Все остальные элементы баннера, которые будут принимать участие в анимации — текст, изображения поместим в отдельные слои. В самом верхнем слое поместите рамку баннера.

Теперь можно приступать к созданию анимации. Для этого, нажав самую нижнюю кнопку основной палитры программы Photoshop (“Jump to ImageReady” ) или нажав комбинацию клавиш Ctrl+Shift+M, перейдите в ImageReady. Эта программа откроется с уже загруженным в нее баннером.

Программа ImageReady напоминает программу Photoshop, но у нее есть и собственные вкладки. При создании анимации используется вкладка Animation. Созданный нами файл уже помещен в первый кадр вкладки Animation, его увеличенное изображение вы можете видеть на вкладке Original.

Теперь обратим внимание на вкладку Layers. Она выглядит точно также как и в программе Photoshop. Именно с этой вкладкой мы сейчас и будем работать. Например, для того чтобы на баннере мигал текст, в первом кадре слой с текстом сделайте видимым. Перейдите к вкладке Animation и создайте второй кадр анимации, для этого сделайте дубликат первого кадра (кнопка “Duplicates current frame” внизу вкладки Animation). Теперь, для того чтобы текст мигал, сделайте слой с текстом во втором кадре невидимым (щелкните по изображению глаза в слое с текстов на вкладке Layers). Необходимо также указать длительность кадра, для этого нажмите на маленький треугольник под кадром с надписью 0 sec и выберите длительность кадра из раскрывшегося списка. Теперь при помощи кнопки “Plays/stops animation” вы можете уже посмотреть свою анимацию.

Если вы хотите добавить в ваш банер движение или изменение прозрачности, вам не нужно прорисовывать каждый кадр самому. Пусть вы хотите изменить положение какой-либо фигуры. Сейчас она находится в первоначальном положении. Создайте следующий кадр и, в этом кадре передвиньте фигуру. Теперь, при нажатии на кнопку “Tweens animation frames”, вкладки Animation будут созданы промежуточные кадры анимации. После нажатия на эту кнопку откроется вкладка Tween, где в строке Frames to Add необходимо указать желательное количество промежуточных кадров. Таким же методом можно изменять прозрачность фигур. На этих, созданных программой ImageReady кадрах, необходимо, управляя видимостью слоев, показать или скрыть остальные слои, чтобы все соответствовало сценарию.

Когда все необходимые кадры созданы, приступим к оптимизации и сохранению баннера в формате gif. Перейдите на вкладку 4-UP, где вы будете наблюдать за качеством изображения и размером будущего gif файла. Для оптимизации используется вкладка Optimize. На этой вкладке выберем тип файла GIF. Нельзя забывать о том, что баннер, для того чтобы он был принят баннерообменными сетями, должен быть легким. Например, вес баннера размерами 468х60 не должен превышать 15 Kb. Исходя из этого, выберите на вкладке Optimize такое количество цветов, чтобы при хорошем качестве изображения вес баннера был как можно меньшим. Затем, обратившись к главному меню, сохраняем баннер (File- Save Optimized As…). Все — вы создали анимированный gif баннер.

Удачи в создании банеров!