PerfectVector
Автор: Irene Kim7 мин чтения

Scratch Convert to Vector: почему остаются пиксели

Кнопка Convert to Vector Scratch меняет режим без трассировки растра. Проверьте точки костюма, выберите исправление и осмотрите импортированный SVG перед использованием.

На этой странице

Кнопка Convert to Vector Scratch не трассирует границы растрового костюма. Она переносит растр в векторный режим редактирования, где он может остаться одним объектом изображения. Поэтому костюм PNG может все еще выглядеть пикселизированным после нажатия. Текущий исходник редактора Scratch сохраняет растровый объект при операции, а не восстанавливает цветовые области контурами.

Для костюма, части которого нужно изменять или перекрашивать, нужны новые нарисованные или трассированные векторные фигуры. Для намеренной пиксельной графики сохранение растра может быть правильным. Сначала проверьте выбранный костюм, затем выберите нужный проекту объем восстановления.

Что меняет кнопка

Откройте вкладку Costumes спрайта и выберите проверяемый костюм. Кнопка называет режим, в который можно перейти: Convert to Vector появляется в растровом режиме, Convert to Bitmap — в векторном.

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

Сохраните копию костюма перед экспериментом. В частности, перевод нарисованной векторной графики в растр сводит геометрию в пиксели. Обратное переключение не восстанавливает старые точки. Используйте Undo или сохраненный оригинал для их возвращения.

Проверьте костюм тремя способами

Одна рамка выделения мало что доказывает: она может быть и у картинки, и у группы векторных фигур. Проверьте именно ту часть, которую хотите редактировать. Диагностика ниже использует ракету, но животное, значок или школьная иконка подходят так же.

  1. Проверьте контур. В копии костюма выберите Reshape и нажмите край стабилизатора ракеты. Ищите точки вдоль края вместо маркеров вокруг прямоугольника. Если графика сгруппирована, выделите и используйте Ungroup при доступности перед проверкой части. Если не уверены в использовании Reshape, нарисуйте временный круг рядом и сравните его выделение.
  2. Проверьте один цвет. Выделите нос ракеты и попробуйте сменить Fill. Можно ли перекрасить область без изменения корпуса и других частей? Отмените пробную правку. Выделение всего изображения не дает независимо редактируемого носа, даже если картинка многоцветная.
  3. Проверьте в месте появления. Сравните костюм в редакторе с видом на Stage в размере проекта. Редактируемость контура и экранная четкость — отдельные проверки. Одного грубого предпросмотра Stage мало для трассировки уже пригодных контуров.
Иллюстрация пикселизированной ракеты, выбранной одним прямоугольным объектом, рядом с гладкой ракетой с редактируемыми точками границы и отдельным стабилизатором.
Концептуальное сравнение костюмов: рамка выделения может окружать один растровый объект. У редактируемых векторных фигур есть точки на контурах и могут быть отдельные части.
Что найденоЧто проверить дальшеПолезный следующий шаг
Костюм из PNG, на цветных краях нет точекВы проверяете изображение, а не новую фигуру поверх негоСохраните растр, перерисуйте или трассируйте исходник
Графика выделяется группойРазгруппируйте при доступности и проверьте компонентРедактируйте существующие фигуры до новой конвертации
У одних частей есть точки, другие остались картинкамиНайдите конкретную область для редактированияВосстановите только растровую область, если остальное работает
У фигуры есть точки, грубость только на StageПроверьте размер отображения и сравните с исходным SVGИсследуйте отображение до замены графики

Для последнего случая более широкая диагностика пикселизации SVG помогает отделить содержимое файла от отображения приложением.

Выберите исправление под графику

Сохраните растр, если пиксели входят в дизайн

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

То же касается фото или нарисованного фона, где текстура важнее отдельных границ. Трассировка деталей в фигуры меняет графику. Сохранение квадратных пикселей в SVG отличается от сглаживания силуэта; наше руководство конвертации пиксельной графики объясняет выбор.

Перерисуйте простой костюм векторными средствами Scratch

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

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

Можно строить фигуры и во внешнем векторном редакторе. Оригинальный урок векторной графики Scratch Pinnguaq показывает импорт SVG, выделение компонентов, изменение заливок и размещение элементов. Стремитесь к такой редактируемой структуре.

Трассируйте подходящий клипарт, если есть только растр

Трассировка полезна для сохранения плоской иллюстрации, когда повторное рисование каждого контура лишнее. Используйте самый четкий исходный PNG или JPG. Для этого PerfectVector может восстановить подходящий клипарт в виде контуров SVG, которые можно проверить до импорта в Scratch. Цель — получить редактируемые фигуры из исходной картинки; после импорта костюм все еще нужно проверить на редактируемость.

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

Импортируйте SVG и проверьте центр костюма

Загрузчик костюмов Scratch принимает SVG как векторную графику. Импортируйте сам скачанный SVG, а не снимок или предпросмотр PNG.

  1. Выберите существующий спрайт и откройте Costumes. Через Upload Costume в выборе костюма добавьте SVG рядом с оригиналом. Используйте Upload Sprite, если нужен отдельный спрайт.
  2. Сравните импортированную графику с исходником. Проверьте границу, зазоры частей, глаза и фон. Если исходник уже имел векторные фигуры, исправьте или переэкспортируйте SVG вместо трассировки растрового предпросмотра.
  3. Повторите проверки контура и одного цвета. Подтвердите редактируемость нужных частей и отмените пробные правки. Удалите временные сравнительные фигуры из рабочей копии.
  4. Проверьте положение относительно центрального перекрестия редактора. Сохраняйте одну визуальную опорную точку связанных костюмов: для ракеты это может быть середина корпуса. При необходимости измените графику и сравните с оригинальным костюмом на Stage.
  5. Переключайтесь между оригиналом и заменой без перемещения спрайта. Ищите нежелательный скачок, изменение видимого размера или прямоугольник фона. Сохраните оригинал до удовлетворения заменой.

Scratch хранит центр поворота каждого костюма; код загрузки костюма получает его от рендерера, если он не задан. Поэтому совпадение видимого рисунка — лишь часть проверки импорта. Положение относительно центра тоже должно подходить проекту.

Частые вопросы

Делает ли Convert to Vector костюм Scratch менее пикселизированным? Он не трассирует и не сглаживает границы растра. Костюм меняет режим редактирования, а растровая графика может остаться объектом изображения. Для редактируемых границ перерисуйте графику или импортируйте SVG с трассированными контурами.

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

Создаст ли трассировка спрайта отдельные руки, ноги и другие подвижные части? Не предполагайте этого. Трассировка восстанавливает видимые области, которые могут отличаться от нужных подвижных частей. Проверьте импортированные фигуры и разделите или перерисуйте компоненты по необходимости.

Источники

  1. Scratch Foundation: bitmap conversion implementation — Показывает переход в векторный режим с сохранением растра.
  2. Scratch Foundation: costume file uploader — Подтверждает векторный формат ресурса при загрузке SVG-костюмов.
  3. Scratch Foundation: vector costume loading — Показывает получение центра поворота импортированным костюмом.
  4. Pinnguaq: Working With Vector Graphics Art in Scratch — Демонстрирует импорт SVG и редактирование отдельных фигур, заливок и размещения.

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

Ещё из блога

Начните с более чистого SVG,
который проще редактировать