Aseprite как сохранить картинку без потери качества
Перейти к содержимому

Aseprite как сохранить картинку без потери качества

Aseprite как сохранить картинку без потери качества

You can save your sprite using the File > Save menu or pressing Ctrl+S ( ⌘S on macOS).

We highly recommend you to save your sprites in the .aseprite format, so you keep the full sprite information intact (layers, frames, etc.). But you can save your sprite as other file types if you don’t need all this information. For example, you can open a .png file, editing it, and save it again as .png (without using the .aseprite format).

Export

If you want to export your sprite as a .png file or a .gif animation, you can use the File > Export option. See the Exporting section for more information.

Aseprite как сохранить картинку без потери качества

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 71af12ae69b576f6 • Your IP : 82.102.23.104 • Performance & security by Cloudflare

Как создать пиксель-арт — часть 8: сохранение и экспорт пиксель-арта

Это восьмая и последняя часть серии статей, опубликованной в «Пиксельном Гримуаре». Я написал ее благодаря поддержке моих патронов. Если вам нравится то, что я делаю, пожалуйста, поддержите меня на Patreon.

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

ВЕКТОРНЫЕ И РАСТРОВЫЕ ИЗОБРАЖЕНИЯ

Давайте начнем с того, как изображения сохраняются в компьютере. Если сильно упростить, то вообще существует два типа файлов 2D-изображений: растровые и векторные.

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

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

Упрощенный пример сохранения растрового изображения

Сохранение файла таким образом иногда делает его очень большим. Изображение 1080×1920 означает, что необходимо сохранить 2 073 600 отдельных пикселей. Поэтому иногда разумно сжимать такое изображение с помощью крутых алгоритмов.

СЖАТИЕ ИЗОБРАЖЕНИЯ

Сжатие изображений было создано для уменьшения размера файла изображения. Это здорово, но в зависимости от способа, которым это делается, можно повредить файл.

PNG (без потерь) 🆚 JPEG (с потерями)

Сжатие может быть с потерями или без потерь. Сжатие с потерями обычно подходит, если вы работаете с фотографиями или даже большими иллюстрациями, но не очень годится, если вы сохраняете пиксель-арт. Сохранение пиксельного изображения в формате jpg приведет к случайным изменениям цвета и странным артефактам изображения. При сжатии пиксель-арта всегда надо проверять, используется ли сжатие без потерь, например, png.

Как правило, формат изображения, поддерживаемый используемым редактором (например, .aseprite в Aseprite или .gal в GraphicsGale), всегда сохраняет файл в целости со всеми его слоями и метаданными.

СОХРАНЕНИЕ В ASEPRITE

В Aseprite вы можете сохранить файл с помощью диалогового окна сохранения (Ctrl+S, либо Ctrl+Shift+S для сохранения в новый файл).

Диалоговое окно сохранения в Aseprite

Довольно интуитивно понятно, правда? Используйте его, чтобы сохранить файлы в формате .aseprite и сохранить всю информацию о файле. Так вы сможете вернуться к нему позже, если захотите внести изменения.

ЭКСПОРТ ДЛЯ ПРЕДПРОСМОТРА

После того как вы закончили рисовать спрайт, возможно, вы захотите опубликовать его где-нибудь или отправить кому-нибудь. Но если вы просто сохраните его в .png, произойдут 2 неприятности: во-первых, ваше изображение сохранится в сплющенном файле, что означает отсутствие слоев или метаданных; во-вторых, ваш png будет выглядеть примерно так:

Этот камень слишком мал, чтобы разглядеть какие-то детали

Правильный способ сохранить изображение для предварительного просмотра — использовать диалоговое окно экспорта. Доступ к нему открывается в меню File>Export (в ру-версии программы: Файл>Экспортировать).

Диалоговое окно экспорта в Aseprite

Это диалоговое окно великолепно и содержит массу полезных опций. Давайте пройдемся по всем пунктам!

Output File (Выходной файл): задается имя файла. Можете просто ввести расширение файла, которое хотите использовать, и Aseprite сохранит его в этом формате. Рекомендую использовать .png для статичных изображений и .gif для анимированных.

Это не изменит команду «Сохранить» на использование этого файла по умолчанию, поэтому не беспокойтесь о случайном выборе формата, который все сплющит.

Resize (Размер): пиксель-арт обычно слишком мал для современных мониторов, поэтому надо изменить его размер. Aseprite облегчает эту задачу, предоставляя несколько разрешений.

Изменение размера в целых числах 🆚 изменение размера в дробях (посередине)

Вы, наверное, заметили, что можно увеличить масштаб изображения только кратно 100%, а не меньше/больше, например, на 250%. Это потому, что если масштабировать его до нецелого числа, пиксель-арт будет выглядеть изломанным и странным. Это очень жесткое ограничение пиксельной графики, и способов обойти его не так много. Всегда изменяйте размер рисунка, используя целые числа (если в процентах, то кратно ста — 200%, 300% и т. д.) и никогда дробные (130%, 250% и т. п.).

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

Обычно для публикации в Интернете достаточно 200% или 300%.

Layers (Слои): когда экспортируете файл, он сплющится, что означает потерю всей информации о слое. Это удобное свойство позволяет выбирать, какие слои надо сохранить.

Frames (Кадры): выбирается, какие кадры надо экспортировать. Я расскажу об этом подробнее в следующем параграфе. Если у вас больше одного кадра, могут произойти 2 вещи:

  1. Если сохраняете в формате, поддерживающем анимацию (например, .gif), то анимация будет экспортирована в этот файл.
  2. Если сохраняете в формате, который не поддерживает анимацию (например, .png), то Aseprite сохранит ее в нескольких файлах, по одному для каждого кадра.

Animation direction (Направление анимации): здесь можно увидеть самые распространенные направления — «вперед», «обратно», «пинг-понг» — и выбрать то, которое лучше всего подходит вашей анимации. Они довольно интуитивно понятны, но если хотите узнать больше, с ними очень легко поэкспериментировать.

Apply pixel ratio (Применить соотношение пикселя): не очень популярный флажок, который позволяет сплющить неквадратные пиксели до квадратных. Если не уверены, что это значит, не волнуйтесь, это ничего не изменит для вас.

Export for Twitter (Экспорт для Твиттера): удобный флажок, который делает последний кадр анимации вдвое короче. Он позволяет идеально зациклить mp4 для твита.

СОХРАНЕНИЕ ДЛЯ ДВИЖКА

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

  • Несмотря на то, что некоторые движки принимают tiff, gif или даже bmp, обычно рекомендуется использовать png. Он легкий, относительно быстро распаковывается и имеет действительно хорошую поддержку прозрачности. Только не используйте jpg, mp4 или любой другой формат сжатия с потерями.
  • Если нет действительно веской причины, никогда не масштабируйте пиксель-арт при экспорте для игрового движка. В идеале спрайт должен масштабироваться движком, а все файлы должны иметь исходное разрешение.
  • Анимацию следует сохранять в виде последовательности изображений или листов спрайтов. Не пытайтесь использовать какой-либо видеоформат, если только не делаете что-то очень специфическое.

СОХРАНЕНИЕ ПОСЛЕДОВАТЕЛЬНОСТИ ИЗОБРАЖЕНИЙ

При сохранении анимации в формате .png Aseprite создаст последовательность изображений, которая выглядит примерно так:

Простая анимация, экспортированная в png из Aseprite

Иногда этого достаточно, но я предпочитаю файлы, которые начинаются с нуля, а также когда у них две цифры. К счастью, это тоже очень легко сделать: в поле имя файла просто введите название, за которым следует «00». В этом примере я назвал файл alert00.png, и вот какой результат:

Как создать пиксель-арт — часть 8: сохранение и экспорт пиксель-арта, изображение №9

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

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

Временная шкала с несколькими тегами анимации

Это очень удобно для организации, и экспортировать его тоже очень легко: просто введите что-то вроде boss_.png, и Aseprite экспортирует файлы так:

Как создать пиксель-арт — часть 8: сохранение и экспорт пиксель-арта, изображение №11

Полезно, правда? Если нужно больше или меньше нулей, тогда измените на или даже просто .

СОХРАНЕНИЕ ЛИСТА СПРАЙТОВ

Некоторые игровые движки предпочитают листы спрайтов вместо нескольких изображений. Из Aseprite можно экспортировать их автоматически с помощью меню File>Export Sprite Sheet (Файл>Экспортировать лист спрайтов, либо Файл>Экспортировать плитку спрайтов).

Диалоговое окно экспорта листов разных типов: по строкам и горизонтальный

Здесь можно выбрать различные опции, и большинство из них будет продиктовано используемым движком. Некоторые требуют отступов между спрайтами, дескрипторов JSON, другие поддерживают обрезку прозрачности. Выдавливание приводит к тому, что все плитки имеют цвета границ, выдавленные вокруг на 1 дополнительный пиксель, чтобы избежать швов у 3D-плиток при работе на 3D-движке. Если не уверены, просто не отмечайте никакие флажки.

Что касается количества строк и столбцов, если ваш движок не требует ничего конкретного, то я рекомендую отметить флажок Best fit for texture (Наилучшее соответствие текстуре) и позволить Aseprite рассчитать оптимальный размер.

На этом экране следует заметить, что Aseprite не сохранит файл, если вы нажмете на «Экспорт», пока не установите флажок Output file (Выходной файл) и не выберете имя файла. Одна из альтернатив — установить флажок Open generated sprite sheet (Открыть сгенерированный спрайт-лист). Это откроет его в новом файле, который вы сможете сохранить вручную позже, если захотите.

СРЕЗЫ И КОМАНДНАЯ СТРОКА

Как создать пиксель-арт — часть 8: сохранение и экспорт пиксель-арта, изображение №13

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

Первый шаг — создаем спрайты в одном файле, бок о бок. Только не позволяйте им перекрывать друг друга в прямоугольной области.

Реквизиты бок о бок, нарисованные в одном файле

Следующий шаг — выбираем инструмент Slice (Срез) и делаем выделения вокруг каждого объекта, только аккуратно, чтобы не включать в каждое выделение части других спрайтов. После этого можете дважды щелкнуть по одному из них (или щелкнуть правой кнопкой мыши и просмотреть свойства) и выбрать для него имя.

Срезы сделаны, один выбран

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

Сначала надо установить Aseprite в ваш PATH. Если не знаете, что я имею в виду, следуйте этому руководству и добавьте путь Aseprite.exe к переменной окружения PATH.

Затем сохраните aseprite-файл и откройте свой любимый инструмент командной строки в папке с этим файлом. Если не знаете, как это сделать, в Windows можете нажать Shift + правая кнопка мыши по папке и выбрать «Открыть окно Windows PowerShell здесь».

Наконец, приступим к самому интересному — собственно командной строке! Просто введите это (только замените myFile на имя своего файла) и нажмите Enter:

Давайте разберемся, что это на самом деле означает:

  • Aseprite.exe — это команда для запуска Aseprite.
  • -b означает, что мы находимся в пакетном режиме. Если не добавите это, откроется Aseprite, а нам это не нужно.
  • ‘.\myFile.aseprite’ — это имя и расширение файла, с которым мы работаем. Этот путь относится к текущему пути.
  • —save-as — это команда для сохранения выбранного файла. Она также форматирует имя файла с помощью предоставленных вами тегов.
  • .png’ — это имя файла, где — это тег, который заменит имя файла на имя среза и обрежет его.

Если нужна дополнительная информация о командной строке, в документации по Aseprite есть хорошее руководство по ее использованию.

ЧТО ТЕПЕРЬ?

Теперь вы знаете приемы правильного сохранения пиксель-артов! Если вы в чем-то не уверены, руководствуйтесь этими подсказками:

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

Ваш адрес email не будет опубликован.