Создание анимированного баннера 88*31

В данном уроке Создание баннера 88*31 без анимации мы с вами уже рассматривали вариант создания простого баннера без анимации. А теперь я попытаюсь вам показать и рассказать, каким способом можно сделать из простого баннера АНИМИРОВАННЫЙ.

Для удобства, чтобы не прыгать из темы в тему, я повторю первые шаги:
1. Создаем документ с размерами баннера. В моем случае это 88*31 пикс.
2. Делаем заливку цветом . Я выбрала синий

3. Теперь можно применить к нему обводку. Выбираем в верхней панели инструментов «Слои» - «Стиль слоя» - «Обводка»
Или
В окне слоев кликаем мышью два раза по слою с заливкой и в открывшемся окне стилей выбираем «Обводка» со следующими параметрами

4. Теперь приступим к написанию текста.
Выбираем инструмент «Текст» и вписываем в окне баннера названием нашего ресурса. Я взяла название форума
DESIGNER FORUM GRAF-ART.RU
Далее подгоняем текст под нужные размеры: размещаем по центру, выбираем тип шрифта, параметры наложения, так же можно применить стили к тексту (обводка, свечение, тиснение и т.д.). Можно добавить какие-то линии или кисти – короче говоря, все то, что подвластно нашей фантазии.
Вот что у нас получилось

5. Теперь начинаем подготавливать наше изображение к созданию анимации. Обратимся с вами в окно слоев. Видим следующее:
1 слой – заливка с обводкой
2 слой с текстом
3 слой с линией

6. Объединяем слой с текстом и слой с линией. Создаем два дубликата этого объединенного слоя.
На первом дубликате стираем текст, который расположен под линией. На втором – стираем то, что над линией и саму линию. Если вы сделали все верно, то в окне слоев у вас должно быть следующее:

7. Начинаем работать с дубликатами слоев.
Слои «Объединение» и «дубликат 1» пока отключаем, с ними мы больше ничего делать не будем.
Переходим к слою «дубликат 2» и дублируем его. Автоматически ему будет дано наименование «Дубликат 2 копия». Отключите слой «дубликат 2», а у слоя «Дубликат 2 копия» сотрите последнюю букву, не трогая линию.

Затем создаем дубликат копии и проделываем предыдущий шаг со следующей буквой.
А потом со следующей, и со следующей…. И так до конца.
Теперь у нас осталась одна линия. Создаем дубликат. Выбираем ластик (круглый мягкий край) и начинаем постепенно стирать линию

И так далее до конца.
8. Переходим в окно анимации. И создаем кадры из слоев.
1 кадр – слой с заливкой (и этот слой обязателен для всех последующих кадров)
2 кадр – слой с самым последним дубликатом (в моем случае дубликат2 копия 19, т.е. самый верхний слой)
3 кадр – слой дубликат 2 копия 18
4 кадр – слой дубликат 2 копия 17
5 кадр – слой дубликат 2 копия 16
И т.д., пока на экране у вас не получится вот такой результат

Далее добавляем еще один кадр и включаем слой дубликат 1
Получится вот что

Теперь жмем кнопку промежуточных кадров и выставляем нужное вам количество. Я выбрала 12.
Создайте еще два кадра и на последнем отключите слои с текстом и линией. И опять добавьте промежуточные кадры.
Далее корректируете время кадров (я сделала по 0.1. каждый). Жмем пуск и проверяем правильность покадровой анимации.
Если все сделали верно и сохранили баннер в формате GIF, то результат должен получиться вот такой