Чтобы сделать анимацию в Aseprite, откройте временную шкалу клавишей Tab, нарисуйте первый кадр, добавьте следующий через Alt+N и дорисуйте движение. Включите кальку клавишей F3, чтобы видеть соседние кадры, проверьте результат по Enter, задайте длительность кадров через «Кадр → Свойства кадра» и экспортируйте в GIF командой «Файл → Экспортировать → Экспортировать как». Дальше разберём каждый шаг, настройки кальки, теги для нескольких анимаций в одном файле и ошибки, на которых застревают новички. Если вы ещё выбираете редактор, сначала посмотрите обзор программ для рисования на ПК: там Aseprite сравнивается с бесплатными аналогами.
CheckroiПодборка курсов по пиксель-арту4 курса • 2 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Кадр, ячейка и временная шкала: три слова, без которых не разобраться
Aseprite с самого начала делали как редактор анимированных спрайтов, поэтому анимация в нём собирается прямо на временной шкале (в русской локализации «Временная шкала», в английской Timeline). Шкала открывается через «Вид → Временная шкала» или по Tab и сама появляется, когда вы добавляете кадр или слой. По документации Aseprite, в ней строки это слои, а столбцы это кадры.
| Термин | Что это | Где на шкале |
|---|---|---|
| Кадр (frame) | Одна картинка анимации во времени со всеми слоями сразу | Столбец с номером в заголовке |
| Ячейка (cel) | Изображение одного слоя в одном кадре | Клетка на пересечении строки слоя и столбца кадра |
| Слой (layer) | Прозрачная плёнка, которая тянется через все кадры | Строка с именем и глазом видимости |
| Тег (tag) | Именованный диапазон кадров, например «idle» или «run» | Цветная полоса над номерами кадров |
Ячейка это то, что вы рисуете кистью на самом деле. Один кадр состоит из стопки ячеек по числу слоёв, поэтому персонажа удобно рисовать на одном слое, а фон на другом: фон рисуете один раз, а перерисовываете только героя. Если слои для вас пока тёмный лес, идея та же, что и в классической покадровой анимации на прозрачной плёнке, только цифровая.
Пошаговая инструкция: первая анимация за семь шагов
- Создайте спрайт. «Файл → Новый», для пробы хватит холста 32×32 пикселя. Цветовой режим лучше сразу поставить Indexed: GIF всё равно хранит не больше 256 цветов, и в индексированном режиме вы это увидите заранее.
- Нарисуйте первый кадр. Это поза покоя: по ней вы задаёте стиль, пропорции и уровень детализации. Чем меньше деталей в первом кадре, тем меньше придётся перерисовывать в остальных.
- Добавьте второй кадр. Alt+N («Кадр → Новый кадр») создаёт кадр с копией текущего рисунка, Alt+B («Новый пустой кадр») делает пустой. Для плавного движения почти всегда нужен первый вариант: вы двигаете уже готовую фигуру, а не рисуете её заново.
- Сдвиньте и дорисуйте. Инструмент перемещения (клавиша V) тащит содержимое ячейки мышью. Точнее выходит через выделение: Ctrl+A выделяет весь кадр, после чего стрелки сдвигают выделенное на один пиксель, а Shift со стрелкой на ширину ячейки сетки. Так получается второй кадр: мяч чуть выше, рука чуть впереди.
- Включите кальку. Клавиша F3 или «Вид → Показать кальку»: предыдущий кадр проступает полупрозрачным, и вы видите, насколько сдвинули объект. Подробнее о настройках ниже.
- Повторяйте, пока не замкнётся цикл. Для прыжка обычно хватает 6–8 кадров, классический цикл бега укладывается в 6–8, дыхание персонажа в покое в 4. Между кадрами ходите стрелками влево и вправо, Home и End переносят в начало и конец.
- Проверьте. Enter запускает и останавливает воспроизведение прямо на холсте, F7 открывает окно предосмотра, где анимация крутится в отдельном окошке, пока вы продолжаете рисовать.
Если кадр вышел неудачным, удалите его через Alt+C («Кадр → Удалить кадр»). Обратный порядок для всех выбранных кадров даёт Alt+I («Обратить кадры»), это быстрый способ получить движение назад без перерисовки.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяКалька Onion Skin: как видеть соседние кадры
Калька, она же onion skinning, показывает соседние кадры полупрозрачными поверх текущего. Без неё вы рисуете вслепую и угадываете, куда сдвинулась рука на прошлом кадре; 2D-художники в геймдеве включают её первым делом, ещё до второго кадра. Переключается по F3, а настройки прячутся за иконкой шестерёнки в левом углу временной шкалы, раздел «Калькирование», как описано в разделе документации об onion skinning.
- Сколько кадров назад и вперёд показывать. Для начала 1 и 1, при чистке цикла 2 и 2. Больше трёх превращают холст в кашу.
- Оттенок красный/синий. Предыдущие кадры красные, следующие синие. С этой опцией вы сразу понимаете, откуда объект пришёл и куда пойдёт.
- Непрозрачность и шаг. Чем дальше кадр, тем бледнее. Шаг 20–30 обычно читается лучше стандартного.
- Только текущий слой. Полезно, когда фон детальный: калька будет показывать лишь ваш слой с персонажем.
- Повтор через теги. С этой галочкой на последнем кадре тега калька показывает первый: вы видите, замыкается ли цикл.
- За спрайтом или перед спрайтом. В режиме «За спрайтом» калька работает только на прозрачных слоях и не показывается на слое «Фон». Если калька вроде включена, а ничего не видно, переключите режим на «Перед спрайтом».
Все настройки временной шкалы можно закрепить кнопкой «Выставить как настройки по умолчанию», тогда они переедут в новые файлы. Калька не попадает в экспорт и видна только в редакторе, так что забыть её выключить не страшно. Уверенная работа с калькой входит в базу, которую от новичка ждут в студии; в плане, как стать 2D-художником с нуля, пиксель-арт выделен отдельным направлением именно из-за таких навыков.
Скорость анимации: длительность кадра и частота
В Aseprite нет общего параметра «кадров в секунду». У каждого кадра своя длительность в миллисекундах, по умолчанию 100 мс, это зафиксировано в исходном коде редактора. Менять длительность можно тремя способами.
| Задача | Как сделать |
|---|---|
| Один кадр | Выбрать кадр, нажать P («Кадр → Свойства кадра»), ввести миллисекунды |
| Несколько кадров | Выделить диапазон на шкале, правый клик → «Свойства кадра», значение применится ко всем выбранным |
| Вся анимация | «Кадр → Постоянная частота кадров», одно значение для каждого кадра |
Чтобы перевести привычные кадры в секунду в миллисекунды, делите 1000 на число кадров: 10 к/с это 100 мс, 12 к/с округляем до 83 мс, 24 к/с до 42 мс. Для пиксельной анимации персонажа чаще берут 8–12 кадров в секунду, а отдельные кадры удлиняют, чтобы подчеркнуть паузу: удар длится 40 мс, а замах перед ним 150. Это и есть тайминг, главный навык, который отличает аниматора от человека, умеющего нажимать Alt+N.
Отдельно стоит меню «Кадр → Воспроизведение» с множителями от 0,25x до 3x. Оно ускоряет или замедляет только просмотр в редакторе, файл при этом не меняется. Если вам кажется, что анимация медленная, и вы поставили 2x, в экспорте она останется прежней. Правильный путь только через свойства кадра.
Теги: несколько анимаций в одном файле
У игрового персонажа редко бывает одна анимация: ему нужны покой, ходьба, прыжок, удар. Хранить их в разных файлах неудобно, поэтому в Aseprite их складывают в один спрайт и размечают тегами. Как объясняет документация о тегах, тег это именованный диапазон кадров со своим направлением воспроизведения.
- Выделите нужные кадры на временной шкале мышью или с зажатым Shift.
- Нажмите F2. Первое нажатие создаёт тег с именем Loop, второе открывает его свойства. Тот же результат даёт правый клик по выделению и «Новый тег» или пункт «Кадр → Теги → Новый тег».
- В свойствах задайте имя (лучше то, под которым анимацию будет искать игровой движок: idle, walk, jump), цвет полосы и направление.
Направлений четыре: вперёд, назад, пинг-понг и обратный пинг-понг. Пинг-понг проигрывает кадры вперёд, а затем назад, так дыхание персонажа из четырёх кадров превращается в плавный цикл из шести без лишней рисовки. Поле «Повтор» ограничивает число прогонов тега, что пригодится для вложенных тегов, когда короткое моргание встроено в длинный цикл покоя.
С тегами меняется и навигация. Enter проигрывает только текущий тег, клавиши «,» и «.» ходят по кадрам внутри тега, а Alt+G («Перейти к кадру») принимает не только номер кадра, но и имя тега. Если нужно прогнать весь файл целиком, включите «Кадр → Воспроизведение → Воспроизвести все кадры (игнорировать теги)». Раскладку тегов под конкретный движок стоит учить вместе с экспортом, например на курсах по пиксель-арту: имена тегов должны совпадать с теми, что ждёт код игры.
Как сохранить и экспортировать готовую анимацию
Рабочий файл сохраняйте в формате .aseprite через Ctrl+S: в нём остаются слои, кадры, теги и палитра. Для публикации и движка нужен экспорт (подробно по каждому формату, включая спрайт-лист и командную строку, разбираем в статье как сохранить спрайт в Aseprite), у него в разделе Exporting документации три пути.
- GIF. «Файл → Экспортировать → Экспортировать как» (Ctrl+Alt+Shift+S), в поле формата укажите .gif. В диалоге можно выбрать кадры (все, выделенные или конкретный тег), направление анимации и масштаб: для соцсетей спрайт 32×32 обычно увеличивают до 400–800 %, иначе он потеряется на экране.
- Последовательность PNG. В том же диалоге назовите файл frame1.png: Aseprite сохранит frame1.png, frame2.png и дальше по кадрам. Если написать frame001.png, нумерация будет с ведущими нулями.
- Спрайт-лист. «Файл → Экспортировать → Экспортировать спрайт-лист» (Ctrl+E) складывает все кадры в одну картинку и при желании выгружает JSON с координатами и тегами, который читают Unity, Godot и большинство движков для создания игр.
Для быстрого превью в мессенджере GIF достаточно, но помните про лимит в 256 цветов: спрайт в режиме RGB с градиентами при экспорте потеряет оттенки. Для игрового движка GIF не нужен вовсе: туда идёт спрайт-лист или последовательность PNG.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналЧастые ошибки и что с ними делать
- Нажали Alt+N, а кадр «пустой». Скорее всего, вы нажали Alt+B, а он создаёт новый пустой кадр. Удалите его по Alt+C и добавьте кадр заново через Alt+N, чтобы получить копию текущего.
- Калька включена, но соседние кадры не видны. Вы рисуете на слое «Фон», а режим кальки стоит «За спрайтом». Либо переключите режим на «Перед спрайтом» в настройках шкалы, либо превратите фон в обычный слой: «Слой → Конвертировать в → Слой».
- Enter проигрывает только часть кадров. Так работает воспроизведение внутри тега. Уберите курсор из тега или включите «Воспроизвести все кадры (игнорировать теги)» в меню воспроизведения.
- Поменяли скорость в меню, а GIF остался медленным. Множители в «Воспроизведении» действуют только на просмотр. Длительность кадров меняется в «Свойствах кадра» или через «Постоянную частоту кадров».
- Правите один кадр, а меняются несколько. Ячейки связаны: их создали через «Дублировать связанную ячейку» (Alt+M) или связали вручную. Правый клик по ячейке и «Разорвать связь ячейки» вернёт независимость кадру.
- Нажали Ctrl+E и получили одну большую картинку вместо GIF. Это экспорт спрайт-листа. GIF делается через «Экспортировать как» по Ctrl+Alt+Shift+S.
- Цвета в GIF поплыли. Файл в режиме RGB с большим числом оттенков ужимается до 256 цветов. Переведите спрайт в индексированный режим заранее через «Спрайт → Цветовой режим → Индексированные цвета» и посмотрите, какие оттенки пропадут.
Такие ошибки обычно уходят за несколько дней практики, потому что рабочий цикл в Aseprite короткий: нарисовал кадр, нажал Alt+N, сдвинул, проверил по Enter. Сложнее с самой анимацией: таймингом, дугами движения, весом персонажа. Кнопки здесь не помогут, это уровень профессии, и учиться ему придётся отдельно.
Где освоить пиксельную анимацию системно
Кнопки и шорткаты вы теперь знаете, а вот принципы анимации в Aseprite не встроены: сжатие и растяжение, опережение, распределение кадров по времени приходят из курсов и практики. На курсах по пиксель-арту эти темы обычно идут отдельным блоком с разбором спрайтов для игр, а если цель шире и вы хотите выйти на работу в студию, смотрите курсы для 2D-художников, где анимация идёт в связке с портфолио под геймдев.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Пиксель-арт Перейти на сайт курса |  Skillbox | 14 851 ₽ | 1238 ₽/мес. | 1 месяц | Обзор курса |
| Pixel Art Перейти на сайт курса |  XYZ School | 36 335 ₽ | 4166 ₽/мес. | 3 месяца | Обзор курса |
| Инди разработчик Перейти на сайт курса | XYZ School | 141 900 ₽ | 6058 ₽/мес. | 19 месяцев | Обзор курса |
| Photoshop для иллюстраторов Перейти на сайт курса | Skillbox | 29 094 ₽ | 4026 ₽/мес. | 1 месяц | Обзор курса |
Больше программ — в полном каталоге курсов по пиксель-арту
