БУКВАЛЬНЫЙ ЧЕЛЛЕНДЖ 2026
Буквальный челлендж — созданное в 2024 году мероприятие, суть которого состоит в отрисовке и публикации букв кириллического алфавита по одной каждый день, в сумме 33 дня подряд. Полученный таким образом алфавит необходимо оформить в кейс на DProfile; кейс и отдельные буквы в нём будут оценены профессионалами шрифтовой и дизайн-индустрии, лучшие получат призы, а главное, чувство глубокой общности с единомышленниками ;)
ИСТОЧНИКИ ВДОХНОВЕНИЯ
В прошлом годе я делал шрифтовое прото-семейство, играясь с формами славянских рукописей (и делал это весьма успешно, угодив в шорт-лист призёров). Нынче же в мою голову пришло нечто совершенно иное: утрированная технологичность печатных плат и ранних ЭЛТ-мониторов, чёткая сетка и первая для меня работа с анимацией



работа пользователя anjisstd с Magnific (бывший Freepik)
обложка игры «Вангеры», К-Д Лаб
латинский алфавит, Олеся Каракоця


работы студии Studio Innate
Также в качестве неосознанного вдохновения выступил Техрот — класс противников из канадской видеоигры Warframe. Выглядят они как слабо сформированные сгустки биомассы, в которые вросли системные блоки, мониторы и другие металлические формы; всё густо переплетено искрящими проводами и издаёт звуки старых модемов вместе со злобным рычанием. Иллюстраций не прикладываю — зрелище не из приятных
ПРОЦЕСС РАБОТЫ
Решил продолжать тестировать новый функционал Фигмы, которого с появлением нейросетей развелось немало — в этот раз досталось бета-версии видеоредактора Motion (а новые шейдеры красуются на обложке этого кейса). Например, оказалось, что анимировать передвижение конкретных точек, как я планировал изначально, там пока нельзя, а при анимации прозрачности слоя, на который наложен эффект свечения, появляется интересно выглядящее «отставание» — фон появляется по времени, а свечение контура сразу. Из того идея анимации, по факту случайно, и выросла
Начал продумывать идею букв с самой логичной части — с цифр. По четыре (зачем-то на свою голову выбралось такое число) варианта буквы будет, как-то надо их обозначать. Открыл Эксель, набросал цифры на квадратной сетке 12 на 12 и эдакую «тепловую карту», обозначающую, какие части сетки использоваться не будут в принципе. Заранее подумал, что не стоит путать 3 и З, 4 и Ч, 1 и букву «палочка»... стоп, её здесь и нет, можно путать

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

Для основных букв сетка стала и побольше, 30 на 30, и посложнее, потому что помимо квадратов, появились ещё и такие треугольники. Здесь же первый метод ускорения производства — строится фоновая сетка, потом произвольно обводится инструментом «Лассо», копируется, заливается, повторить четыре раза (или больше, если есть внутренние формы, как у В или Ю). Вы великолепны! Пока не приходится анимировать переход...

Для анимации букв пришлось вводить второй метод ускорения производства: упросить умного электронного китайца написать мне макрос (!) на VBA, который сравнивает две соседние таблички Экселя, подсчитывает разницу и раскрашивает их — что прибавить, что убавить, а где поменять треугольник, цифры как раз об этом (можете посмотреть на А и догадаться, что они обозначают, если хочется)


Когда в результате подсчётов выяснилось, что вместо тридцати кусочков, как в цифрах, передвигать придётся сто шестьдесят, решил, что соприкасающиеся квадраты и треугольники будут анимироваться совместно, как единый кластер
С анимацией цифр всё относительно легко — нарисовал в Экселе, руками посмотрел, где квадрат «выключился», где «включился», руками посчитал число изменившихся квадратов, пошёл на случайный сайт в интернете, чтобы сделать случайный порядок анимации, пошёл в Фигма Моушене руками нужным квадратам нужные ключевые кадры расставил, и в принципе всё. А с буквами... отрисуй, руками подели на кластеры, ключевые кадры расставь, а главное, не забудь поправить главную беду сетки — маленькие треугольнички, которые вершиной в перекрестье стоят, а то и не одной. В общем, сделал первые две анимации и устал смертельно, забросив их почти до конца (но сами буквы выкладывал вовремя)
Почему буквы не показываю? Ну сейчас, закончу с процессами и вывалю все скопом, разглядывать устанете. Так вот, помимо самих четырёх букв, также решил показывать их «сумму», наложив все четыре друг на друга. На букве И окончательно стало понятно, что «сумма» порой собирается в нечитаемое месиво, поэтому ввёл ещё и «тепловую карту», накладывая одну на другую с режимом наложения. Когда к букве Н форма «тепловой карты» устоялась, сделал её и для предыдущих букв — а публично не показывал, в кейсе они будут впервые




Со временем, не помню уже, на какой букве, пришёл с третьему методу ускорения производства — сторонние плагины Фигмы. Один, Snap Point in Path за авторством benoit, делает все координаты выбранных фигур кратными введённому числу (то есть отлично привязывает к сетке, жаль, срабатывает через раз и приходится перепроверять), второй, Split Vectors за авторством Neil Akhmetov, разделяет «сумму» на кластеры для анимации. Без паники, на картинке всё станет понятно (они так не разлетаются, просто эффектно выглядит)

Только на букве Л догадался о четвёртом способе ускорения производства — делить на кластеры с помощью булевых функций — берётся четыре буквы, их «сумма» и пересекаются. Например, пересечение всех пяти фигур даст кластеры, которые применяются во всех буквах, а пересечение «суммы» и первой буквы с вычетанием остальных даст кластеры, применяющиеся только в первой. Заодно простил себе маленькие треугольнички (вот их даже сверху на картинке видно), и единственной сложной частью оставалась только расстановка ключевых кадров
С ней пришлось бороться с помощью электронного спецагента китайской разведки в течение нескольких дней — сначала я долго не решался, потом приходилось кое-что чинить. В итоге аж на букве Ф появился отдельный новый плагин, специально для расстановки ключевых кадров в случайном порядке каждые 25 миллисекунд в заданном промежутке для выделенной группы элементов (даже в разных буквах можно всё сразу выделить, и нормально отработает, чудеса). Забавный факт — функция добавления новых плагинов без публикации их в общий доступ работает только в скачанной на компьютер версии Фигмы
Кстати, во всех буквах все четыре анимации перехода занимают время разное между собой и одинаковое между буквами — оно взято у цифр сверху, где высчитано по числу изменяющихся элементов
Вот теперь, кажется, мой запас слов кончился. Пора смотреть буквы!
СКЛАД БУКВ
Я когда в Телеграме написал, что букв получилось почти две сотни, это была вовсе не шутка. Даже если выкинуть совсем нечитаемые формы «сумм», всё равно останется ну хотя бы 180 вариантов. Вот они все, слева направо и сверху вниз

За, тьфу-тьфу, нормальную работу видео спасибо Kinescope, а за отличающиеся от картинок цвета «спасибо» экспорту Фигмы, с которым я не знаю, что делать. Для склеивания трёх в одну без потери качества пришлось расчехлить давно позабытый After Effects






















































































































































Бонус: на букве Ч показал альтернативную, светлую тему — придумал её в самом начале, ещё на А
















































СПАСИБО ЗА ВНИМАНИЕ!












