Не совсем пиксельная анимация

Помимо классической пиксельной анимации, мне предлагали разобрать комбинированный подход, как в 🕺Pixel Pigeon

Поэтому рассказываю 👇
В основе – всё тот же пиксельный персонаж и принцип пиксельной анимации (пост об этом), но с небольшими изменениями.

Hold Keyframe используем только при резком изменении ракурса или состояния объекта.
Во всех остальных случаях добавляем динамику за счёт плавных изменений и движений пикселей.

Level 1. Разбиваем персонажа на части – руки, ноги, голова и тд
Анимируем Position у каждой части, как если бы это был обычный персонаж.

Level 2. Теперь подключаем Rotation и Scale.
Не забываем про Offset

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

Level 3. Добавляем анимацию Path по той же технике.
Hold Keyframe ставим только при сильном изменении формы (в этом примере, при моргании и движении хвоста).

Анимацию радуги я сделал обычной обводкой, поcле чего перевел в пиксели с помощью скрипта PixelGrid

🌈 Таким образом получается простая, но живая комбинированная пиксельная анимация.
📁 Проект можно скачать в комментариях!

В другой раз повезет

🎁 Отсылки на PvZ мы с вами не найдём, зато поклонники другой культовой игры точно останутся довольны 🤫

Ваши догадки?

Совместно с Gift Craft запустили большую активность!

Теперь за каждый созданный эмодзи ты получаешь билеты 🎟 – они будут участвовать в розыгрыше призов.
Чем больше билетов — тем выше шанс забрать подарки 🎁

Сколько билетов даёт каждый тип эмодзи:

🍓 Berry Box — +4 билета
🧸 Toy Bear — +3 билета
🙉 Jolly Chimp — +2 билета
🎀 Bow Tie — +1 билет

🏆 Бонус за редкости: в Jolly Chimp и Bow Tie есть части разной редкости.
🔸 Rare часть → +3 билета за каждый редкий элемент
🌟 Legendary часть → +5 билетов

Один эмодзи может принести очень много билетов, если повезёт ✨

В знак благодарности тем, кто давно с нами — первые пять комментаторов, кто правильно укажет порядок выхода всех подарков для скрещивания, получат приятный бонус на баланс бота! Спасибо, что остаётесь с нами и поддерживаете! ❤️

3️⃣года назад я собрал этот хэллоуинский коллаж с @stickers_origash – ещё во времена, когда только появлялись первые emoji.
А сегодня мы занимаемся только подарками – кажется, пора обновлять свои коллажи 🤔

А вот и набор с моей анимацией для сегодняшней ночи 🌚

🔤🔤🔤🔤🔤
🔤🔤🔤🔤🔤🔤🔤🔤🔤

Обычно я делаю не так много иллюстраций к скинам – всё же больше анимирую, но в этот раз я доволен результатом 😍

🍀Апрув пиксельного скина — одно удовольствие! Так и хочется ещё поэкспериментировать с пикселями.

Хотели бы увидеть больше пиксельных скинов?

✈️Изменение сетки объекта

Регулярно появляются вопросы об изменении перспективы или сложной деформации, и многие пытаются сделать это «на глаз». Но зачем, если в Illustrator уже есть встроенный инструмент – Envelope Distort → Mesh

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

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

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

Видео выложу в группу Класс Идей, куда планирую перенести все профильные беседы по анимации.
Группа открыта всем – вступайте, задавайте вопросы и учитесь новому! 🙌

Творческий конкурс!

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

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

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

Задача: Придумать и визуализировать скин на 🎁
(Можно рисовать в любом удобном стиле — хоть карандашом или ИИ. Главное — соответствовать простым условиям и придумать классную идею)

Условия:
– Координатно менять форму нельзя.
– Никакой запрещенки.
– Это должен быть новый скин (нельзя брать уже опубликованные).
– Можно предлагать сколько угодно концептов.

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

Призовых мест будет несколько, по разным категориям:
🎁 Самая оригинальная идея*
🍦 Самый смешной концепт*

Мишки с автографом получат авторы:
🧸 Концепта с наибольшим количеством реакций
🧸 Самого визуально красивого концепта*
🧸 Тот, кто предложит больше всех концептов
🧸 И победитель народного голосования в чате @ChatofIdea

Бонус: 🎁Одна из анимаций, если кто-то успеет

*В выборе победителя учитывается субъективное мнение админа.

Победителей определим в понедельник. Соберу всех в отдельный пост с указанием авторства. Вдруг какая-то из идей успеет попасть в набор.

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

Всем побольше вдохновения!

