Слово как логотип и как анимация

Такого действительно не было: во всех прошлых сериях двигался знак, а слово стояло рядом. Здесь двигается само слово, и знака нет вовсе — логотип это MADOPUS и ничего больше. По типологии это шрифтовой логотип, самый распространённый и самый требовательный: он держится только собственным начертанием.

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

01 · Прорисовка
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — литера O: единственная замкнутая форма в слове, она же лучше всех держит круг. Аватар — MAD в два яруса: MA сверху, D снизу.

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

ЗачемПрямой ответ на «не выглядит сгенерированным»: видно, что слово ведут, а не выводят разом.

Палитрахвоя · трава

02 · Литеры слетаются
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — M: первая литера и самая широкая масса. Аватар — MAD блоком, чтобы читались все трое.

Что происходитЛитеры приходят с разных сторон и встают в строку. Задержка 70 мс, порядок слева направо.

ЗачемТа же механика, что у сборки знака, но носитель — само слово. Логотип и есть сборка.

Палитрачернила · киноварь

03 · Падение
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — D: у тяжёлого начертания она даёт самое плотное пятно. Аватар — MAD блоком.

Что происходитЛитеры падают сверху с лёгким отскоком, тяжёлое начертание усиливает вес удара.

ЗачемМатериал не выкладывается, а ставится. Отскок даёт живость, которой нет у ровного наплыва.

Палитрасталь · оранж

04 · Набор
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — O в моноширинной клетке, ровно один знакоместо. Аватар — MAD блоком.

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

ЗачемВход в работу — это всегда текст. Слово печатается, потому что с текста всё и начинается.

Палитраночь · электрик

05 · Набор веса
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — M в среднем весе: крайние веса на 16 px не читаются. Аватар — MAD блоком.

Что происходитТолщина штриха идёт от волосяной к жирной и обратно, литера за литерой волной.

ЗачемОдно и то же слово от лёгкого до тяжёлого — диапазон, в котором мы работаем: от быстрой правки до полного проекта.

Палитраслива · марсала

06 · Растяжение
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — D в узком начертании. Аватар — MAD блоком, сжатие даёт компактный квадрат.

Что происходитСлово сжимается и разжимается по ширине, оставаясь на месте по центру.

ЗачемТот же материал в любом формате: от узкой колонки письма до широкого первого экрана.

Палитраглубина · шафран

07 · Переворот
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — O: она же переворачивается на иконке. Аватар — MAD блоком.

Что происходитЛитеры переворачиваются вокруг вертикальной оси по очереди, как табло.

ЗачемСмена формата на лету. Каждая литера показывает обратную сторону и возвращается той же.

Палитраночь · барвинок

08 · MAD и OPUS сходятся
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — O, точка встречи двух слов. Аватар — MAD блоком, вторая половина уходит.

Что происходитMAD приходит слева, OPUS справа, встречаются в центре и смыкаются в одно слово.

ЗачемДва слова, одно произведение. Инициалы троих и то, что они делают, — встреча, а не склейка.

Палитрахвоя · латунь

09 · Дыхание
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — O в широком начертании. Аватар — MAD блоком со сжатием до квадрата.

Что происходитЛитеры едва заметно расходятся и сходятся, трекинг дышит в пределах трёх единиц.

ЗачемСамое тихое движение из возможных. Для шапки, где знак виден постоянно и не должен отвлекать.

Палитраграфит · бирюза

10 · Волна
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — O монолинией. Аватар — MAD блоком.

Что происходитЛитеры поднимаются и опускаются волной, фаза сдвинута на 90 мс.

ЗачемРитм вместо строя. Слово живое, но строка не разваливается — базовая линия держится.

Палитраграфит · лаванда

11 · Слои в литере
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — D: двухлинейность на 16 px схлопывается, поэтому для фавикона берётся сплошная версия. Аватар — MAD блоком.

Что происходитДвухлинейное начертание: внутренняя светлая линия проявляется после внешней.

ЗачемСлоистость знака перенесена в само слово. Литера собрана из слоёв, как и работа.

Палитрасажа · сурик

12 · Рука
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — M с сохранённым наклоном: неровность видна даже на 16 px. Аватар — MAD блоком.

Что происходитЛитеры со смещениями до 2,2 единиц слегка покачиваются, каждая по-своему.

ЗачемНеровность заложена в начертание и продолжена в движении. Машина такого не делает.

Палитрасепия · терракота

13 · Свет по слову
в мелком
один цвет
выворотка
Сокращённые версии
фавикон 16
фавикон 32
иконка
аватар
аватар тёмный
подпись в PDF

Фавикон — D: контраст на 16 px теряется, тонкие горизонтали утолщаются до 0,6. Аватар — MAD блоком.

Что происходитКонтраст между вертикалями и горизонталями нарастает и спадает, литера за литерой.

ЗачемСвет проходит по слову, как по рельефу. Форма не меняется, меняется освещение.

Палитраиндиго · золото

Игра с цветом

Шестнадцать раскладок на одном начертании: две краски, три, семь, градация одного тона, литера через литеру, пара на слово, тёмный фон. Правило «два-три цвета» проверяется здесь на прочность — видно, где многоцветность работает, а где превращает логотип в конструктор.

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