букварь
моу-шен-ди-зай-не-ра



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

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

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

Если вы часто делаете анимацию текста
и находитесь в поисках интересных решений,
то эта статья для вас.
Внимание!
Данная статья является авторской классификацией анимации текста.
Все материалы использованны в целях цитирования и принадлежат
их авторам.
Как устроена классификация
Для составления классификации было выбрано два параметра: как создается
и что выражает. Например, анимация по позиции использует изменение позиции, чтобы появиться. Stroke варианты используют анимацию штриха и т.д. Первая основная классификация представляет собой 14 классов анимации текста,
которые разделены между собой по принципу технической реализации.

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

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

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

Зачем нужно определять смысловые составляющие каждой анимации?
Это позволяет собрать большую библиотеку выраженных впечатлений. Используя
её можно подбирая наиболее подходящие варианты под проект.



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




Антиква

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


Гротеск
Минималистичный, четкий, функциональный и прямолинейный. Гротескные
шрифты — это новая история, конструктивизм и Баухаус, космос и компьютеры.



Рукописные шрифты
В рукописных шрифтах слишком много непостоянства, поэтому они кажутся человечнее и могут служить классической поэзии и современному уличному
искусству (как неформальные). Но слишком много на них не прочитаешь —
в больших объемах они становятся приторными, как халва. Рукописные
шрифты легко отличить по окончанию sсript в названии.



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

Реклама, вывески, заголовки, логотипы, словом все, что умещается в двух-трех
словах — вот ареал обитания этой группы.

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

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

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

Выражает

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

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

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

Например, если мы анимируем текст блоком, то это самый верхний уровень.
Если мы спускаемся на уровень ниже, то мы начинаем работать со строками.
Еще ниже, со словами; еще ниже, с символами; еще на уровень ниже -
то с частями символов.

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

Легкость в придумывании можно объяснить тем, что мы задали понятные правила,
которые дают нам «видимый» коридор действий над текстом и мы не блуждаем
в потоке различных вариантов.

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

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

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

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

Должна ли анимация текста привлекать к себе внимание?
Будет ли в кадре достаточно динамики?
Должен ли быть акцент на тексте, и, если да, то каким образом достичь его?

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

Обратите внимание, что в подборке анимации текста по позиции много вариантов анимации побуквенно. Это можно объяснить тем, что анимация текста по позиции выглядит весьма просто, и чтобы она не выглядела слишком просто, ей добавляют динамики за счет того, что работают с анимацией текста посимвольно. За счет большого количества символов (объектов), которые движутся, даже простая анимация по позиции выглядит более насыщенно и интересно.

Иерархия:
1. Блок текста
2. Строка
3. Символы
4. Символы на части

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

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


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

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

Было классифицированно 63 вида анимации текста, разделенных
на 14 классов. Если учитывать иерархию, то количество видов может расшириться.




В статичном дизайне для создания динамики работают на разных
уровнях текста. Ритм можно задавать через символы, слова, строки.
Уважаемые копирайтеры, обратите внимание, что от объема текста
будет зависеть то, как дизайнер сможет проработать ритм...

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

В варианте горизонталь + вертикаль мы видим более разнообразное движения, которое проявляется за счет много тактности движения.



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

Интерфейсы / AR.
Если посмотреть на то как современные интерфейсы предоставляют элементы управления, то мы увидим, что они появляются в нужный момент, согласно тем функциям, которые нужны контекстно здесь и сейчас.

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

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

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

Когда нужна простая анимация текста и при этом обычная анимация по позиции выглядит слишком просто, или же анимация по позиции невозможна из-за ряда моментов, например композиция не предполагает, что текст может вылететь
из одного из частей экрана. Имеет смысл использовать анимацию через маску.
Если нужен небольшой эффект неожиданности, то анимация через маску за счет неожиданного появления «из ниоткуда», во-первых удивляет, а во-вторых в ряде композиции, в которых используется фон с сплошной заливкой (solid), анимация через маску создает контраст ожидания, что также приводит к эффекту
«ох, ничего себе!».

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

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


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

Пример из статичного дизайна похожий на анимацию как бумага.
Выражает

Рукотворность.
Бумажная анимация отсылает к рукотворному, человечному, к чему-то с душой.

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

Творчество / креатив.
Отсылка к креативу. Ручные-бумажные поделки это всегда креативно.
Пример по центру бесподобен!

4
Анимация текста через поворот и размер.
Выражает

Превращение одного в другое (магия).
Магия превращения за счет того, что вращение настолько быстрое, что
мы не замечаем подмены, именно поэтому это и есть магия превращения.

Смешивание.
В варианте «поворот относительно центра и относительно своей оси»
анимация похожа на смешивание одного вещества с другим. Также возможна
ассоциация с водоворотом.

Пример из статичного дизайна похожий
на анимацию через поворот и размер.
Горизонтальные жалюзи.
Вариант «качель» воспринимается как нечто физическое и больше
всего напоминает жалюзи.

Структурированная подача информации.
Если продолжить в варианте «качель» аналогию с разворотом,
то можно сказать, что это напоминает разворачивание свитка.
Как будто есть информация, которая изложена на «физическом
носителе» и ее структурировано по пунктам показывают зрителю.

Веселое, игривое настроение.
Характер таких движений как вращение и качение дает сильную
ассоциативную отсылку к веселому, озорному и возможно детскому.


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

Размер и поворот используют для развитие
сюжета и динамики в композиции. Также это
помогает управлять взглядом зрителя и вести
его через композицию «правильным путем».
5
Анимация текста с появлением в один кадр.
Выражает

Печатная машинка.
Визуальное может напоминать печатную машинку, но, из-за того, что появление
текста происходит «хаотично», мы получаем активность по всей плоскости экрана,
что делает анимацию интереснее.

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


Постер фильма
ex machina
Через верстку обозначают
темы компьютеров,
программирования и искусственного интеллекта
Статус бар загрузки.
Сходство от того, что буквы появляются по очереди и мы ждем, когда они
заполнят слово или фразу целиком.

Взлом, шпионаж, кодинг.
Если в анимации используются шурешки, то это выглядит как дешифровка
пароля. Графика, предшествующая появлению символа дает отсылку к темам технологии, взлому, шпионажу и кодингу.

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

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


Графические проявления

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

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

6
Анимация текста через графику(шурешки), которая накладывается поверх.
Выражает

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

Созидание / строительство.
Шурешки визуально могут напоминать чертеж или строительные леса.
Поэтому это может быть отсылкой к теме созидания и строительства.

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

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


Графические проявления

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

Плакат в котором графика
ведет взгляд зрителя.

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

Эстетика технологий и механизмов, романтика стимпанка.
Если части, из которых собирается текст, достаточно крупные
и геометрически выверенные, то это похоже на механизм.

Органика-живое.
Если текст состоит из мелких частиц, которые ведут себя активно,
то это ассоциируется с чем-то живым.

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

Форма разбитых символов на части напоминает элементы какого то механизма.


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


Борьба с обстоятельствами, преодоление трудностей.
Если же анимацию разбиения реверсировать, чтобы части не разлетались,
а собирались, то в ней появляются противоположные темы, такие как
преодоление, противостояния, тема борьбы с обстоятельствами.

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

Абстрактная графика.
Графически такая анимация напоминает абстрактную графику, где на первый план выходят ощущения от композиции, чем от смысловой нагрузки. Хотя как понятно
из абзаца выше в такой анимации как разрушение много смысловых составляющих,
но часто этот прием используют просто, чтобы создать композицию, которую интересно разглядывать.
С точки зрения графики и темы абстрагирования, такой визуал может подойти
для fashion, luxury, а также для акцентных и провокационных макетов.
Эффект узнавания
За счет того, что буквы разделены на много разных частей, проявляется визуальное напряжение. Пока мы не всматриваемся, мы ощущаем эти буквы как графику, но как только начинаем присматриваться, то через какое-то время начинаем узнавать буквы, которые в свою очередь начинают складываться в слова.

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

Такие работы вызывают «внутреннюю радость»
от узнавания в разрозненных
нечто понятное.
Прием разбиение формы в зависимости от контекста и того
как он выполнен может выражать повреждения, создание
чего-то из чего-то, а также работать в рамках принципа
минимальными средствами максимальный результат, когда
без привнесения графики в композицию разбитые символы
являются текстом, а также становятся еще и графикой.
8
Анимация текста через искажения(glitch).
Выражает

Технологичность.
Если искажения прямоугольные, то присутствует сильная отсылка к технологиям.

Агрессивность / эмоциональность.
Если форма более плавная, как в живых объектах, то мы ощущаем такую анимацию, как сильно эмоционально заряженную, тревожную, опасную, а следовательно агрессивную.


Айдентика
BEAT festival использует глитч эффект
Тут также можно обнаружить эффект узнавания в разрозненных нечто понятное. Но в отличии от разбиения по форме сам глитч и характер его движения привносят идею современного, молодежного, модного, цифрового и агрессивного тд.
Глитч...
9
Анимация текста через работу контрформы.
Выражает

Мода.
За счет использования паттернов идет отсылка к теме моды,
к теме fashion индустрии. Также мы можем наблюдать, что прием
контрформа выполнена в черно белом исполнении. Контрформа
в черно белом может отсылать к чему-то классическому, к стилю,
к самому понятию моды.

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

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

Контрасты сами по себе очень привлекают внимание. Мы видим объекты
только потому что они отличаются друг от друга(контрастны). По мнению
автора в теме контрформы и контрастов существует очевидное сходство
с эротикой и сексуальностью.

Контрасты в эротике.

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

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

Сексуальность выраженная
через одежду с леопардовым
узором.

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

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

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

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

Создание.
Вариант анимации «stroke с разных сторон (сверху, снизу, с боков...)» выглядит так, как будто что-то формируется, используя помощь или идеи, со стороны. Или как если бы мысли собрали в одну кучу.

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

Технологичность
glitch'евый stroke выражает технологичность.

Изысканность.
В дизайне высоко технологичных вещей очень важна их форма и подача продукта.
Их часто презентуют таким способом, чтобы это все выглядело интригующе.
Посмотреть каким образом достигается ощущения изысканности и интриги
в рекламе различных продуктов можно в этом видео.
В такой подаче особое внимание уделяется граням продукта. Такой подход
позволяет показать рекламируемый товар красиво и в выгодном свете.
В свою очередь вариант stroke+opacity» позволяет аналогично показывать
«грани шрифта». Плюс, за счет того, что текст появляется не целиком,
а как бы поэтапно, накручивается таинственность и особенность. Суть в том,
что как и в анимации шрифта(stroke+opacity), так и в продемонстрированной
рекламе ощущения изысканности добиваются одинаковыми средствами.

Пример из статичного дизайна похожий
на анимацию через stroke.
Stroke который может быть имеет больше от разбиения,
чем от stroke...
Старость / игривое настроение.
В зависимости от того откуда был позаимствован характер движения такая анимация
как stroke bounce может выражать пожилых людей, так и игривое настроение.
Для определения идеи анимации очень важен контекст. В примере, где показан пожилой человек, в трясущихся буквах мы сразу узнаем отсылку к старости.
В следующем примере за счет, того что используется разноцветные символы,
мы получаем противоположную идею и она скорее относится к игривому настрою.
Из этих двух примеров видно, насколько важно учитывать контекст и разные мелочи в анимация шрифта.

Стихии.
Анимация «stroke стихий» выражает то, что несет в себе стихия. Если это огонь,
то это энергичность, динамика, агрессия. Если это вода, то это сдержанность, мимолетность, созидание и т.д...



Живое / органика.
Анимация «stroke с изменяемой толщиной» за счет неравномерной формы линии напоминает вьющиеся растения. Поэтому можно говорить, что в подобной анимации заложена идея живого.

Эфемерное, легкое.
Вариант «обратный ход» Выражает нечто неуловимое, эфемерное, легкое.

Идея, чертеж, реализация.
Анимации «stroke с широким Fill заполнением» и «stroke с слабым fill заполнением»
могут выражать поэтапный процесс создания, как будто сперва был идея, потом чертеж, который со временем был реализован.

