Иногда возникает необходимость на страницу сайта установить анимированную картинку в виде самописного текста нужного содержания. Анимация текста, графики, схем, диаграмм и других объектов подчеркивает различные аспекты излагаемых материалов и делает Web-страницу более интересной и привлекательной.

В этом уроке я расскажу, как создать анимационный текст с помощью графического редактора Photoshop. В результате мы должна получить примерно такую картинку:

1. Сначала нужно написать текст
   
   
2. Создаем еще один прозрачный слой помещаем туда рисунок ручки
   
   
3. Отключаем фон и растрируем текстовый слой 
   
   
4. Копируем каждую букву в отдельный слой
   
   
5. Отключаем видимость слоев всех букв кроме первой
   
   
6. Разрезаем букву на части примерно как на рисунке:
   
   
   и помещает каждый кусок буквы в отдельный слой.
   
   
7. Включаем панель анимации: Окна -> Рабочая среда -> Движение.
   
   
8. Отключаем видимость всех частей буквы, кроме той части, с которой начнется рисование буквы. Перемещаем ручку так, что бы ее перо было в конце видимой части буквы:
   
   
9. Добавляем новый кадр на панели анимации щелчком по копке «Создать копию кадра»
   
   
10. Включаем видимость следующего фрагмента буквы и перемещаем ручку к концу этого фрагмента:
    
    
11. Добавляем новый кадр
12. И так далее, пока не появится вся буква полностью.
13. Вышеперечисленные действия необходимо проделать с каждой буквой текста.
14. В результате получится примерно такая картина:
    
    
15. Выделите все кадры вашей анимации и установите таймер на нужный вам интервал времени и посмотрите как будет работать ваша анимация. Для просмотра щелкните по кнопке «Воспроизвести»:
    
    
16. Последнее, что нужно сделать – сохранить полученную анимацию так: Файл-> Сохранить для Web-устройств. Тут можно поэкспериментировать с качеством gif-файла.

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