Кинетическая типографика

Часто ли вы обращаете внимание на анимированный текст? На самом деле он встречается в рекламе, в социальных сетях, в приложениях, на веб-сайтах и не только там. Этот инструмент популярен благодаря тому, что делает проект ярче, привлекательнее и интереснее.

По-другому анимированные тексты называют кинетической типографикой. И в этой статье мы расскажем, как она появилась, каких видов бывает, где и зачем используется и как создается.

Итак, кинетическая типографика представляет собой анимированный, то есть движущийся, текст. В таком тексте буквы, слова, фразы и предложения «оживают»: они двигаются, перемещаются или меняют свой размер, форму и цвета. Уровень сложности анимации зависит только от фантазии и навыков дизайнера.

Кинетическая типографика может быть как самостоятельным элементом, так и дополнением для большой композиции. Она также может сопровождаться музыкой, звуковыми эффектами или закадровым голосом.

Как появилась кинетическая типографика

Появление и развитие кинетической типографики в первую очередь связано с кинематографом, где анимированный текст использовался для оформления названий фильмов и в качестве титров.

Настоящим прорывом считается работа графического дизайнера Сола Басса для фильма «На север через северо-запад» знаменитого режиссера Альфреда Хичкока (1959 г.). Благодаря этой картине кинетическая типографика стала использоваться не только для передачи информации, но и для создания определенного настроения и воздействия на эмоции зрителя.

Сол Басс также создал титры для других работ режиссера: «Головокружение» и «Психо». Постепенно кинетическая типографика нашла применение и в других областях.

Виды кинетической типографики

Кинетическую типографику можно разделить на нескольких видов:

1. Типографика движения (Motion Typography)

В нее входит две группы:

• Прокручивающаяся типографика (Scrolling Typography).

Представляет собой простую анимацию текста, когда он движется в сторону, вверх, вниз, вперед или назад. Хорошо подходит для привлечения внимания к длинному или скучному тексту.

• Динамическая верстка (Dynamic Layout).

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

2. Жидкая типографика (Fluid Typography)

В данном случае текст остается неподвижным, но буквы и символы меняют свои формы, размеры, цвет и т. д.; они также могут превращаться во что-то совершенно новое.

В дизайне существует большое количество визуальных эффектов, которые можно использовать в своих работах.

После приобретения популярности в кинематографе и на телевидении кинетическая типографика пришла и в разные направления дизайна. Она встречается в видео для рекламы, социальных сетей, презентаций, интерфейсов сайтов и мобильных приложений.

Итак, рассмотрим примеры использования кинетической типографики в еще нескольких сферах.

Реклама

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

Как мы уже выяснили, сам по себе подвижный текст привлекательнее для прочтения, чем статичный. В рекламе есть пространство для экспериментов: яркие цвета, резкие переходы, необычные формы. Главное — чтобы текст оставался читаемым, хотя закадровый голос может частично решить эту проблему.

Lyric-видео

Следующая сфера, где кинетическая типографика приобрела популярность — это создание lyric-видео. Такие видео похожи на обычные музыкальные клипы для песен. Однако вместо привычного видеоряда они содержат анимированный текст всей песни, который появляется под музыку.

Такие видео в первую очередь должны передавать настроение, идею и атмосферу песни. Обычно у песен есть официальные lyric-видео, но фанаты также часто создают свои версии.

Шоурилы (showreels)

К шоурилам относятся видеоролики, которые можно добавить к себе в портфолио для демонстрации своих работ. Часто они встречаются на сайтах или в социальных сетях дизайн-студий.

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

Интерфейсы

Так как кинетическая типографика существует в цифровом пространстве, она встречается и в интерфейсах веб-сайтов и мобильных приложений. Однако здесь ее особенностью является более упрощенный и лаконичный вид. Ведь интерфейс должен быстро загружаться и быть удобным для пользователя. То есть он не должен отвлекать от контента и ключевых элементов и действий.

Распространенными эффектами являются перемещение по экрану, а также изменение цвета и размера надписей. Тем не менее на фестивальных сайтах можно встретить более креативные решения.

Что касается процесса создания кинетической типографики, чаще всего ее делают с помощью Adobe After Effects. Эта программа требует времени, чтобы в ней разобраться, но дает много свободы для реализации своих идей.

Кроме того, существует большое количество платных и бесплатных курсов и уроков для самостоятельного изучения AE. Мы поделимся несколькими YouTube-каналами:

Learn Adobe After Effects | 48 Episode FREE Course

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

Typography Animation Tutorials in After Effects

Подборка коротких туториалов по созданию впечатляющих эффектов.

Learn After Effects

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

After Effects

Подборка разнообразных видео с советами и лайфхаками по использованию AE.

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

Вот несколько примеров таких сервисов:

Mango Animate

Offeo

Biteable

FlexClip

Moovly

Jitter

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

1. Сохраняйте читабельность текста

Конечно, мы говорим о движущемся тексте, поэтому сложно сделать слова разборчивыми в каждом моменте ролика, но в итоге пользователь или зритель должен быстро и легко прочитать содержание. Для этого:

2. Грамотно сочетайте текст с изображениями: это разнообразит визуальный ряд

Кроме того, подходящие картинки и фотографии проиллюстрируют и дополнительно раскроют текст.

3. Подберите оптимальную продолжительность эффектов

Зритель должен иметь достаточно времени рассмотреть и прочитать текст, но он не должен успеть заскучать.

4. Используйте эффекты и цвета в соответствии с тем настроением и ощущением, которые хотите вызвать

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

Мы выяснили, что кинетическая типографика представляет собой анимированный текст.

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

Как отдельное направление дизайна кинетическая типографика сформировалась благодаря кинематографу. Там она использовалась для создания титров. Позже такая типографика пришла на телевидение, в рекламу, социальные сети и интерфейсы. Она также может использоваться в презентациях и шоурилах.

Кинетическая типографика создается в специальных онлайн и офлайн программах. Вне зависимости от того, какой инструмент вы выберете, помните, что результат должен не только развлекать зрителя, но и оставаться хорошо читаемым.