Пару слов в виде дисклеймера:
– Отправляя материалы, вы соглашаетесь, что делаете это добровольно. Их возможное использование Telegram и другими пользователями не предполагает выплат, авторских прав или упоминания авторов.
– У меня (как и у других авторов) не закончились идеи для скинов — конкурс проводится не из-за их нехватки. Это исключительно моя личная инициатива: хочется сделать что-то приятное для творческого комьюнити, дать вам возможность проявить себя и просто добавить немного вдохновения.

Первый совместный коллаж команды!

Пока я заряжен вашим откликом, начал делать следующую работу, но прежде стоит закончить ностальгическую ветку и опубликовать здесь коллаж, который сделан ещё в 2022 году.
247 персонажей от всей команды Telegram (и это были далеко не все на тот момент).
Собирался вручную и с любовью ❤️

Ходят слухи, что он висит в офисе Telegram

Так же напоминаю, что вы можете подписаться на всех авторов, которые ведут свои каналы – всего одним нажатием👇
✈️ Добавить папку

А если вы анимируете – можете вступить в профильную беседу и учиться вместе с нами
✈️ Вступить в беседу

Полная версия для сохранения! ❤️

Памятка: Shape Layer в After Effects

Добавил ключевые иконки для наглядности.

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

1. Основные свойства слоя

• Зажать и переместить – менять порядок слоёв
• ⚫️ Выбрать цвет слоя через нажатие на Label
• Select Label Group – выбирает все слои одинакого цвета
• ⚫️ Shy – скрывать слои только с таймлайна
• ⚫️ Скрыть слои полностью
• ⚫️ Solo – показать только выбранные слои
• ⚫️ Блокировка слоя
• ⚫️ Активировать слой для 3д манипуляций
• ⚫️ Parent & Link – привязка слоёв друг к другу
• ⚫️ Изменить качество прорисовки слоя
• ⚫️ Layer Markers на таймлане позволяет оставить маркеры на любом кадре

2. Базовое управление слоями

• Enter — переименовать слой
• Ctrl+D — дублировать слой
• I / O — перейти к началу/концу слоя
• [ / ] — переместить начало/конец слоя на текущий кадр
• Alt + [ / ] — обрезать начало/конец слоя до текущего кадра
• Ctrl + Shift + C — собрать выбранные слои в отдельную композицию
• Ctrl + [ / ] — переместить слой выше / ниже
• Ctrl + Shift + [ / ] — переместить слой в самый верх/низ списка
• Ctrl + ↑ / ↓ — выделить слой выше/ниже (+Shift — добавить к выделению)
• ⚫️ ПКМ → Transform → Center Anchor Point in Layer Content – выравнивает Anchor Point по центру слоя

3. Внутри ⚫️ Shape Layers

• Shape Layer состоит из Contents и Transform
• Каждая группа внутри Contents имеет свой Transform
• ⚫️Add → добавляет на выбранный слой/группу фигуру, заливку, обводку, градиенты и др.
• Ctrl + G — объединение нескольких групп
• Свободное переупорядочивание групп
• Возможность менять порядок Fill / Stroke

4. Плагины

Motion Tool:

• ⚫️ – Разгруппировать внутренние группы на отдельные слои
• ⚫️ – Объеденить слои в один слой
(могут полететь градиенты)

5. Что не работает в Lottie

• Модификаторы (Pucker & Bloat, ZigZag, Wiggle Paths и др.)
• Маски → используем Track Matte
• Эффекты (Effects) почти всегда игнорируются
Полный список доступных эффектов тут

#памятка@IdeaAnimator

Сегодня свой день рождения отмечает креативный директор Telegram @ohuenko

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

С днём рождения! 🎂

Как сделать анимацию хвоста в Lottie

Для анимации хвоста, состоящего из одной линии с двумя обводками, расположенными друг под другом, отлично подходит скрипт Create Nulls From Path.
Скрипт автоматически создаёт null-объекты в каждой точке контура (path) и связывает их с ним. В результате вы управляете формой линии не напрямую через path, а через отдельные управляющие точки.

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

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

После завершения анимации не забудьте запечь анимацию, чтобы Bodymovin корректно её отрендерил.
Запекание превращает движение null-объектов в ключи самого path – буквально создавая ключ на каждом кадре. Это необходимо, потому что Bodymovin не поддерживает выражения.
Чтобы снизить размер файла и количество ключей, рекомендуется перед запеканием уменьшить fps композиции

Таким способом можно создавать любые хвосты, верёвки, цепи и тп.
Метод идеально подходит для линий с небольшим количеством точек.
Например, я использовал этот способ для анимации лески в этом подарке 🍀

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

Группа открыта для всех – присоединяйтесь, задавайте вопросы и прокачивайтесь в анимации! 🙌

📁Файл проекта и скрипт уже лежат в комментариях!