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

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

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

Создаем фон

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

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

Вводим текст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Хорошая статья! Я как раз недавно увидела анимированную картинку и задумалась, как ее делали. Попробую все проделать на практике с буквами или чем-то другим.

  2. Классная статья-люблю такие!Люблю терзать Фотошоп и пробовать в нём что-то новенькое для меня.Приятно,что мы с вами земляки-я тоже в ОМСКЕ живу вот уже 37 лет-с рождения!!!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *