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

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

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

Своим появлением анимированный текст обязан кинематографу и экранному рекламному искусству. Впервые публика поняла, что такое кинетика, в 1899 году благодаря режиссеру Джорджу Мельесу. Он известен миру не только как родоначальник кинетических эффектов в титрах, но и как создатель эффектов timelapse (ускорение или замедление воспроизведения) и stoptrick (спецэффект, основанный на остановке съемки). 

Затем моушн-дизайн и кинетическая типографика в кинематографе стали развиваться более активно. Сол Басс, известный американский дизайнер, подготовил титры для фильма Отто Премингера «Человек с золотой рукой» (1955). А позже Альфред Хичкок в своей картине «На север через северо-запад» (1959) впервые использовал полноценную анимацию в титрах, для создания которой привлек Басса. После этого Сол работал вместе с Хичкоком и над следующей его картиной — «Психо» (1960). 

Наиболее узнаваемый пример моушн-графики — титры к самому первому фильму об агенте 007 Джеймсе Бонде «Доктор Ноу». Автор титров Морис Байндер создал видеоряд, который произвел революцию в сфере кино. Заставка перестала нести только информацию — она начала передавать атмосферу всей картины. Так у режиссеров появилась возможность погружать зрителя в фильм до первых кадров.

Читайте также:

9 фильмов о дизайне и для дизайнеров

Отдельное внимание заслужил дизайнер Кайл Купер, который создал титры к фильму Дэвида Финчера «Семь» (1995). В них он совместил дрожащие надписи с нестандартным видеорядом и тревожной музыкой. Позже Купер открыл студию Imaginary Forces и продолжил работу с крупными голливудскими проектами. 

Постепенно кинетическая типографика стала использоваться в рекламе на ТВ и в интернете. 

Сферы использования кинетической типографики

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

• Рекламные баннеры. Использование кинетики помогает пользователю познакомиться с продуктом или брендом, привлечь внимание к кнопкам или информационным блокам. 

• Брендинг. В этой области чаще всего анимируют логотипы и слоганы для использования в рекламных роликах. 

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

Основные правила кинетической типографики

1. Узнаваемость формы букв в тексте. Символы могут исчезать и появляться, растворяться на фоне или стекать сверху вниз. Главное — текст должен стать читабельным хотя бы на несколько секунд, чтобы зритель смог получить нужную информацию.

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

3. Контраст текста и фона. Здесь все просто: темный фон — светлые буквы, и наоборот. Нежелательно использовать для оформления фона мелкие детали и витиеватые орнаменты. Анимацию тоже лучше применять только для текста. Кинетическое оформление титров и надписей — это не только про движение, но и про донесение информации — об этом важно помнить при создании любой анимации для веба.

Но в целом все зависит от задумки дизайнера. 

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

Adobe After Effects

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

Cinema 4D

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

Figma

В сервисе есть инструменты для создания анимированных текстов (например, плагин Figmotion). Они используются преимущественно для анимации интерфейсных надписей или подсказок. 

Adobe Photoshop

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