Как сделать анимированный пиксель-арт и экспортировать GIF

Чтобы сделать анимированный пиксель-арт, не обязательно рисовать каждый кадр. В WigglyPaint линии слегка двигаются благодаря кисти. После завершения рисунка можно выбрать фон, обрезать область и сразу экспортировать GIF.

Такой способ подходит для аватаров, реакций в чатах, небольших маскотов и публикаций. WigglyPaint не преобразует фотографии и не создаёт игровые спрайты. Вы рисуете самостоятельно, а инструмент добавляет штрихам живое движение.

Выберите сюжет, который читается как аватар

Начните с лица, символа, растения или простого животного. Полноразмерный персонаж с аксессуарами быстро потеряет детали в маленьком окне чата.

Используйте три-четыре цвета и уменьшите масштаб. Если силуэт не узнаётся без глаз и узоров, упростите его до следующего шага.

Сравните кисти на одной форме

Нарисуйте несколько одинаковых кругов. Сильное дрожание подойдёт для эмоциональной реакции, спокойное — для аватара, который постоянно остаётся на экране.

Проверьте фон для светлой и тёмной темы

Если яркость персонажа и фона похожа, контур исчезнет. Сначала добейтесь контраста, а затем добавляйте дополнительные цвета.

Обрежьте рисунок с небольшим запасом

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

Экспортируйте GIF и откройте его на телефоне

Проверьте файл в реальном размере. Если выражение лица пропало, сначала удалите второстепенные узоры и только потом меняйте форму.

Полный пример: реакция «уже иду»

Нарисуйте круглое лицо с глазами, направленными в сторону, каплей пота и маленькой поднятой рукой. Этих элементов достаточно для смысла «уже иду», поэтому тело и сложный фон не нужны.

Для лица выберите спокойную кисть, а для капли — более заметное движение. Если нужен текст, ограничьтесь словами «уже иду» и сделайте буквы стабильнее персонажа. Длинная фраза слишком уменьшит лицо в формате реакции.

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

Исправление типичных проблем

• Сильное мерцание: сократите количество движущихся внутренних линий.
• Силуэт не узнаётся: вернитесь к одной простой форме.
• Контур пропадает: увеличьте разницу яркости с фоном.
• Край выглядит обрезанным: добавьте свободное пространство по направлению движения.

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

Когда нужна покадровая анимация

WigglyPaint автоматически анимирует штрихи. Для циклов ходьбы, точного тайминга и spritesheet используйте руководство по анимации пиксель-арта.

Частые вопросы

Нужно ли устанавливать программу?

Рисование, обрезка и экспорт GIF выполняются в браузере.

WigglyPaint превращает фотографию в пиксель-арт?

Нет. Вы рисуете объект самостоятельно, а кисть добавляет движение линиям.

Почему маленький GIF выглядит шумно?

Сократите количество деталей, сделайте контур заметнее и увеличьте контраст с фоном.

Сколько цветов использовать?

Для первой версии достаточно трёх-пяти цветов. Тени и акценты стоит добавлять только после проверки маленькой иконки.

Можно ли добавить русский текст?

Одно-два коротких слова читаются лучше предложения. Оставьте вокруг букв пространство и сделайте их движение слабее движения персонажа.