Стили слоя в After Effects (Layer Styles) для анимации красивого текста +проект

Ссылки, описания, дополнительная информация для моих уроков на YouTube
Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

Стили слоя в After Effects (Layer Styles) для анимации красивого текста +проект


Теги:

Сообщение #1 aeplug » 25 окт 2019, 11:11

Эффектный стиль для текста в After Effects (Layer Styles, Trine 4).jpg
Эффектный стиль для текста в After Effects (Layer Styles, Trine 4).jpg (33.16 КБ) 12908 просмотров
Эффектный стиль для текста в After Effects (Layer Styles, Trine 4).jpg
Эффектный стиль для текста в After Effects (Layer Styles, Trine 4).jpg (33.16 КБ) 12908 просмотров

Используя возможности Стили Слоя в After Effects (Layer Styles), можно делать разные интересные эффекты для прозрачности и украшать текст. Думаю, новичкам будет интересно и полезно узнать, как это можно самому сделать для своих проектов. В этом уроке для начинающих я как раз и показываю такой способ создания красивого стиля для текста. За образец взята анимация текста, увиденная мной в трейлере игры "Trine 4 - The Nightmare Prince". Да и вообще, такое оформление для текста часто используется в трейлерах и титрах. Даже можете скачать проект урока и изучить его самостоятельно, там есть простая анимация текста в After Effects.
https://www.youtube.com/watch?v=bjJChN0iV-8

Содержание урока:


00:51 Создание текста
01:22 Делаем обводку Stroke
02:39 Делаем выдавливание Скос и тиснение/Bevel And Emboss
03:19 Создаем анимированную заливку для текста эффектами Gradient Ramp и Fractal Noise
04:44 Все повторяем для композиции обводки
05:39 Вешаем Стили слоя/Layer Styles - Внутренняя тень/Inner Shadow
07:07 Дублирование текста для новых блоков текста, скрипт True Comp Duplicator
08:22 Пример анимации с использованием сделанного текста

Trine 4 - The Nightmare Prince.jpg
Trine 4 - The Nightmare Prince.jpg (24.6 КБ) 12904 просмотра
Trine 4 - The Nightmare Prince.jpg
Trine 4 - The Nightmare Prince.jpg (24.6 КБ) 12904 просмотра

Впервые, насколько я помню, Стили слоя появились в Photoshop много лет назад и стали очень популярны, так как позволяли быстро менять, создавать свои и использовать чужие пресеты для текста или графических элементов. Позднее их добавили и в After Effects, но в немного урезанном виде, хотя это и не мешает использовать эти возможности для анимации текста. И в этом видеоуроке мы подробнее рассмотрим несколько таких подвидов для стандартного стиля слоев (Layer Styles), которые имеются в After Effects, и научимся настраивать их для создания текстовой анимации:
  • Обводка (Stroke)
  • Внутренняя тень (Inner Shadow)
  • Скос и тиснение (Bevel And Emboss)
  • Так же я буду использовать стандартные эффекты Gradient Ramp и Fractal Noise для переливчатой заливки внутри текста
 ! Сообщение от aeplug
Я сам использую и всем советую только английскую версию After Effects, но у меня есть перевод названий всех эффектов для After Effects с русского на английский и назад.
http://aeplug.ru/forum/viewtopic.php?t=73

Поскольку в уроке я уделяю внимание в основном только самим стилям слоя непосредственно, то у начинающих в After Effects могут возникнуть разные вопросы, которые я не стал размусоливать в очередной раз. Лучше смотрите список уроков у меня на канале YouTube, где мы все это уже проделывали раньше. И не забывайте подписываться ;)



Начинаем мы как обычно с создания новой пустой композиции только для текста TEXT, ее мы будем использовать потом и как основу для заливки, и как основу для создания обводки. Текст, который находится здесь, можно будет быстро менять, и он автоматически обновится во всех других композициях с эффектами. Вводим тут нужный текст, выбираем шрифт, размер и вкладываем эту композицию в новую для эффекта обводки STROKE.
Применение Стиля Слоя Stroke к тексту.jpg
Применение Стиля Слоя Stroke к тексту.jpg (34.35 КБ) 10837 просмотров
Применение Стиля Слоя Stroke к тексту.jpg
Применение Стиля Слоя Stroke к тексту.jpg (34.35 КБ) 10837 просмотров

Чтобы сам текст не было видно в слое для обводки в его настройках Blending Options - Advanced Blending убираем на ноль параметр Fill Opacity. Так как для создания нужного эффекта я разделил текст на две отдельные части: обводка и заливка. Эти два слоя мы будем совмещать потом в финальной композиции.
Advanced Blending - Fill Opacity.jpg
Advanced Blending - Fill Opacity.jpg (15.02 КБ) 10837 просмотров
Advanced Blending - Fill Opacity.jpg
Advanced Blending - Fill Opacity.jpg (15.02 КБ) 10837 просмотров

Теперь композицию с обводкой еще раз вкладываем в новую композицию вместе с первой основной композицией для букв. И применяем к обводке Скос и тиснение (Bevel And Emboss). Таким образом у нас получается как бы два уровня стиля слоев на тексте - один для основы обводки и второй для выпуклости по ее краям, но все они по-прежнему зависят от главного первого текста и будут меняться автоматом вслед за ним, что очень удобно, когда нужно делать много таких титров на видео. Но об этом ниже.
Скос и тиснение (Bevel And Emboss).jpg
Скос и тиснение (Bevel And Emboss).jpg (39.59 КБ) 10837 просмотров
Скос и тиснение (Bevel And Emboss).jpg
Скос и тиснение (Bevel And Emboss).jpg (39.59 КБ) 10837 просмотров

