Как сделать двигающиеся буквы


Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы



Как создать анимированный текст в 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-анимацию на свой сайт можно так же, как и обычное изображение. Ничего особенного делать не нужно.


Источник: http://otfotoshop.ru/prodvinutyie-uroki/kak-sozdat-animirovannyiy-tekst-v-adobe-photoshop-cs-6


Как сделать двигающиеся буквы фото


Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Как сделать двигающиеся буквы

Читать топ новости: