Как сделать текст движущимся
Анимируем текст в 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. Подобный эффект часто используется в фильмах: в титрах и непосредственно в кадре.
Отключите эффект в настройках слоя. Вы сможете снова включить его в любой момент, но пока что давайте попробуем другие виды анимации.
Нет смысла подробно описывать здесь все стандартные эффекты программы, в каталоге есть много подкатегорий. В каждой вы найдете подборку тематических эффектов.
DISTRICT F
🎥 Анимация на ходу: 3 приложения для создания динамического текста
Небанальное визуальное повествование — краеугольный камень, на котором зиждутся сегодня ведущие интернет-сообщества. Креативные способы подачи материала, такие, к примеру, как добавление живого текста и анимационных эффектов, являются отличным способом привнести самобытность в ваши статьи, «истории», а также фото- и видеопубликации в соцсетях.
_ 1. ADOBE SPARK POST / ios
Это своеобразный онлайн-конструктор, библиотека «живых» шаблонов, сотен готовых стилей и цветовых палитр для работы над уникальными превью, обложками, коллажами, постами в соцсетях, а также для формирования изображений для сайтов и блогов.
Здесь можно от души разгуляться с дизайном, экспериментируя буквально с каждым отдельным элементом — от «разбивки» макетов до сложных цветовых решений и текстового редактирования, что позволяет добавить аутентичности любому проекту.
С помощью SPARK POST вы можете «вдохнуть жизнь» не только в ваш текст, но и в фото или фоновое изображение — layout. Для этого создайте свой дизайн или выберите подходящий стиль в разделе Templates, после чего добавьте эффект анимации во вкладке Effects.
2. INSHOT / ios + android
INSHOT – это добротный фото- и видеоредактор, вобравший в себя впечатляющий функционал для обработки медиаконтента (подробно я разобрала особенности работы программы в одном из прошлых видео ). Здесь можно добавлять музыку и «живые» стикеры. Кроме того, недавно разработчики INSHOT выкатили обновление, позволяющее делать анимацию текста.
Так, во вкладке «Текст» (ищите «скользящую» белую кнопку) пользователь может не только регулировать цвет, прозрачность и интенсивность теней, но и анимационные эффекты, позволяющие менять стиль (>20 вариантов) и характер появления ваших надписей (при необходимости добавляйте сразу несколько текстовых слоёв и настраивайте порядок их появления и продолжительность).
3. HYPE TEXT / ios
Достаточно неплохим приложением для создания текстовой анимации является также HYPE TEXT. Оно не может похвастаться интуитивно понятным и удобным интерфейсом, тем не менее со своей задачей справляется на твёрдую четвёрку.
К преимуществам следует отнести в первую очередь наличие интересных стилей и современных анимационных эффектов, отвечающих за характер появления текста. Также в распоряжении пользователя > 25 шрифтов (правда, не все поддерживают кириллицу), различные цвета и возможность выбора скорости появления текста. Плюс, есть встроенная база рандомных цитат (eng), которая открывается в процессе набора вашего текста.
Создание анимированного текста для вашего продающего видео
Создавать оригинальные видео с анимированным текстом – просто и интересно. Времена, когда для создания качественного видео вам нужна была команда из дизайнеров и аниматоров, уже в прошлом. В видеоконструкторе SUPA десятки образцов текста, шаблоны бэкграундов, профессиональные фото и подробные видео инструкции, чтобы вы создали свой креативный ролик всего за 10 минут.
Наш сервис используют:
Воспользуйтесь готовыми шаблонами
Зачем вашему видео анимированный текст?
80% пользователей помнят рекламное видео, которое они просмотрели за последний месяц. Помимо этого, видео в соцсетях расшаривается в 12 раз чаще, чем текст и изображения вместе взятые.
Видео все чаще становится ключевым фактором в принятии решений о покупке. Сначала потенциальные клиенты обращают внимание на качественно сделанное видео, потом анимированный текст привлекает внимание к важной информации, а оригинальность и доступность ролика подталкивает зрителя принять решение о том, чтобы познакомиться с вашим брендом ближе. Wyzowl провел опрос, который показывает, что после просмотра видео бренда 8 из 10 человек купили ПО или приложение бренда. В РФ чеки онлайн-покупок тоже растут стремительными темпами.
Согласно статистике, к 2022 году количество потребляемого интернет-видео в месяц достигнет 240 эксабайт (один эксабайт – это 10 в девятой степени гигабайт). Такие цифры говорят о двух вещах: если вы не используете видео, то ваш бизнес уже проиграл конкурентам. Будущее однозначно за видеомаркетингом. Второе: среди такого обилия и наплыва видео вам придется сильно выделяться, чтобы не только зацепить зрителя, но и удержать его внимание.
Анимированный текст в видео может стать отличным решением для оживления ваших роликов и роста их креативности. Видео с анимацией быстрее привлекает к себе внимание зрителя и удерживает его. Пользователю становится интересно увидеть, что же дальше. Используя анимированное видео, можно сообщить потенциальным клиентам о скидках или важной информации, работе магазина, акциях или новинках вашего бренда. Важно, чтобы анимация была плавной, яркой, а предложения короткими.
К счастью, анимация доступна теперь не только профессиональным командам редакторов, дизайнеров и аниматоров, а всем, у кого есть в запасе 15 минут времени и желание создать крутое видео для своего бренда без разорительных бюджетов.
59% руководителей предпочитают посмотреть видео, чем читать текст, в то же время в четыре раза больше потребителей предпочли бы посмотреть видео о продукте, чем прочитать о нем
Как сделать анимированный текст в SUPA: этапы создания видео
Анимировать текст за 10 минут можно в видеоконструкторе SUPA. Для этого вам не нужно нанимать профессиональную команду видеоредакторов, не нужно согласовывать десятки вариантов и часами объяснять, что именно вы хотите. Теперь вы сами себе видеоредактор, можете экспериментировать и при этом быстро создавать качественные видео такими, какими их представляете вы. Анимированный текст может перемещаться, появляться и изменяться в соответствии с вашими предпочтениями.
SUPA предоставляет широкие возможности выбора: тысячи качественных картинок и фото для бэкграундов из нашего фотостока, обширную палитру цветов и шрифтов, отличные шаблоны, созданные нашей командой и вдохновение от шаблонов всех пользователей видеоконструктора.
Этапы создания анимированного видео:
На знакомство с видеоконструктором SUPA вам понадобится 10-15 минут свободного времени, плюс время на создание самого ролика. Но как только вы освоите базовые функции, редактировать и создавать видео в нашем конструкторе станет совсем легко и увлекательно.
Вовлекающие анимированные видео
При создании вашего анимированного видео обязательно держите в уме, что именно видео – ключ к успеху бизнеса. Статистика подтверждает, что бренды, которые используют видео в своих маркетинговых кампаниях, получают на 41% больше веб-трафика из поиска, чем те, кто не использует видео. Кроме того, видео приводит к возрастанию органического трафика из поисковых систем на 157%.
Создать анимированный текст онлайн – задача не слишком сложная. А вот создать вовлекающий анимированный текст, который завлечет вашего потенциального клиента – задача посложнее. Мы собрали несколько подсказок как, пользуясь возможностями SUPA, создать крутое качественное видео, которое понравится вашим подписчикам. Ранее мы подробно разбирали, почему пользователи подписываются на соцсети брендов.
Одна из главных особенностей всех хороших видео в том, что их основная функция развлекать, вовлекать и помогать потенциальному клиенту решать его проблемы. Проще всего вовлечь вашу аудиторию с помощью видео. В видео можно рассказать полноценную историю, приправленную идеальным видеорядом.
В самом видео текста должно быть не слишком много, чтобы не перегружать видео. Однако короткие фразы и точно сформированная мысль плюс анимация этого текста станут привлекающим и запоминающимся элементом. Так вы сможете донести идею до более широкой аудитории, ведь подписчику интересно, а что же там дальше, какая следующая анимация или откуда появится текст. Текстом хорошо акцентировать важную информацию, поскольку многие пользователи просматривают видео без звука. О факторах, влияющих на эффективность видео, читайте здесь.
Чтобы люди запоминали прочитанное, нужно оживить, анимировать текст. Так у пользователя будет более объемный опыт взаимодействия с видео и выше вероятность усвоения нужной вам информации.
Чтобы еще сильнее подчеркнуть анимированный текст на видео, пользуйтесь контрастностью при выборе цветов. Выбирайте одновременно органичную и в то же время контрастную палитру, чтобы текст и его тени выделялись и привлекали внимание. Используйте брендовые шрифты, цвета и лого: формируйте у потенциального клиента ассоциации. Вы можете добавить анимированный текст на видео в том числе из вашего архива.
Если вы заинтересованы в том, чтобы клиенты не просто смотрели ваши промо ролики, а действовали и реагировали на ваши видео, попробуйте добавлять видео в имейл-рассылки. Доказано, что CTR с добавлением видео повышается на 200–300%.
Создавайте разнообразные видео, тестируйте форматы, которые вызывают наибольший отклик у аудитории. В SUPA вы можете создавать новые креативные видео каждый день и удивлять своих клиентов и потенциальных подписчиков.
Предоставьте клиентам нестандартный новый опыт взаимодействия с вашим видео и вашим бизнесом, добавьте интерактив или порадуйте новым форматом. Или добавьте новый анимированный текст на фото, которое понравилось клиентам.
Постарайтесь избегать распространенных ошибок при создании вашего видео ролика. В частности, фокусируйтесь на одном продукте или сочетании нескольких, но не пытайтесь в одном видео показать все ваши товары. Знакомьте потенциального покупателя с вашей линейкой товаров или услуг постепенно. Не распыляйтесь.
Не затягивайте начало – первые 3-5 секунд решающие: пользователь или заинтересуется, или потеряет интерес к вашей рекламе и продукту из-за нудного начала. Начните ролик с чего-то необычного: провокации или интриги, но без перегибов. Именно поэтому сделать анимированный текст онлайн иногда лучшее решение – за первые несколько секунд у вас есть возможность привлечь внимание.
Постарайтесь создать короткий ролик, но доступный для понимания и содержащий основной посыл/инфо. Длинные видео можно и нужно использовать только если это детальное объяснение того, как пользоваться продуктом или как избежать основных ошибок при его использовании. Но опять же: 20-минутный ролик – не вариант.
Для большинства соцсетей продолжительность видео измеряется секундами. В Instagram Stories, например, видео «нарезаются» на 15-секундные отрывки, а максимальная продолжительность видео в ленте – 60 секунд. Как создавать идеальные сториз, читайте тут. Учитывайте, под какую соцсеть вы создаете свое видео.
Отслеживайте аналитику и популярность роликов.
В современном диджитал мире наличие у бренда страницы в Facebook, Instagram, LinkedIn или канала YouTube – это необходимость. Но помните, что ваш контент должен регулярно обновляться и обязательно учитывать обратную связь от подписчиков. Как получить свою первую тысячу подписчиков в Instagram, рассказываем тут.
Привлеките внимание к видео каким-то необычным звуком. Если такое видео хорошо зайдет вашим потенциальным клиентам, то можно использовать этот звук как повторяющийся элемент в других видео. Так у зрителя будет возникать ассоциация этого звука/мелодии с брендом.
Сделайте из своего рекламного видео короткий фильм с героями и сюжетом, с описанием проблем потенциальных клиентов. Создайте такое видео, в котором пользователь узнает себя, помогите ему решить его запрос/проблему. Пользуйтесь всеми приемами сторителлинга: рассказывайте вовлекающую историю с завязкой, фабулой и кульминацией.
Типы видео, которые нужно создавать для привлечения аудитории
Создать анимированный текст для видео важно так, чтобы он не раздражал и не отнимал время вашего потенциального клиента, а решал его проблему.
Например, создайте в нашем видеоконструкторе SUPA:
Часто задаваемые вопросы
Все фишки работы с текстом смотрите в нашей подробной видео инструкции.
Скачать ролик легко и бесплатно. После того как вы создали видео, сохраните его, потом нажмите на кнопку «Скачать» и выберите подходящее качество видео. Как это сделать смотрите в этой инструкции.
Видео инструкция с пошаговым алгоритмом регистрации тут.
SUPA – это программа, в которой вы можете создавать видео в любом из ваших любимых браузеров. Вам не нужно ничего скачивать или устанавливать, достаточно только зарегистрироваться.
Смотрите тут как выбрать фон для вашего видео ролика из нашей коллекции стоковых изображений.
Видео с музыкой легче запоминаются и более вовлекающие. Они помогают формировать ассоциации с вашими продуктами. В SUPA можно легко добавить музыку в видео – видеоконструктор предоставляет такую возможность в платной версии.
Да. Это, кстати, один из самых популярных форматов видео для соцсетей. Изучите нашу инструкцию по созданию образовательного видео.
15 потрясающих анимированных эффектов для текста на CSS
Красивый текст и типографика способны сделать Ваш сайт более привлекательным. В веб — дизайне CSS позволяет сделать более интересные эффекты с текстом, при этом вообще не использовать графические редакторы и скрипты. С помощью CSS Вы можете добавить тексту множество различных эффектов, тем самым оживить его.
И для того чтобы это продемонстрировать, представляю Вам подборку из 15 эффектов для текста, которые сделаны только с помощью CSS, но некоторые примеры всё же использовали не большие скрипты.
Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:
Эластичная анимация
Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.
Глюк с SVG
Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров
Ретро логотип
Данный логотип сделан на CSS, а также имеет бегунок, который позволит увеличить его.
Эффект сдвига для текста
Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.
Длинная тень для текста
Этот элегантный эффект длинной тени для текста создан только с помощью CSS, и смотрится он удивительно.
Туманный эффект для текста
Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах
Маска для текста на SVG
See the Pen SVG text mask by Marco Barría (@fixcl) on CodePen.
Анимация для текста
Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.
3d текст
Это игра с CSS тенями, но как Вы можете видеть, результат получился очень классным.
Текст с фоном
Вернее текст тут, как бы, получается прозрачным.
Мигающий текст
Тут мы можем видеть довольно приглушающий свет для текста, который к тому же ещё и периодически мигает.
Анимированная подпись
Это необычный эффект для текста на CSS. Подойдёт для множества сайтов, и точно может привлечь посетителей.
Глюк для страницы с 404 ошибкой
Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.
Космос
Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS
See the Pen COSMOS by Patrick Brosset (@captainbrosset) on CodePen.
Загрузка
Это довольно интересный эффект, который можно поставить на предзагрузку Вашего сайта
See the Pen ByVYZK by Ian Gloude (@igloude) on CodePen.
ДОБРОЙ РАБОЧЕЙ НЕДЕЛИ ВСЕМ!
Приятного осеннего дня
Красивой вам ОСЕНИ