1 из Примеров работы банера в формате gif изготовленного в фотошопе.

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

Теперь разберем вот этот банер на примере

Банер имеет три этапа подачи информации.

1. Первый текстовый блок "Создать свой сайт" подразумевающий вопросительную информацию.

2. Второй текстовый блок "Может каждый" как бы ответ на него.

3. Сама информационная суть банера. То есть четко сформулированный ответ, где этому научиться))

Создадим новый документ с размерами 468х60 пикселей.

Теперь, помещаем каждую часть информации банера на отдельный слой. (на картинке ниже с дублировали файлы для наглядности, Вы же должны делать это в одном документе, просто располагая слои друг над другом).

Также, нам понадобится пара фоновых изображений, в нашем случае это текстура с синеватыми разводами. Её тоже располагаем на отдельные слои.

Теперь идем в выпадающее меню window и включаем панель Animation.

Здесь отображаются такие же слои, только с возможностью развертывания каждого.

В развернутом состоянии каждый слой имеет несколько параметров.

Position - отвечает за перемещение картинки находящейся на данном слое.

Opaсity - отвечает за прозрачность

Style - отвечает за приминение к картинке слоя стилей, т.е. теней, засветок, выдавливания и другого.

Text wrap(если это текстовый слой) Предназначен для искривления текста.

Каждый из этих параметров, имеет свою временную дорожку, на которой можно располагать маркеры, как-бы фиксируя текущее состояние.

Метод построения анимации прост до безумия. К примеру, нам нужно, чтобы картинка двигалась слева на право. Для этого нажимаем на часы рядом с надписью Position, после чего перемещаем бегунок справа в нужную точку временной шкалы и просто тащим картинку в сторону. Программа сама добавит все нужные кадры. Вам останется всего лишь отрегулировать промежуток времени, при помощи маркеров на временной шкале. Таким же образом работает прозрачность, добавление стилей и искривление текста.

Проделайте этот шаг с анимацией исчезновения текста на первом слое "Создать свой сайт". Если Вы внимательно посмотрите на банер вверху урока, то заметите что помимо исчезновения текста там присутствует еще и засветка. Анимация засветки аналогична действиям прозрачности, но при включенном эффекте засветки outer glow в свойствах слоя. Начальный кадр - засветка с параметром = 0, а в конечном:

Также, на слое есть эффект inner glow, он отвечает за внутреннюю засветку текста. Выполняемые действия идентичны. Начальный кадр - маленькое значение, конечный - большое.

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

И еще один, последний слой под номером 3, на временной шкале начинает действовать, когда второй стал полностью прозрачным.

С первого раза красиво вряд ли получится, поэтому придется постараться, но все приходит с опытом.

После того как каждая из частей будет четко соответствовать своему участку времени, можете считать, что все готово. Теперь нажимаем Ctrl+Shift+Alt+S(Save for Web) и сохраняем наш баннер в формате GIF, он как Вы уже знаете, поддерживает сохранение анимации.