Создание анимационного текста

Доброго времени суток, уважаемые читатели и посетители блога!

Сегодня поделюсь с Вами созданием анимационного текста в программе Adobe Photoshop CS3. Ведь очень красиво смотрится не просто надпись, а, например, бегущая строка, когда буквы появляются одна за другой.

Как сделать анимационный текст или бегущую строку?

Определимся в первую очередь с размерами анимационной картинки-кадра. Она должна быть небольшого размера и иметь разрешение 72 пикселя на дюйм. Выбираем команду File > New… (Файл > Новый) и устанавливаем ширину (Width) 450 pixels, высоту (Height) 100 pixels, разрешение (Resolution) 72 pixels/inch, Color Mode должен быть RGB Color и цвет фона белый (Background Contents - White). Можно выбрать и такой размер кадра: 300х75 pixels.

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

Теперь напишем какой-нибудь текст. Осталось применить к нему нужный стиль и растеризацию. Для растеризаци ставим курсор на активный слой с текстом. Нажимаем правую кнопу мыши и из контекстного меню выбираем пункт Rasterize Layer (Растеризация слоя).

Теперь у нас уже готовы материалы для создания анимации в программе Adobe Photoshop CS3.

Переходим в режим анимации. Для этого открываем палитру "Анимация" через меню "Окно" (Window - Animation). 

Допустим, мы решили создать бегущую строку.

Для этого передвигаем слой с текстом вправо так, чтобы его не было видно и создаем новый кадр. Передвигаем слой с текстом влево и создаем еще новый кадр и т.д. 

Новый кадр можно создать двумя способами:

1 способ

2 способ:

 Создаем не более 10 кадров, иначе текст будет медленнее "ехать". 

На том кадре, где текст расположен в центре, установим задержку 0,5 сек. 

Теперь сохраним нашу анимацию: Файл - Сохранить для Веб и устройств – Сохранить.

Если мы решили, чтобы у нас буквы появлялись поочередно, тогда инструментом Polyggonal Lasso Tool ("Прямоугольное лассо") делаем выделенную область произвольной формы вокруг первой буквы.

Вырезаем выделенный фрагмент командой Редактирование > Вырезать (можно нажатием клавиш Ctrl+J)  и вставляем копию командой Редактирование > Вклеить. На палитре слоев появится новый слой с копией первой буквы.

Возвращаемся на слой с надписью. Эту операцию повторяем со всеми буквами поочередно.

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

Через меню "Окно" (Window - Animation) открываем палитру "Анимация". Вначале внизу в окошке анимации будет отражаться первый кадр.

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

Можно для первого кадра добавить 0,5 сек. задержки, для последнего - 1 сек. Остальные кадры оставляем без изменения: 0 сек. 

Количество кадров зависит от количества букв. У меня, например, получилось 8 кадров.

Включаем анимацию и сохраняем файл для web и (Файл - Сохранить для web и устройств).

Вот что у меня получилось:

Если слой с текстом сделать видимым через кадр (на первом кадре слой с текстом включен, на втором - отключен и т.д.), то может получится мерцающий текст:

Желаю творческих успехов!