Вьющиеся растения
«Stroke с изменяемой толщиной» визуально напоминает лианы.
Поэтому можно говорить,
что в такой анимации существует отсылка
к чему-то органическому.
Постеры похожие на анимацию через stroke.
11
Анимация текста за счет морфинга одних объектов в другие.
Выражает

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

Внешне такие работы всегда можно отличить, потому что в них почти
всегда минимальными средствами стараются достигать максимального
результата. Например в композиции нет графики в прямом понимании,
но все выполнено так, что шрифт, за счет разбиения, берет на себя
эту роль. В таких работах часто совпадает форма разных объектов.
За счет совпадения формы в композиции получается графическая
рифа и это всегда интересное визуальное решение (см. постер jazz festival).





Примеры в которых есть графическая рифма.

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

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

Течение времени.
Когда один текст морфируется в другой, то это похоже на течение времени.

Тон сообщения.
Например capslock'чно напечатанный текст выражает ПОВЫШЕННЫЙ ТОН
или КРИК. В варианте, где текст из тонкого морфируется в жирный явно прослеживается эта идея.


Графические проявления

Увеличение динамики.
Добавление геометрии, которая отличается по форме от буквы, позволяет насытить кадр динамикой. Т.е. если в кадре у нас есть текст, но кадр недостаточно сильный
и надо его сделать более динамичным, то такой способ хорош, потому что он
не привносит новых объектов в сцену, а позволяет работать в рамках «одного» объекта, что визуально весьма интересно.
В этих примерах видны сильные визуальные рифмы.
Если бы потребовалось произвести морфирование
объектов, то за счет визуальных сходств они бы
плавно и весьма идейно перешли бы одна в другую.

1. В логотипе Сочи2014 созвучны символы S и 2, hi и 14.
2. В постере к фильму «Солт» мы видим совпадение между
прямой H и линией носа Анджелины Джоли. Также мы видим
аналогичное совпадение между диагональю символа А и скулой.
3. В рекламном постере магазина удачно совпадает продукт
с логотипом.



12
Анимация текста через вытягивание символов.
Выражает

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

Спорт.
Тема большой скорости может отсылать к теме спорта.

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

С миру по нитке.
Пример Optimus design(1мин 10сек) напоминает вариант «stroke с разных
сторон (сверху, снизу, с боков...)». В них обоих присутствует собирательная
тема. Сравнение можно посмотреть в этом видео.

Треил переходящий из буквы
в букву создает ощущение
скорости.

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

Время.
Может быть отсылкой к какому-то событию, растянутому во времени
(см. пример Dirol).

Сексуальность.
Выражение сексуальности, через гибкость. Также когда буква вытягивается
отсылка к изяществу.

Сравнение приемов.
Разные приемы которые как направляющие позволяют управлять взглядом зрителя.
В первом варианте сами буквы за счет вытягивания становятся направляющей графикой.
Во второй направляющими являются дополнительная графика в композиции.
Графические проявления

Минимальными средствами, максимальный результат.
Используя только шрифт, за счет вытягивания, мы искажаем форму.
В итоге мы получаем символ, который больше становится похож
на графический элемент, чем на букву. Хотя при этом все еще
считывается как буква. Таким образом один объект в композиции
выполняет роль двух, он одновременно является буквой и графикой
(см. пример сравнение приемов).

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

Визуальная привлекательность.
В варианте, где из символа вытягивают прямоугольник, мы наблюдаем
сильный контраст за счет того, что прямоугольник выглядит большим,
а текст выглядит помимо того, что тоньше, так еще и меньше. В таком
случае мы краткосрочно, через анимацию получаем эффект первичных
и вторичных форм. Это улучшает визуальную часть композиции, потому
что глазу есть что рассматривать. Тот факт, что это происходит в динамике,
за счет движения усиливает этот эффект. Если кто незнаком с темой
первичных, вторичных и третичных форм в композиции, очень рекомендую
эту статью.
Усиление динамики.
В варианте «Через шурешные прямоугольники» за счет добавления
новых объектов (квадратов и прямоугольников) и их взаимодействия
со шрифтом в контрформе, создает новые композиционные отношения,
что поднимает динамику.

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

