Как сделать анимацию: пошаговый урок по рисованию кадров

Хотите узнать, как сделать анимацию из своих рисунков? В WigglyPaint это очень просто! Вам нужно нарисовать несколько картинок, которые называются кадрами. Каждый новый кадр должен немного отличаться от предыдущего. Когда программа быстро показывает их по очереди, рисунок оживает и начинает двигаться.

Здесь вы рисуете каждый кадр сами. WigglyPaint не использует нейросети (ИИ) и не превращает готовые фото или видео в мультики автоматически. В этом уроке мы пройдем весь путь: от первого штриха до готовой GIF-ки.

Что такое покадровая анимация?

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

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

WigglyPaint оживляет рисунки двумя способами:

1. Линии сами по себе забавно дрожат (эффект живого рисунка).
2. Панель кадров показывает ваши картинки по очереди.

С помощью кадров вы можете заставить персонажа помахать рукой, цветок — распуститься, а мячик — подпрыгнуть.

Для чего подходит WigglyPaint?

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

Здесь вы можете:

• добавить новый кадр;
• скопировать кадр;
• удалить кадр;
• включить «кальку» (видеть прошлый рисунок как серую подсказку);
• проигрывать анимацию по кругу;
• сохранить результат как GIF;
• поделиться готовой работой в сообществе WigglyPaint.

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

Подготовка к работе

• Лучше откройте этот урок на компьютере — на большом экране удобнее нажимать кнопки.
• Начните с чего-то простого: моргающее лицо или прыгающая точка.
• Возьмите два-три цвета. Чем проще рисунок, тем легче его анимировать.
• Не старайтесь рисовать идеально ровно. Понятное движение важнее, чем идеальные линии!

Как сделать анимацию шаг за шагом

1. Начните новый рисунок

• Действие: Откройте WigglyPaint и нажмите кнопку Click to start drawing (Нажмите, чтобы начать рисовать).
• Что появится: Большой белый холст и инструменты для рисования.
• Что делать дальше: Выберите кисть и цвет.

Нарисуйте что-то крупное и простое. Звезда, цветок или забавная рожица — отличный выбор для начала.

2. Откройте панель анимации

• Действие: Нажмите на вкладку Animation (Анимация) в самом низу экрана.
• Что появится: Лента с маленькими квадратиками (это ваши кадры), кнопка Play (треугольник), кнопка-призрак (калька) и большой плюс.
• Что делать дальше: Убедитесь, что выделен первый кадр.

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

3. Нарисуйте первый кадр

• Действие: Нарисуйте начальную позу вашего предмета или персонажа.
• Что появится: Рисунок будет виден и на большом холсте, и в первом маленьком квадратике внизу.
• Что делать дальше: Полностью закончите этот рисунок, прежде чем добавлять новый кадр.

Например, если вы делаете моргающее лицо, нарисуйте его с открытыми глазами. Если делаете прыгающий мяч — нарисуйте мяч в самом верху холста.

4. Скопируйте кадр или добавьте пустой

Если следующий рисунок будет почти таким же, скопируйте текущий кадр. Затем сотрите ластиком и нарисуйте заново только ту часть, которая двигается.

• Действие: Нажмите кнопку копирования (два квадратика) рядом с картинкой кадра.
• Что появится: Второй кадр с точной копией вашего рисунка.
• Что делать дальше: Измените одну маленькую деталь. Например, глаза, руку или положение мяча.

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

5. Включите кальку (Onion skin)

Калька (onion skin) — это полупрозрачный силуэт прошлого кадра. Она помогает понять, где был рисунок секунду назад. На готовой GIF-ке этой серой подсказки не будет.

• Действие: Нажмите кнопку в виде призрака.
• Что появится: На холсте бледно-серым цветом проступит ваш предыдущий рисунок.
• Что делать дальше: Ориентируясь на серый силуэт, нарисуйте новое положение предмета.

Если сдвигать линии совсем чуть-чуть, движение будет плавным. Если делать большие отступы, предмет будет двигаться очень быстро.

6. Запустите анимацию

• Действие: Нажмите кнопку Play (треугольник).
• Что появится: Ваши кадры начнут быстро сменять друг друга по кругу.
• Что делать дальше: Посмотрите, красиво ли получилось. Обратите внимание на переход от последнего кадра обратно к первому.

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

7. Как сделать так, чтобы кадр показывался дольше

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

• Действие: Выберите нужный кадр и нажмите кнопку копирования один или несколько раз.
• Что появится: В ленте будут идти несколько одинаковых картинок подряд.
• Что делать дальше: Нажмите Play и проверьте, стала ли пауза достаточно долгой.

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

Это отличный способ управлять временем без сложных настроек FPS (кадров в секунду).

8. Сохраните готовую анимацию

• Действие: Когда результат вам понравится, нажмите кнопку Export (Экспорт).
• Что появится: Меню сохранения.
• Что делать дальше: Скачайте анимацию как GIF-файл или опубликуйте ее в сообществе WigglyPaint Community.

Откройте сохраненный файл на компьютере и убедитесь, что анимация работает отлично.

Пример: как оживить рисунок и сделать моргающее лицо

Моргающее лицо — идеальный проект для новичка. Большая часть рисунка не двигается, поэтому вы быстро поймете, как оживить рисунок.

1. Нарисуйте лицо с открытыми глазами.
2. Скопируйте этот кадр.
3. На втором кадре сотрите глаза и нарисуйте их полузакрытыми.
4. Снова скопируйте кадр и нарисуйте глаза полностью закрытыми.
5. Теперь скопируйте кадр с полузакрытыми глазами и поставьте его в самый конец.
6. Нажмите Play. Порядок должен быть таким: открытые → полузакрытые → закрытые → полузакрытые.
7. Если лицо моргает слишком быстро, скопируйте первый кадр (с открытыми глазами) три-четыре раза подряд.

Вы можете использовать эту же идею для цветка, который распускается, или звезды, которая пульсирует.

Простые советы для новичков

• Меняйте только одну деталь за раз (например, только улыбку).
• То, что не двигается, старайтесь не перерисовывать.
• Всегда включайте кальку (кнопку-призрак), чтобы не потерять пропорции.
• Чаще нажимайте Play. Проверяйте движение каждые два-три кадра, не ждите до самого конца.
• Делайте копии кадров для пауз.
• Рисуйте крупно и просто, чтобы рисованная анимация хорошо смотрелась даже на экране телефона.

Если что-то пошло не так

Я не могу найти панель анимации

Сначала обязательно нажмите Click to start drawing. Только после этого в самом низу появится полоска Animation. Нажмите на нее, чтобы открыть кадры.

Анимация слишком быстрая

Скопируйте те кадры, которые зритель должен разглядеть. Две-три копии подряд сработают как отличная пауза.

Рисунок слишком сильно прыгает

Включите кальку (призрака). Сделайте так, чтобы новые линии были ближе к серой подсказке.

Анимация дергается в конце

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

При нажатии Play ничего не происходит

Убедитесь, что у вас есть хотя бы два разных кадра. Если кадр только один, двигаться нечему!

Что умеет WigglyPaint сегодня

Функция	Доступно сейчас?
Рисовать каждый кадр от руки	Да
Добавлять, копировать и удалять кадры	Да
Видеть прошлый кадр как серую подсказку	Да
Проигрывать повторяющуюся анимацию	Да
Сохранять GIF анимацию	Да
Делиться работами в Сообществе	Да
ИИ создает анимацию за вас	Нет
Превращение картинки или видео в анимацию	Нет
Разное время для каждого кадра	Пока нет; вместо этого копируйте кадр
Изменение FPS (кадров в секунду)	Пока нет
Сохранение в формате видео (MP4)	Пока нет
Редактирование кадров в мобильном приложении	Этот урок описывает веб-версию

Частые вопросы (FAQ): как сделать анимацию

Как сделать анимацию из рисунка?

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

WigglyPaint — это бесплатная программа?

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

Нужно ли скачивать приложение?

Нет, все работает онлайн. Когда закончите, GIF анимация скачается на ваше устройство абсолютно бесплатно.

Как не запутаться в кадрах при рисовании?

Вам поможет калька (onion skin). Она показывает прошлый рисунок светло-серым цветом. Просто обводите его с небольшими изменениями.

Использует ли WigglyPaint нейросети (ИИ)?

Нет, это классическая 2D анимация, где вы творец каждого кадра. Сайт дает удобные кисти, кальку и сохранение в GIF, но рисуете вы сами.

Сколько кадров нужно для начала?

Для первого раза хватит 3–5 кадров. Этого достаточно, чтобы персонаж моргнул или мячик подпрыгнул.

Можно ли замедлить анимацию?

Настроек скорости (FPS) здесь нет. Если хотите замедлить движение, просто скопируйте нужный кадр несколько раз.

Анимация будет повторяться?

Да, при просмотре и в готовой GIF-ке кадры проигрываются по кругу (зацикливаются).

В каком формате скачивается файл?

Только в GIF. Сохранение в формате видео (MP4) при покадровой анимации пока не поддерживается.

Создайте свою первую анимацию

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