Перейти к содержимому

Как сохранить анимацию в aseprite

  • автор:

Как создать файл mp4 в aseprite?

как создать длинную анимацию в пиксель арт в формате mp4 в aseprite ,или же для этого лучше использовать другие программы?

Лучший ответ

Сначала сохранить в анимированный gif, а потом каким-то видеоредактором типа Movavi Video Editor уже в mp4.

Остальные ответы

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

Один из вариантов — использовать программу Adobe After Effects для создания анимации и экспорта ее в MP4 формат. После создания анимации в Aseprite, вы можете сохранить каждый кадр отдельно в формате PNG или GIF, а затем импортировать их в After Effects. В After Effects, вы можете создать композицию из этих кадров и настроить параметры анимации, добавить эффекты, звуковые дорожки и т. д. После этого вы можете экспортировать свою анимацию в MP4 формат.

Еще один вариант — использовать программу Adobe Premiere Pro для создания видеоролика из сохраненных в Aseprite кадров PNG или GIF. В Premiere Pro, вы можете импортировать кадры, настроить продолжительность кадров и добавить эффекты, звуковые дорожки и т. д. Затем вы можете экспортировать свой видеоролик в MP4 формат.

Некоторые другие программы, которые вы можете использовать для создания анимации и экспорта ее в MP4 формат, включают в себя Toon Boom Harmony, Synfig Studio и Blender.

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

Как сохранить анимацию в Png-сиквенцию?

Png-сиквенция – последовательное сохранение картинок, в данном случае – анимационных кадров. Формат Png предполагает, что картинки сохраняются на прозрачном фоне. Во флеше не нужно сохранять каждый кадр по отдельности. Благодаря функции экспорта, возможно сохранить целый флеш-ролик в сиквенцию, потратив минимум веремени и усилий.

Чтобы экспортировать флеш-анимацию в png-сиквенцию, нужно:

1.Размещаем анимацию на таймлайне. Если у вас анимация зашита в мувиклип(Movie Clip), то нужно превобразовать ее в графику (Graphic) на панели Properties.

2.Экспортируем флеш-анмиацию: File-Exrort-Export movie


3.Выбираем из возможных форматов – Png Sequence (.png). Даем наименование файлу. Для пнг-сиквенци предварительно создаем папочку, чтобы все картинки лежали в одном месте.

4.Появляется табличка Export Png. Ставим галочку напротив Smoth, если ее там нет по умолчанию.

4.Готово. В папке у нас сохранена png-сиквенция – последовательность всех кадров флеш-анимации в растровом формате png.

Aseprite

Aseprite – это редактор для анимации в стиле пиксельной графики. Простой и удобный, не требующий много времени на вхождение. Осваивается даже методом тыка. Работает с кадрами, каждый из которых можно отрегулировать по времени и прозрачности. Есть таймлайн. Есть слои. Экспорт анимации производится в GIF или WEBP. Анимацию можно зациклить. Можно редактировать гифки, созданные в других программах. Программа настолько погружает пользователя в мир пикселов, что даже интерфейс выполнен в стиле pixelart.

Aseprite - интерфейс редактора

Идеология работы

Вся ваша композиция в терминах программы называется Sprite. Если надо изменить размер холста или поменять другие настройки, следует открывать пункт Sprite главного меню вверху.

Каждый кадр вашей анимации называется Frame. Вы должны последовательно создавать всё новые и новые фреймы на шкале времени и каждый фрейм видоизменять согласно вашей задумке. Можно менять продолжительность временной задержки фрейма во время проигрывания анимации. Все операции по фреймам находятся под пунктом Frames главного меню.

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

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

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

Сохранять вашу работу можно в формате проекта – файле с расширением aserprite. Экспортировать можно в анимированные форматы GIF или WEBP, а также в статические растровые форматы в виде последовательности изображений. Соответственно и открывать в программе можно эти форматы. Казалось бы, зачем тогда файл проекта? Во-первых, во время экспорта в GIF вы можете экспортировать только избранные вами фреймы или избранные слои, то есть, не весь контент, имеющийся в проекте. А в файле проекта, естественно, хранится всё. Во-вторых, в файле проекта хранятся также настройки проекта и спрайта.

Для продвинутых пользователей есть возможность обогатить свою практику работы в Aseprite с помощью скриптов на языке Lua. Это, кстати, показатель «крутости» программы, если в ней можно применять скриптовый язык. Выходит, это не просто рисовалка, а рисовалка-интеллектуалка.

Кнопки и их назначение

Пробежимся по кнопкам панелей инструментов программы.

ВВЕРХУ слева находятся кнопки для управления палитрой цветов:
– сортировка цветов на панели. По кнопке открывается выбор типа сортировки – можно сортировать по насыщенности, яркости, присутствию красного…
– пресеты. Открывается окно выбора набора цветов.
– операции с панелью цветов. Открывается окно с меню выбора операции, которых довольно много.
В общем, цветам в программе уделяется много внимания.
Остальные кнопки на верхней панели – это контекстно зависимые настройки избранного справа инструмента. Так, для кисти можно выбрать размер, тип, угол поворота…

СПРАВА находится вертикальная панель инструментов:
– выделение. По-разному можно выделять область на холсте.
– рисование. Два инструмента под кнопкой – ручка и пулевизатор.
– стерка. Кстати, у стерки можно менять прозрачность.
– пипетка. Это захват цвета с холста.
– лупа + рука. Или увеличивать просмотр холста, или передвигать холст по экрану.
– передвижение. Двигать сам рисунок в пределах холста.
– заливка. Или ведерком (сплошная заливка), или градиентом. У градиента есть выбор типа градиента – довольно прикольные типы, стоит попробовать.
– линии. Или строго прямые, или строго кривые.
– фигуры строгие. Или прямоугольник, или эллипс. Фигура с заливкой, или без.
– фигуры от руки. Произвольный закрашенный контур.
– размытие + шум.

Как начать делать пиксель-арт. Часть 1

Гайд для совсем начинающих.

Pedro Medeiros Эта небольшая статья о том, как начать свой путь в пиксель-арт и нацелена она на тех, кто только начал или собирается начать. Я расскажу про самые базовые вещи – как создать файл, настройки холста и работа с ограниченной цветовой палитрой.
Статья была проспонсирована на моем Patreon! Если она вам понравилась, то вы даже можете поддержать меня малой денежкой =)
Также это 1-ая часть планируемой серии статей, всю серию читайте в Pixel Grimoire.

Перед Началом

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

Инструменты

Вам не нужно никаких изощрённых программ и инструментов для пиксель-арта, его можно даже делать при помощи мышки и бесплатного ПО. Моё рабочее место включает в себя маленький Вакомовский планшет, хорошую мышку с клавиатурой и мою любимую программу Aseprite, но вы можете использовать любую другую программу на своё усмотрение.
Вот примерный список ПО широко используемого для пиксель-арта:
• Aseprite: Отличный профессиональный редактор со многими ускоряющими работу функциями (платный)
• GraphicsGale: Классический, широко используемый во многих играх. Слегка сложноват, но у него много функций (бесплатный).
• Piskel: Бесплатный онлайн редактор
• Photoshop: Мощный редактор, изначально не создавался для создания пиксель-арта, но его тоже можно использовать (платный).

Aseprite

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

Создание Нового Файла

Просто нажмите “New File…” на стартовом окне или File > New File и можно начинать рисовать.
Давайте создадим новый файл. 16 на 16, наверное, будет выглядеть маловато, но думаю, что для начала сойдёт. Большее разрешение может отвлечь вас от главной задачи: понимания того, как пиксели взаимодействуют с другими пикселями по соседству.
Aseprite ‘New Sprite’ меню
Вы можете оставить цветовой режим в RGBA, он наиболее простой и понятный. Некоторые пиксель-арт художники любят работать в indexed палитре, которая даёт доступ к некоторым крутым цветовым приёмам, но и имеет определённые недостатки.
Оставьте фон прозрачным или белым для начала. Только убедитесь, что опция Advanced Options отключена (но не бойтесь поэкспериментировать с ней позже) и можно начинать!

Давайте Рисовать!

В интерфейсе очень много различных менюшек и тулбаров, но не волнуйтесь нам нужна лишь парочка кнопок для начала. Главный инструмент это Pencil, обычно следует сохранять ширину в 1 пиксель и именно при помощи него мы будем расставлять наши пиксели на холсте. Просто нажмите на иконку или на B и щелкните по холсту, чтобы поставить пиксель.
Aseprite рабочая область Слева вы видите цветовую палитру, с цветами по умолчанию. Давайте изменим её на другую более простую. Щёлкните по третьей иконке в верху цветовой палитры (Pressets) и выберите ARQ4 (очень хорошую палитру сделанную Endesga), именно её мы будем использовать для нашего первого спрайта.
Теперь используя только 4 цвета сверху слева, попробуем нарисовать кружку.
Не стесняйтесь использовать мой пример в качестве вдохновения, но всё же постарайтесь сделать свой вариант. Если вы допустили ошибку, то нажмите alt+click на пустой области или в области за вашим рисунком, и вы сможете «выбрать» прозрачный цвет и использовать его для удаления неправильных пикселей. Иным вариантом может быть использование Eraser или хоткея Е для быстрого выбора.
Вы, наверное, заметите, что работа в таком низком разрешении кардинально отличается от обычного рисования. Всё должно быть просчитано и каждый пиксель имеет важное значение. Это то, к чему вы должны привыкнуть как можно раньше.
Вы также можете попробовать другие кнопки на меню инструментов. Многие из них имеют дополнительные опции, когда нажаты. Для начала старайтесь избегать использовать инструмент blur tool так как он добавляет дополнительные цвета, что нам сейчас совсем не нужно.
Ну а теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. На этот раз уже без моей работы как референса. Если вам кажется, что ваш спрайт не умещается в холст, то это абсолютно нормально, попробуйте свести часть деталей к одному пикселю. Работать на таком низком разрешении очень сложно и похоже на сбор мозаики или пазла. Я написал одну статью о работе на низком разрешении для Kano.
Если вам интересно, то вот мои версии тех спрайтов, только закончите свои перед тем как их смотреть [skull, sword and human face]
Это очень хорошее упражнение. Если вы хотите ещё попрактиковаться, то попробуйте сделать больше спрайтов с такими же ограничениями.

Сохраняем файл

Чтобы сохранить файл нажмите Control+S (или File>Save As…), задайте имя и папку для сохранения.
Не забудьте, что в триальной версии Aseprite нет функции сохранения.
Aseprite Export File меню
Вы наверное заметили, что Aseprite может сохранять файл в различных форматах, но я бы рекомендовал вам использовать .ase для ваших файлов. Это как в Photoshop есть формат .psd Когда вы экспортируете спрайт для веб или игр, вы можете использовать Control+Alt+Shif+S или File>Export.
Почему следует использовать для масштабирования круглые числа.
Aseprite обладает очень хорошей функцией Resize в окне экспорта. Она масштабирует ваш спрайт в круглых числах, что идеально. Если вы захотите отмасштабировать свой спрайт, например, в 107%, то пиксели сдвинутся и получится мешанина, но если вы выберите 200%, то каждый пиксель будет в 2 пикселя шириной и высотой, что выглядит хорошо и красиво. Холст большего размера

Теперь после того как вы освоили основы, такие как: создание файла, сохранение и рисование на холсте, давайте попробуем рисовать на немного большем холсте, 32 на 32 пикселя. Теперь мы будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack). В этот раз мы будем рисовать лопату.
В отличие от спрайта 16 на 16, здесь мы можем использовать контур, так что давайте начнём с него. Вот мой пошаговый процесс:

Этап 1: Линии

Этап 1 Такой стиль линий мы в пиксель-арте называем идеальной линией, ширина в 1 пиксель и соединяется диагонально с другими пикселями. Когда мы делаем линейный рисунок, то избегаем ненужных краёв, как здесь:
Aseprite обладает очень хорошей функцией в настройках кисти, чтобы делать это автоматически: с выбранным brush tool включите Pixel-perfect опцию. Только не забудьте выключить её, когда не работаете с контуром, иначе она будет вас раздражать.
Aseprite функция Pixel perfect Этап 2: Основные цвета
Этап 2 Малое количестве цветов хорошо тем, что вы не запутаетесь в обилии вариантов. Именно по этой причине очень сложно работать с большой палитрой, если у вас есть в палитре цвет, то вы обязаны его использовать в спрайте. Старайтесь думать о цвете в палитре как о кусочках паззла, экспериментируйте с ним, создавайте различные, самые невероятные комбинации, пока не найдёте ту, что «идеально» подходит для каждого участка вашего спрайта.

Этап 3: Тени
Этап 3 Используйте палитру, для творческого подхода к созданию света и тени в спрайте. Так как вы работаете с очень ограниченной палитрой, то у вас не будет всех доступных оттенков цвета с каждой доступной тональностью и вам придётся импровизировать.
Импровизированные тени с различными оттенками В примере слева я использую ту же самую палитру что и AAP-Mini12. Когда я рисовал этого зелёнокожего парня, то у меня не было светлого зелёного, так что я выбрал ближайший доступный мне оттенок, который оказался жёлтым. То же самое с тенями, я выбрал синий, потому что он близок к наиболее тёмному оттенку. Но что если бы я сделал всё по-другому? Ведь я мог использовать ярко-синий и тёмно-красный, так? На самом деле, это не очень хорошее сочетание:
Тени с инвертированным оттенком Эффект выглядит классно, но что-то со всем этим не так. Обычно вы стараетесь использовать холодные оттенки в тенях и тёплые на свету. Это конечно не выбитая на скрижалях заповедь, есть много исключений из этого правила, но, когда у вас нет уверенности, что это принесёт пользу, то лучше придерживаться правила.
Этап 4: Анти-ализинг и полировка
Этап 4 Эта та часть создания спрайта, когда вы стараетесь сделать его менее «рублёным». Ручной анти-ализинг весьма сложный навык, о нём можно написать целую статью, но в теории вы используете средний тон, чтобы симулировать «полупиксели» и смягчить края спрайта. Но не заморачивайтесь об этом сейчас, для вас главное сделать спрайт чётким и читаемым.
Другой хорошей идеей на данном этапе это будет отлов и отстрел некоторых одиночных пикселей, чтобы уменьшить шум. Одиночные пиксели, которые не являются частью большой группы пикселей того же цвета и не являются частью анти-ализинга, выглядят так:
Убираем одиночные пиксели Видите, однопиксельные острова на планете слева? Это одиночные пиксели и как вы заметили, после их уборки, планета стала выглядеть гораздо лучше.
А что насчёт звёзд? Они как раз доказывают, что одиночные пиксели, если их использовать с умом, могут быть полезны для таких вещей как создание текстуры шума, или контраста на фоне.
Смысл не в том, чтобы бездумно убирать одиночные пиксели, но найти их и спросить себя: этот пиксель точно должен быть один?

И что теперь?

Теперь настало время поиграть с цветами и попробовать большее разрешение! Но не спешите, разрешение 48 на 48 и 16 цветов, затем далее. Не стоит сразу переходить к анимации, сначала набейте руку в создании статичных спрайтов.
Специально для вас я выбрал гайды, которые могут вам пригодится:
• Pixel art tutorial by Cure
• Pixel art tutorial by Derek Yu
• Pixel art tutorial by Arne

У меня также есть несколько уроков, о специфичных аспектах пиксель-арта и гейм-дизайна, вы можете увидеть их здесь:
• My Patreon page
• Мои уроки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *