Создаем рисующийся текст в AE
Данная статья представляет собой урок по использованию текстовых слоёв в Adobe After Effects 6.5 и ориентирована на начальный уровень пользователя. Будет рассмотрен эффект написания текста, когда буквы появляются, словно их пишут маркером, а так же использование новой возможности для анимации текста After Effects 6.5 – Text Presets Gallery. По мере создания проекта будут даны некоторые советы и пояснения, относящиеся к работе в АЕ в целом и направленные на повышение эффективности работы данной программе. Предполагается, что пользователь, читающий данный урок, свободно ориентируется в интерфейсе пакета АЕ 6.5 и владеет необходимой терминологией.
Готовый файл проекта, который будет создан в процессе урока, доступен здесь.
Вместе с версией 6.5 поставляются библиотеки предустановок для анимации текста. Существующую теперь возможность использования готовых анимаций сложно переоценить, поскольку раньше текст приходилось анимировать «вручную» и на повторение отдельных пресетов, содержащихся в библиотеке уходило очень много времени, а исполнение некоторых было вовсе невозможно без знания алгоритмических выражений. Рассмотрим на практике, как можно использовать предустановки анимаций текста. Создайте проект и, нажав Ctrl+N, новую композицию со следующими настройками:
Следует обращать внимание на название композиций и не оставлять их по умолчанию Comp1, Comp2… В конкретном проекте это, может быть, и не важно, но число композиций проекта зачастую насчитывает несколько десятков и разобраться в просто пронумерованных композициях очень сложно.
Выбрав инструмент Text панели Tools (Ctrl+T), щёлкните им в окне Monitor. На Timeline автоматически появится текстовый слой. Введите произвольное словосочетание.
В главном меню выполните команду Help>Text Presets Gallery.
Далее следует выбрать любой из представленных разделов. Вашему вниманию будет предоставлена таблица из AnimatedGIF изображений с названиями каждого пресета, где можно визуально ознакомиться с той или иной анимацией текста.
Просмотрите все разделы, чтобы составить общее представление о возможностях анимации текста с помощью готовых библиотек.
Для того чтобы применить любой из пресетов следует запомнить его название, а также название раздела, в котором этот пресет находится. Далее, при выделенном текстовом слое, выполните команду главного меню Animation>Apply Animation Preset. Откроется директория Text из каталога установленной программы АЕ, где нужно будет выбрать тот пресет, который вы запомнили при просмотре библиотеки. Названия директорий в открывшейся папке Text соответствует названиям разделов Text presets gallery. Выбранная анимация будет применена к выделенному текстовому слою. Альтернативным способом применения предустановок может служить вызов окна Effects & Presets (Ctrl+5), где в разделе Animations presets можно найти все доступные предустановки. Для применения любой из них достаточно дважды щёлкнуть на пресете при выделенном текстовом слое или просто перетащить предустановку на слой.
Нажмите num0 для просмотра анимированного текста в окне Monitor. Не сложно вообразить возможности применения такого объёма готовых анимаций текста.
Теперь отмените применение последней анимации или удалите слой и создайте новый. Примените к нему пресет Current Time Format из директории Expressions. Обратите внимание, что в этом случае не важно, какой именно текст содержался в слое. Этот пресет построен на основе алгоритмического выражения (Expression), формирующего текстовые символы (цифры) в зависимости от положения линия редактирования и визуализирует, так сказать, текущее положение последней. В палитре Characters поставьте размер текста, равный 30 и поместите сам текст в левый нижний угол изображения.
В качестве Background используется композиция, созданная в рамках этого же проекта и к непосредственной теме урока не относящаяся.
Далее создаётся ещё один текстовый слой, который будет имитировать текст, написанный маркером. Можно использовать любой шрифт, напоминающий подобную надпись. В данном случае использовался шрифт Freeport с размером 170. Набор текстовых символов вполне соответствует теме статьи.
Теперь задача состоит в том, чтобы заставить этот текст появляться постепенно, как при реальном написании. Существует несколько способов достичь подобного результата, здесь будут использованы возможности инструмента Brush, появившегося в АЕ версий 6.х.
Теперь дважды щёлкните на слое EXAMPLE Outlines на линейке Timeline, чтобы переключиться в окне Monitor с композиции All Text на окно слоя. Можно приступать к рисованию. На панели Tools выберите инструмент Brush (Ctrl+B) и установите для него следующие настройки:
Для более комфортного достижения результата следует увеличить масштаб изображения в окне Monitor до 200% однократным нажатием на клавишу «>».
Задача состоит в том, чтобы последовательно «закрасить» весь текст «EXAMPLE», а затем анимировать штрихи кисти. Причём делать это нужно в той последовательности и направлениях, как если бы вы писали этот текст маркером. То есть буква «Е», например, должна состоять из трех штрихов.
Первый штрих – сверху и направо, по вертикальному и нижнему сегменту буквы «Е», затем по среднему и по верхнему коротким сегментам. Просто вообразите, как бы вы писали эти буквы маркером и в той же последовательности закрашивайте их инструментом Brush. Имейте в виду, что в какой последовательности и в каких направлениях вы будете наносить штрихи, по такому же принципу потом будут «писаться» буквы. При использовании инструмента Brush внутри того слоя, на котором производится рисование, образуются так называемые вложенные слои, причём их число равно количеству штрихов. Пока у нас только три штриха (закрашенная буква «Е»).
В дальнейшем число штрихов и, соответственно, вложенных слоёв Brush1, 2, 3… в данной композиции достигнет 14, и чтобы совершенно в них не запутаться, можно анимировать их по мере закрашивания каждой буквы. Итак, чтобы добиться «прорисовки» штрихов нужно анимировать параметр «End» в группе Stroke Options на Timeline. Для этого щёлкните последовательно на соответствующих треугольниках на Timeline.
Теперь измените «End» со 100% до 0 и поставьте первый ключевой кадр принудительно, нажав на изображение часов в строке «End». Обратите внимание, что линия редактирования должна находиться на нулевом кадре Timeline.
Логично, что сам штрих, параметр «End» для которого равен 0, исчез в окне Monitor. Теперь переместитесь по шкале времени на 4 кадра вперёд, четырежды нажав Page Down, и введите значение равное 100% для параметра «End». Ключевой кадр сформируется автоматически, обеспечивая плавное изменение параметра «End» между 0-вым и 4-тым кадром от 0 до 100%. Что и обеспечит прорисовку 1-го штриха.
Таким образом, в промежутке между 0-ым и 8-ым кадром прорисуются все три штриха буквы «Е», обеспечивая в дальнейшем «написание» самой буквы. Далее следует повторить рисование и анимирование штрихов для всех букв слова Example. Должна получиться такая картина.
Обратите внимание, что на закрашивание букв «М» и «L» понадобилось по одному штриху, поскольку при реальном написании этих букв так же не пришлось бы отрывать маркер от бумаги. Подготовка закончена. Можно удалить все маски со слоя Example outlines. Для этого нажмите М при выделенном слое и, выделив все маски, нажмите Delete. Не снимая выделения со слоя, нажмите Shift+Ctrl+T, чтобы получить доступ к палитре Effect Control слоя Example outlines. Поставьте галку Paint on Transperent, чтобы сделать прозрачным слой Example outlines. Переключите закладку окна Monitor c Example outlines на All Text. На нулевом кадре вы должны наблюдать такую картину:
Теперь нужно использовать слой со штрихами в качестве Track Matte (движущейся маски) для текстового слоя Example.
Нажмите num0, чтобы увидеть, как будет прорисовываться текст:
Как добавить текст в After Effects и изменить его некоторые свойства
Ну вот и настало время для пятого урока мини курса по основам After Effects. Из этого урока вы узнаете, как добавить текст в After Effects, а также познакомитесь с некоторыми свойствами текста.
В программе After Effects вы можете добавить текст различными путями, и делается это при помощи добавления нового слоя. О том, как работать со слоями, вы можете узнать из урока про слои в After Effects.
Вставка текста в After Effects
Самый простой способ, это зайти в меню Layer, выбрать пункт New, и затем Text, или, еще проще, нажмите Ctrl+T.
Далее, в окне предпросмотра, выберите, куда именно вы хотите вставить текст. После этого вы сможете набрать нужный вам текст. Вот собственно и все.
Но я сомневаюсь, что это всё, что вы хотели знать, а потому, давайте пройдемся дальше.
Как изменить свойства текста в After Effects
Для начала давайте изменим шрифт. Чтобы выбрать новый шрифт, выделим наш текст (только наполовину), а затем снова перейдем к нашей вкладке Character и выберите новый шрифт. Здесь же вы сразу можете увидеть, как будет выглядеть выбранный вами шрифт. Я собираюсь выбрать шрифт под названием Bebes Neue, но вы можете выбрать любой другой.
Теперь вы можете заметить, что только выделенная часть текста изменила шрифт. Дело в том, что для любых операций с текстом, вы должны его выделить.
Прямо под выбором шрифта, вы можете выбрать его стиль: жирный, тонкий, курсив. Это очень похоже на то, что вы делаете в программе Word или в почти любом другом текстовом редакторе.
Справа от выбора шрифта и стиля, вы можете выбрать цвет шрифта.
В следующем блоке вы можете изменить размер шрифта, межстрочный интервал, интервал между двумя соседними символами, и межсимвольный интервал.
Ниже мы имеем ширину окантовки. Этот параметр, определяет, какая будет ширина ее, также вы можете задать ее цвет. Для выбора цвета вам нужно «развернуть цвет», щелкнув на двойную стрелочку и выбрав другой цвет.
Далее идет блок со свойствами параграфа, в котором вы можете задать выравнивание абзаца, отступ и другие параметры.
Добавление анимации к тексту в After Effects
Поскольку мы все таки имеем дело с программой для создания эффектов в видео, то мы можем добавить и некоторые эффекты. Для этого выберите кнопку Animate в свойствах текста, и выберите соответствующий эффект
Тут довольно много различных эффектов, попробуйте различные из них, в том числе, используя ключевые кадры для создания анимации. Есть много действительно простых и мощных эффектов, которые вы можете придать своему тексту только из этого меню.
Добавление фона к тексту.
Теперь давайте попробуем добавить свой фон к тексту. Для этого, нажмите клавишу Q, и мышкой проведите за текстом. Вы должны получить что-то вроде этого. Это так называемый Shape Layer.
Переместите его на слой ниже слоя с текстом.
Измените цвет фона.
И теперь, объедините текстовый слой и его фон в один слой. Для этого выделите оба слоя, вызовите контекстное меню, и выберите пункт – Pre-compose.
Великолепно! Вот вы и смогли добавить свой текст в ваш проект в программе After Effects. А также вы теперь знаете, как придать ему некоторые свойства, и как сделать анимацию.
Анимируем текст в After Effects: по шаблонам и самостоятельно
В After Effects есть коллекция готовых текстовых эффектов, но анимировать текст можно и вручную. Рассказываем, зачем и как это сделать.
Где пригодится анимация текста
Если вы заинтересованы прогрессивным дизайном в digital и хотите зарабатывать на своих умениях, обратите внимание на курс «Анимация интерфейсов» от Skillbox.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Дальше — пошаговая инструкция по применению и созданию таких эффектов.
Вот что у вас получится в конце урока:
Создание проекта
Начните с создания проекта и композиции: File — New — New Project. Затем выберите New Composition.
Появится экран настроек: конечно, вы можете задать свои. Frame Rate — это количество кадров в секунду, параметр отвечает за плавность анимации: чем он выше, тем плавнее анимация. Duration — продолжительность анимации.
Текстовый слой
Выберите на панели инструментов Type Tool. Также вы можете использовать горячие клавиши Ctrl+T или кликнуть правой кнопкой мыши по панели слоев и в контекстном меню выбрать пункт New — Text.
Наберите текст, к которому будете применять эффекты.
С помощью инструментов выравнивания расположите текстовый слой по центру.
Текстовые эффекты из коробки
Теперь рассмотрим несколько наиболее интересных, на мой взгляд, стандартных текстовых эффектов.
Decoder Fade In
Это эффект «перебора букв», вот такой:
Перейдите на панель Effects & Presets и выберите категорию Animation Presets, подкатегорию Animate In и эффект Decoder Fade In.
Применить эффект можно двумя способами — выберите текстовый слой и дважды нажмите на эффект или зажмите нужный эффект курсором и перетащите его на текстовый слой.
Нажмите на пробел и посмотрите, что получилось. Показом анимации также можно управлять вручную, перетаскивая синий маркер на панели Timeline. Подобный эффект часто используется в фильмах: в титрах и непосредственно в кадре.
Отключите эффект в настройках слоя. Вы сможете снова включить его в любой момент, но пока что давайте попробуем другие виды анимации.
Нет смысла подробно описывать здесь все стандартные эффекты программы, в каталоге есть много подкатегорий. В каждой вы найдете подборку тематических эффектов.
Создание и редактирование текстовых слоев
Сведения о текстовых слоях
В композицию можно добавлять текст, используя текстовые слои. Текстовые слои удобны для многих целей, включая создание анимированных заголовков, бегущей строки, титров в нижней трети экрана и динамической печати.
Можно анимировать свойства целых текстовых слоев или свойства отдельных символов, например цвет, размер и положение. Анимация текста осуществляется с помощью свойств текстовой анимации и инструментов выбора. 3D-текстовые слои также могут содержать 3D-подслои, по одному для каждого символа. (См. разделы Анимация текста с помощью текстовых аниматоров и Посимвольные 3D-свойства текста.)
Текстовые слои являются синтетическими слоями, т. е. текстовый слой не использует элемент видеоряда в качестве источника, хотя текстовую информацию из некоторых типов видеоряда можно преобразовать в текстовые слои. Текстовые слои также являются векторными слоями. Подобно слоям-фигурам и другим векторным слоям, текстовые слои всегда непрерывно растрируются, поэтому при масштабировании слоя или изменении размера текста он сохраняет четкие, независимые от разрешения края. Невозможно открыть текстовый слой на его собственной отдельной панели «Слой», но можно работать с текстовыми слоями на панели «Композиция».
After Effects использует два типа текста: строчный текст и текст абзаца. Строчный текст полезен для ввода одного слова или строки символов; текст абзаца полезен для ввода и форматирования текста как одного или нескольких абзацев.
Можно копировать текст из других приложений, например Adobe Photoshop, Adobe Illustrator или Adobe InDesign, или из любого текстового редактора и вставить его в текстовый слой After Effects. Поскольку After Effects поддерживает кодировку Unicode, символы в этой кодировке можно копировать между After Effects и любым другим приложением с поддержкой Unicode (включая все приложения Adobe).
Форматирование текста включается в свойства исходного текста. Свойства «Исходный текст» можно использовать для анимации форматирования и изменения символов (например, изменения буквы b на c).
After Effects автоматически синхронизирует отсутствующие шрифты с использованием имеющихся шрифтов. Диалоговое окно «Разрешить шрифты» отображается при открытии проекта, в котором используются неустановленные шрифты. Если шрифты доступны в Adobe, можете выбрать их автоматическую синхронизацию с учетной записью Creative Cloud и установку. After Effects заменяет шрифты, которые недоступны в сети, шрифтом по умолчанию.
Начиная с версии After Effects CC, выпущенной в апреле 2017 года, при установке After Effects набор шрифтов не устанавливается. Шрифты, установленные вместе с предыдущими версиями After Effects, например Adobe Myriad Pro, остаются доступными в рамках подписки на Creative Cloud через шрифты Adobe.
Рекомендации по созданию текста и векторной графики для видео
При создании текста на мониторе компьютера он может смотреться хорошо, но его качество может существенно ухудшиться при просмотре в конечном фильме. Причина этому может заключаться в различии параметров устройств для просмотра фильма, а также схем кодирования при сжатии фильма. Такой же эффект может проявиться и в случае с другими элементами векторной графики, например на фигурах в слоях-фигурах. В действительности эти проблемы могут возникнуть и в растровых изображениях, но мелкие и резкие детали векторной графики приводят к таким искажениям чаще всего.
В процессе создания и анимирования текста и векторной графики для видео нужно иметь в виду следующие аспекты.
Необходимо всегда предварительно просматривать фильм, используя видеоустройства, на которых предполагается его демонстрация в дальнейшем, например на видеомониторе NTSC. (См. раздел Предпросмотр на внешнем видеомониторе).
Следует избегать резких цветовых переходов, особенно от высоко насыщенного цвета к его дополнительному цвету. Многие схемы сжатия, например MPEG и JPEG, с трудом кодируют резкие цветовые переходы. Эти схемы сжатия могут привести к появлению визуального шума в местах резких переходов. В аналоговом телевидении такие же резкие переходы могут вызвать импульсные всплески за пределами допустимого диапазона сигнала, что также приводит к появлению шума.
Если текст должен размещаться поверх движущегося изображения, он должен иметь контрастные края (такой эффект достигается с помощью свечения или обводки), в таком случае он останется различимым при появлении фона такого же цвета.
Следует избегать использования тонких горизонтальных элементов, так как они могут исчезать из кадра при нахождении на четной линии сканирования при нечетном поле или наоборот. Например, толщина горизонтальной планки в прописной букве H должна быть не менее трех пикселей. Можно увеличить толщину горизонтальных элементов с помощью увеличения размера шрифта, полужирного (или псевдополужирного) стиля или обводки. (См. раздел Форматирование символов с помощью панели «Символ».)
При перемещении текста по вертикали (например, при прокрутке титров), обеспечьте скорость прокрутки в пикселах в секунду, которая является четным кратным от скорости смены полей в формате видео с чересстрочной разверткой. Выбор такой скорости перемещения позволяет предотвратить искажения в результате расфазировки перемещения текста со строками развертки. Для NTSC оптимальными будут значения 0, 119,88 и 239,76 пикселей в секунду; для PAL — 0, 100 и 200 пикселей в секунду.
С помощью шаблона настроек анимации «Автопрокрутка — по вертикали» в категории «Поведение» можно быстро создать эффект вертикальной прокрутки текста (например, титров фильма).
К счастью, многие проблемы с текстом в видео и сжатых видеоформатах можно решить одним простым методом — применением размытия к текстовому слою. Легкое размытие сглаживает переходы между цветами и увеличивает видимую толщину горизонтальных элементов. Эффект «Уменьшить мерцание в чересстрочной развертке» лучше всего подходит для уменьшения дрожания; эффект заключается в применении вертикального направленного размытия, при этом в горизонтальном направлении размытия не происходит. Это позволяет лучше сохранить качество изображения, чем при использовании других видов размытия.
Полезные советы Филипа Ходжеттса (Philip Hodgetts) для получения хороших результатов при создании текстовой или векторной графики для видео можно найти на веб-сайте Creative COW.
Сценарии и выражения для работы с текстом
В этом разделе перечислены методы создания сценариев для работы с текстом и приведены ссылки на популярные сценарии и учебные пособия.
Создание одного или нескольких текстовых слоев на основе содержимого текстового файла
Кристофер Грин (Christopher Green) предлагает на своем веб-сайте сценарий (crg_Text_from_File.jsx), который позволяет создавать один текстовый слой из всего текста, так и по одному слою для каждой строки в текстовом файле. Сценарий также содержит параметры для пробелов между словами и начальных пробелов.
Доступ к опорным линиям текста из сценариев
Можно считывать местоположения базовой линии (x,y) для текста, создавая сценарии с помощью обновления After Effects CC 2015 (13.6). Новый атрибут sourceText.value.baselineLocs для объектов TextDocument возвращает массив чисел с плавающей запятой, указывающих координаты (x,y) начального положения базовой линии каждой строки текста плавающих объектов отображение начальное положение каждой строки текста.
Строка с переносами в рамках текстового поля рассматривается как несколько различных строк.
Массив возвращает значения с плавающей запятой в форме:
line0.start_x, line0.start_y, line0.end_x, line0.end_y, line1.start_x, line1.start_y, line1.end_x, line1.end_y … lineN-1.start_x, lineN-1.start_y, lineN-1.end_x, lineN-1.end_y
Если строка не содержит символов, то координаты (x,y) начала и конца соответствуют максимальному значению с плавающей запятой (3,402823466e+38F).
Улучшения сценариев для текстовых слоев
Благодаря разработке сценариев теперь можно прочитать дополнительную информацию о шрифте и стиле, используемых для текстового слоя, включая местоположение файла шрифта на диске.
Ниже приводятся атрибуты объекта textDocument, доступные только для чтения:
Возвращается значение для первого символа в текстовом слое в заданный момент времени.
Редактирование исходного текста текстовых слоев
Этот сценарий выводит на экран палитру для редактирования текста текстовых слоев в форме без стиля. Если в текстовом слое используется сложная анимация, или доступ к нему осложнен, или в настоящее время этот слой скрыт, рекомендуется редактировать текст, когда анимация или стиль отключены.
Загрузите сценарий с сайта Джеффа Алмасола (Jeff Almasol): Redifinery.
Сопоставление текстового файла с маркерами
Этот сценарий сопоставляет строки из текстового файла как ключевые кадры исходного текста на выделенном текстовом слое с последовательными маркерами на слое. Можно управлять нужной строкой текста, указывая номер строки в комментарии маркера.
Загрузите сценарий с сайта Джеффа Алмасола (Jeff Almasol): Redifinery.
Интеллектуальные функции
Этот сценарий показывает панель с элементами управления для вставки пунктуации «обычного текста» в «интеллектуальные» типографские представления (например, (c) преобразуется в символ авторского права ©).
Загрузите сценарий с сайта Джеффа Алмасола (Jeff Almasol): Redifinery.
Другие сценарии для работы с текстом
Тодд Коприва (Todd Kopriva) предоставляет на веб-сайте Adobe пример сценария, демонстрирующего функции форматирования текста, доступные в интерфейсе сценариев.
На веб-сайте After Effects Scripts Салахуддин Таха (Salahuddin Taha) предлагает сценарий для ввода арабского текста (направление письма справа налево).
На веб-сайте After Effects Scripts представлен сценарий Михаэля Кардейро (Michael Cardeiro), создающий несколько версий композиции с использованием информации из электронной таблицы или базы данных. Сценарий просматривает строка за строкой электронную таблицу и создает новые версии композиции с текстовыми слоями композиции, считываемыми автоматически из электронной таблицы.
На веб-сайте After Effects Scripts можно найти много других сценариев для работы с текстом. Пол Терслей (Paul Tuersley) предлагает на веб-сайте After Effects Scripts сценарий для поиска и редактирования текстовых слоев в проекте After Effects, создания собственных текстовых шаблонов настроек и применения их к нескольким слоям.
На форуме AE Enhancers Пол Терслей (Paul Tuersley) разместил сценарий для импорта файлов караоке Substation Alpha (SSA) и автоматического создания на их основе текстовых слоев.
Ввод строчного текста
При вводе строчного текста каждая строка является независимой, т. е. при редактировании увеличивается или уменьшается длина строки, но переноса на другую строку не происходит.
Строчный текст создается с использованием свойств, установленных на панели символов. Эти свойства можно впоследствии изменить, выделив текст и изменив параметры на панели символов.