Вертикальное смещение

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

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

Продемонстрирую эту проблему на примере собственного пака. Максимальный размер кастомного эмодзи в телеграме составляет 100×100 пикселей, но, расположив их в столбик, мы заметим, что они не просто стоят впритык, а наслаиваются друг на друга. Зачем и почему так происходит? Лично я ответить не могу, но решать это всё-таки как-то нужно.

Первым делом выстраиваем сетку из эмодзи под тот размер графики, который нам нужен, у меня это прямоугольник 4 на 3. Делаем скриншот с телефона и закидываем в фигму. Для корректного масштабирования создаём фигуру 400 на 300 пикселей, подгоняем под неё эмодзи на скриншоте и… вот оно: теперь мы видим, насколько изображение будет «сплющено» в конечном итоге.

Располагаем поверх заданной фигуры желаемое изображение и нарезаем на квадраты 100×100. Затем смещаем их ровно так, как они выглядят на скриншоте — этим мы моделируем будущее смещение.

Теперь нам нужно определиться с «рядом — опорной точкой». В моём примере это будет второй ряд, а значит, все остальные мы смещаем так, чтобы они идеально подошли к среднему ряду.

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