Стандартный формат emoji для Telegram - 100/100px - это слишком маленький формат, при сохранении и выгрузке через бот он неизбежно сшакалится и будет пикселиться.
Чтобы обойти это, мы будем выгружать наше emoji не как статичное, а как анимированное.
Для этого нам понадобятся программы ai и ae, а также терпение и успокоительные. Я вообще не аниматор, и там вообще не нужны навыки анимации, но даже без этого есть гора неочевидных нюансов.
Шаг 1 - отрисовываем emoji в векторе и сохраняем в формате 512/512px в ai, группируем слои и объекты, делаем нейминг и отрисовку по правилам преданимационной подготовки стикера. Хотя у нас нет анимации - это очень важно.
Шаг 2 - скачиваем специальный плагин для анимационного формата tgs и устанавливаем его, это инструкция от Telegram.
Шаг 3 - скачиваем специальный плагин для гладкого импорта из ai в ae.
Называется - Overlord, он платный 45$, много инфы на английском, но он очень упрощает жизнь.
Шаг 4 - или допустим у вас нет 45$, вы не хотите стать 🏴☠️ и у вас железные нервы.
Тогда открываем файл из ai в ae вот по этой инструкции в ручную.
Самое главное перевести файл в векторные слои.
Шаг 5 - забудьте про градиенты, все они в лучшем случае отображаются серой заглушкой, в худшем образуются маски слоя. Есть вариант в ручную все перекрасить.
Сохраняем все элементы файла с градиентом в черном или белом цветах, открываем в ae и в ручную создаем свойства: градиент, уточняем цвета по файлу-примеру из ai, вводя их вручную по hex, вручную управляя шкалами.
Гарантирую после второго emoji вы начнете задумываться - «а так ли необходим тут градиент?».🤔 Так я отказалась от радиального градиента на каждой щечке. Но оказалось, что даже прозрачность управляется в ручную 🤡. На элементах, где это казалось необходимым - я оставила и реально перенастроила все в ручную (❤️🔥😍🥰💙🔥 добаные сердечки, сколько они съели моих нервных клеток).
Шаг 6 - сохраните итоговый файл в tgs. В ae нажимается окно ~> расширения ~> выбирается Bodymovin for Telegram Stickers (это тот плагин который мы скачивали в начале) ~> нажимаем кнопку рендеринг и сохраняем.
❗️Если вы грамотно сгруппируете слои по правилам анимации и превратите слои в векторные в ae бот ругаться не будет, если бот ругается то у вас либо слишком много точек, либо элементы не векторные.
Вам не хватило аргументов, чтобы не использовать градиенты? Может сложностей маловато? Ловите еще:
- даже если вы все отрегулировали вручную
- даже если вы богач и заплатили 45$ за крутой плагин
в конечном итоге все равно все ваши градиенты могут стать черно-белыми при экспортировании в tgs (т. е. на финальном рендеринге) 🤡 вот такой баг
как бороться?
- переименовать каждый градиент в креативное название на латинице, добавив цифру в названии
- пересохранить проект в ae перед этим
обычно эти два действия помогают победить баг - магия 🪄
в общем, очень рада, что разобралась, надеюсь, что будет полезно - если знаете еще лайфхаки - делитесь в комментариях
результат того стоит ❤️ + 1 навык и множество возможностей
🦊foxdizigner.studio - подписывайся на Tg-канал, чтобы больше узнавать о нюансах стикер-индустрии и векторной digital-иллюстрации.