Как создать анимированый текст в Adobe Photoshop CS 6

Двигающиеся картинки в  интернете мы чаще всего встречаем на рекламных банерах и поздравительных открытках. В фотошопе есть отличный инструмент для создания gif-анимации. В этой пошаговой инструкции я поделюсь, как создать анимированный текст в Adobe Photoshop CS 6.

Этап 1. Подготовительный

Создаем фон

Я выбрала параметры документа WEB, установив размер 800х300 пикселей.

Вводим текст

Каждая буква должна находится на отдельном слое. Для удобства я расположила их снизу вверх в том порядке, в котором они стоят в слове.

 В итоге подготовительного этапа у меня получилось 7 слоев: фон и каждая буква из слова.

Этап 2. Анимация

Шаг 1. Добавляем рабочую область

Чтобы заставить буквы двигаться, нужно достать специальные инструменты для анимации. Для этого заходим в опции «Окно«, далее «Рабочая среда» и выбираем «Движение» (в других версиях «Анимация»).

После этого к  привычным настройкам рабочего пространства фотошопа добавляется особая панель.

Шаг 2. Переходим в режим раскадровки

Для этого нажимаем заначек в нижнем левом углу панели анимации.

После этого вы увидите такую панель:

Шаг 3. Создаем дубликаты кадров

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

Я создала 7 кадров для каждой буквы и фона.

Шаг 4. Задаем порядок появления каждой буквы

Чтобы в нужное время в нашей анимированной картинке появлялась нужная буква, будем выполнять несколько операций:

1. Выделяем кадр на шкале времени.
2. Включаем видимость тех слоев, которые должны быть в кадре, остальные отключаем.
3. Выделяем слои на панели слоев, которые должны отображаться в кадре.

В 1-ом кадре выделен  только фон, он видим, остальные слои отключены.

Во 2-ом кадре выделены и видимы уже два слоя: фон и первая буква слова.

В 7-ом кадре будут выделены и видимы все слои.

В итоге получилась такая лента из 7 кадров.

Шаг 5. Выставляем время показа каждого кадра

Для первого и последнего кадра я выбрала время 0,5 сек, для остальных 0,2 сек.

Шаг 6. Выбор параметров цикла

Для того чтобы движение букв не прекращалось, нужно установить «Постоянно».

Теперь можно посмотреть результат проделанной работы. Нажмите в нижней строке панели стрелку «Запуск воспроизведения анимации».

Этап 4. Сохраняем анимированный текст

Для этого в меню Файл выбираем Сохранить для Web. В открывшемся окне можно еще раз посмотреть полученный результат, изменить цветовые параметры, формат и другое. Я выбрала стандартные установки.

Загрузить gif-анимацию на свой сайт можно так же, как и обычное изображение. Ничего особенного делать не нужно.