Пример текста 1.jpg
Пример текста 1.jpg (14.16 КБ) 10837 просмотров
Пример текста 1.jpg
Пример текста 1.jpg (14.16 КБ) 10837 просмотров

Приступаем к созданию заливки, для повторения внешнего вида образца из Trine 4 я выбрал для нее три эффекта:
  • Базовый эффект линейного градиента Gradient Ramp.
  • Генератор фрактального шума Fractal Noise для создания неровной поверхности в режиме Overlay, чтобы градиент проглядывал сквозь шум.
  • Эффект Tritone окончательно перекрашивает полученное в зависимости от яркости черно-белого изображения по трем параметрам.
Так же я быстро проанимировал изменение Fractal Noise для заливки параметров Evolution (просто добавил выражение time*100 для бесконечного движения этого эффекта), чтобы текст выглядел более магически с текстурой разных завихрений энергии внутри.
Пример текста с эффектами заливки.jpg
Пример текста с эффектами заливки.jpg (117.39 КБ) 10837 просмотров
Пример текста с эффектами заливки.jpg
Пример текста с эффектами заливки.jpg (117.39 КБ) 10837 просмотров

Для композиции с обводкой можно применять тот же прием с градиентом и фрактальным шумом. Получится еще больше деталей по краям, и текст будет выглядеть намного интереснее, более состаренным за счет таких текстур на его поверхности. И чтобы обводка казалось выступающей над текстовой базой, как бы трехмерной, еще следует добавить Внутренняя тень (Inner Shadow) на заливку.
Пример текста с тенями.jpg
Пример текста с тенями.jpg (44.69 КБ) 10837 просмотров
Пример текста с тенями.jpg
Пример текста с тенями.jpg (44.69 КБ) 10837 просмотров


Можно сказать, что с текстом мы закончили, теперь и вы знаете, как сделать красивую анимацию текста, но вот вам еще один полезный совет про копирование композиций. Как мне подсказывает опыт, с этим у многих возникают проблемы, и не все понимают разницу между клонированием для слоев и для композиций. У меня даже есть парочка уроков и на эту тему.

Так как как финальный текст является набором из трех связанных композиций, чтобы продублировать их для нового текста, надо клонировать их все. Для этого удобно использовать бесплатный скрипт True Comp Duplicator, он САМ скопирует не только главную, но и все вложенные композиции и сохранит взаимосвязи между ними. Потом останется только менять текст в конкретной базовой композиции.
Скрипт True Comp Duplicator.jpg
Скрипт True Comp Duplicator.jpg (41.41 КБ) 10837 просмотров
Скрипт True Comp Duplicator.jpg
Скрипт True Comp Duplicator.jpg (41.41 КБ) 10837 просмотров

На сайте aescripts.com очень много полезных скриптов: бесплатных и за деньги. Если вы не знаете, как скачивать оттуда, то вот вам урок, объясняющий это:

А кроме текста можно использовать этот стиль слоя и на любые другие изображения с прозрачностью и четкими краями, например логотипы или иконки, если нужно их стилизовать похожим образом.
ракета.jpg
ракета.jpg (19.93 КБ) 12904 просмотра
ракета.jpg
ракета.jpg (19.93 КБ) 12904 просмотра

Еще больше уроков по анимации текста в After Effects, где разбираются разные эффекты анимации, титры, типографика, скрипты и выражения, что могут помочь дизайнеру и облегчить его работу, вы найдете в плейлисте на YouTube.




Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах

Теги:



tolsh
Нуб
Нуб
Сообщения: 2
Зарегистрирован: 29 апр 2021, 06:01

Сообщение #2 tolsh » 29 апр 2021, 06:33

Привет всем! Довольно часто приходится править готовые проекты. И постоянно сталкиваюсь с заменой стиля текстовых слоёв : шрифт, начертание, размер, межстрочное расстояние и т.д. и всё это выставляю "руками" через панель Character. Долго и нудно.
Можно ли в After Effects копировать свойства (шрифт, размер и т.п.) текстового слоя и вставлять эти свойства в другие текстовые слои. Либо создать стиль текста и применять его к текстовым слоям.

Аватара пользователя

Автор темы
aeplug
Санта
Санта
Сообщения: 2802
Зарегистрирован: 18 мар 2016, 23:20
Откуда: С Ютуба
Благодарил (а): 18 раз
Поблагодарили: 274 раза
Контактная информация:

Сообщение #3 aeplug » 30 апр 2021, 04:01

Не знаю, зачем ставить все это руками, когда слой текста можно просто скопировать и поместить, где надо.
В одной из последних версий After Effects добавили возможность связывать внешние параметры текста выражениями, но это надо все самому мутить или может уже готовое есть где-то в интернете, искать.
Use expressions to edit and access text properties
https://helpx.adobe.com/after-effects/u ... es.ug.html
Видео уроки для After Effects http://www.youtube.com/AEPlug
Платные консультации по работе в программах


tolsh
Нуб
Нуб
Сообщения: 2
Зарегистрирован: 29 апр 2021, 06:01

Сообщение #4 tolsh » 30 апр 2021, 05:05

"Не знаю, зачем ставить все это руками, когда слой текста можно просто скопировать и поместить, где надо."
Хотя бы потому, что текстовые слои могут быть анимированы по разному...
Кто занимается адаптацией проектов с videohive регулярно сталкивается с такой ситуацией.

Есть такой скрипт : https://aescripts.com/font-styles-library/ как раз то что нужно


Вернуться в «Мои уроки»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей