В этом уроке мы разберём, как сделать GIF-анимацию из собственных рисунков. Получится жёлтое лицо, которое двигается в цикле из трёх кадров. Так же можно сделать моргание, взмах рукой, прыгающий мяч или стикер.
Это не ИИ-генератор и не конвертер видео. Вы начинаете с чистого холста и рисуете каждый кадр. Линии WigglyPaint уже слегка дрожат, а панель Animation последовательно показывает разные рисунки.
Если вы искали, как сделать GIF-анимацию или просто как сделать анимацию, здесь показан ручной путь: один кадр — один рисунок, цикл — возврат последнего кадра к первому, калька — бледная подсказка предыдущего кадра. Так можно оживить рисунок и создать анимацию онлайн без нейросети: получится простая покадровая анимация и зацикленная анимация.
Коротко
Нарисуйте первую позу, скопируйте кадр, измените только движущуюся часть, добавьте третий кадр, проверьте переход от последнего к первому и экспортируйте GIF.
Перед началом
- Выберите один объект и одно действие.
- Возьмите два-три контрастных цвета.
- Рисуйте крупно для маленького превью в чате.
- Первую работу сделайте из трёх-четырёх кадров.
Как сделать GIF-анимацию по шагам
1. Нарисуйте первую позу
Откройте WigglyPaint, выберите кисть и цвет и нарисуйте начало движения. Первый кадр часто становится статичным превью, поэтому должен быть понятен сам по себе.
2. Откройте панель Animation
Разверните Animation frames внизу. Появятся миниатюры, воспроизведение, калька и большая кнопка плюс. Выберите первый кадр.
3. Скопируйте кадр
Нажмите Copy frame, если основная форма не меняется. Затем исправьте только глаза, рот или положение. Пустой кадр нужен лишь для совсем другого рисунка.
4. Включите кальку
Нажмите значок призрака. Предыдущий кадр станет бледной подсказкой, которая не попадёт в GIF. Совместите неподвижные части и переместите движущиеся.
5. Добавьте третью позу
Скопируйте ещё раз и внесите маленькое изменение. Прыжок: вверх-вниз-вверх; моргание: открыто-закрыто-открыто. Трёх поз достаточно для первой покадровой анимации.
6. Проверьте цикл
Включите просмотр и посмотрите минимум три повтора, особенно переход от последнего кадра к первому. Слишком короткую позу продублируйте. Отдельной настройки FPS и времени кадра пока нет.
7. Экспортируйте и откройте GIF
Нажмите Export, сохраните GIF и откройте файл вне редактора. Проверьте движение, читаемость в маленьком размере и плавное начало нового цикла.
Готовый результат
Файл ниже экспортирован по этим шагам. Крупный объект, мало цветов и изменение только позиции и выражения делают движение понятным даже в сообщении или ленте.
Как сделать GIF удобным для публикации
- Уберите лишнее пустое место.
- Меняйте одно действие за кадр.
- Начинайте с крупных форм.
- Дублируйте кадр для паузы.
- Проверяйте переход конец-начало.
- Откройте файл перед публикацией.
Ограничения GIF, о которых лучше знать заранее
GIF анимация не содержит звук и использует не более 256 цветов в кадре. Плоские цвета, крупная форма и короткий цикл обычно выглядят чище и весят меньше, чем градиенты, фотографии или длинная сцена.
Частые проблемы
- Слишком быстро: Продублируйте позу, которую нужно задержать.
- Цикл дёргается: Сблизьте последнюю и первую позиции или добавьте переход.
- Размер меняется: Включите кальку и совместите неподвижные части.
- Виден один рисунок: Проверьте миниатюры и экспортируйте после завершения всех кадров.
- Файл тяжёлый или мутный: Сократите кадры, цвета, детали и пустое поле.
- Скачанный файл не двигается: Откройте его в браузере или GIF-приложении; галерея может показывать только первый кадр.
Где использовать GIF
Короткий цикл подходит для реакции, стикера, поста, учебного примера или игровой идеи. В GIF нет звука, поэтому движение должно объяснять себя. Подробнее о кнопках — в уроке покадрового рисунка, другие инструменты — в подборке сайтов для анимации.
Частые вопросы
Можно сделать GIF бесплатно?
Да. Рисуйте и экспортируйте в веб-редакторе без установки программы.
Можно автоматически оживить фото или видео?
Нет. Здесь каждый кадр рисуется вручную; это не конвертер.
Сколько кадров нужно новичку?
Начните с трёх-четырёх и добавляйте только нужные переходы.
Можно изменить скорость одного кадра?
Отдельной длительности пока нет. Продублируйте кадр, чтобы поза держалась дольше.
Как сделать цикл незаметным?
Сравните последний кадр с первым. Сблизьте положение объекта или добавьте переходный кадр, возвращающий его к началу.
У GIF бывает звук?
Формат GIF не хранит аудио. Действие и ритм должны быть понятны без звука.
Можно экспортировать видео из этого веб-процесса?
Урок описывает экспорт GIF в веб-редакторе и не обещает видеофайл из той же последовательности кадров.
Сделайте первый GIF из трёх кадров
Сначала замкните простое движение в цикл, затем добавляйте детали.
Начать рисовать