1. Позволяет заполнять прямоугольники в верстке.
2. Превращать плоский, скучный текст в объемное зрелище.
3. Если первые два примера работают с формой знака,
то 3й вариант для вытягивания использует собственную тень.
13
Анимация текста как жидкость.
Выражает

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

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

14
Анимация текста через совпадение формы с другим объектом.

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

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

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

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

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

Если сравнить композиции, в которых будут использованы оба объекта
на одном листе и вариант, в котором объекты как бы «слиты» между
собой, второй смотрится лаконичнее и интереснее. Также немаловажно,
что за счет обоюдного проникновения объектов друг в друга (совпадение форм), становится понятна идея и что хотят сказать зрителю.


Справа в примерах я добавил два креатива, первый это уже знакомая нам коммуникация про кофе, а второй это обложка книги «Челюсти». Обратите
внимание на то, что не только физические объекты можно сочетать по смыслу
и форме. В данном примере мы видим, что буква А, за счет иллюстративной
подачи обложки напоминает плавник акулы. Демонстрация подобного
сравнения нужна была для того, чтобы показать на сколько схожи эти приемы.

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

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

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

Креатив.
Анимация с совпадением формы может передавать идею креативности.

Пример как образуется результирующий смысл.
Картинка без текста не очень то понятна. Если смотреть текст без картинки, то непонятен контекст сообщения. И только вместе они создают понятное сообщение.
1. Одна из сторон объекта является другим объектом
2. Однодневная выставка это также скоротечно как
буквы изо льда.
3. Холодное оружие как символ кровавой драмы,
как символ возмездия в истории Гамлета.
Библиотека выраженных впечатлений
Одной из основных задач исследования анимации шрифта, помимо выяснения
количества возможных вариантов, было составление библиотеки выраженных
впечатлений.

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

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

Но даже в таком виде она может быть весьма полезна. Например, такие
темы - как технологии, созидание и изысканность, - встречаются достаточно
часто в рекламном деле.

На тему технологии представлено 6 вариантов, на созидание 7, на изысканность 4.
Это позволяет достаточно широко расширить кругозор.

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

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

А также ответить для себя на вопросы:

1. Должна ли анимация идейно поддерживать композицию?
2. На сколько высокой должна быть динамика анимации текста?

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

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


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

1. Текста поддерживает идею и является самой активной частью композиции (Т+ ).
2. Текст поддерживает идею, но в плане динамики работает на равных с остальными
участниками композиции (Т= ).

Ниже вы можете посмотреть по 2 примера на каждый из моментов, какими средствами эти задачи решают другие моушен-дизайнеры.
Текста поддерживает идею и является самой активной частью композиции (Т+ ).

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

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

Далее чтобы привлечь внимание зрителя зафиксировать кадр идет анимация текста.
Чтобы привлечь внимание анимация текста должна дать более активное движение,
чем было в сцене до этого.

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

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

Графическая рифма текста с изображением
В придумывании анимации текста может помочь графическая рифма. Когда основываясь
на сильных визуальных характеристиках
изображения находятся графические рифмы. Если создавать анимацию текста, соподчиняя ее композиции, получиться собрать цельную композицию.
Текст поддерживает идею, но в плане динамики работает на равных с остальными
участниками композиции (Т= ).


Если от анимации текста требуется поддержать общую стилистику композиции,
то для того чтобы понять, что из себя должна представлять анимация текста нужно ответить на такие вопросы:

1. Детализирована ли композиция?
Это может быть весьма упрощенная стилистика вроде flat, а может быть и высоко детализиованная за счет большого количества мелких деталей и объектов.

2. В какой идейно-смысловой тематике находится композиция?
Самые простые смысловые области это позитивная или негативная композиция.

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

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

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

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

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

Я надеюсь, что рассмотренные 63 вида анимации текста смогут помочь вам
в проектах и выведут вашу анимацию на новый уровень.


Анимация текста +
переходы в моушен-дизайне.
Можно подбирать варианты, которые могут работать поддерживая друг друга стилистически и по смыслу.
P.S.
У статьи есть группа вконтакте. В группе выкладываются различные уроки по переходам и анимации текста, найденные в сети...
Made on
Tilda