PerfectVector
Por Irene Kim9 min de leitura

Converter em vetor no Scratch: por que ainda fica pixelado

O botão Convert to Vector do Scratch muda o modo de edição sem traçar o bitmap. Confira os pontos da fantasia, escolha uma correção e inspecione um SVG importado antes de usar.

Nesta página

O botão Convert to Vector do Scratch não traça os contornos de uma fantasia bitmap. Ele leva a arte raster ao modo de edição vetorial, onde ela pode permanecer como um objeto de imagem único. Por isso uma fantasia PNG pode continuar pixelada depois do clique. O código atual do editor de pintura do Scratch mantém um objeto raster nessa operação; não reconstrói as regiões coloridas como traçados.

Para uma fantasia que você quer remodelar ou recolorir em partes, são necessárias formas vetoriais recém-desenhadas ou traçadas. Para pixel art intencional, manter o bitmap pode ser a escolha certa. Comece conferindo a fantasia selecionada e escolha quanto seu projeto precisa reconstruir.

O que o botão muda

Abra a aba Costumes do ator e selecione a fantasia que quer inspecionar. O botão de conversão indica o modo para o qual você pode mudar: Convert to Vector aparece no modo bitmap; Convert to Bitmap aparece no modo vetorial.

Mudar o modo fornece um conjunto diferente de ferramentas de edição. Não significa que todo objeto na tela agora tenha um contorno editável. Uma fantasia vetorial pode conter uma imagem raster junto de formas que você desenha. A distinção básica é a mesma explicada no nosso guia de SVGs que contêm imagens raster.

Mantenha uma cópia da fantasia original antes de experimentar. Em particular, converter arte vetorial desenhada para bitmap achata sua geometria em pixels. Voltar depois não recria os pontos antigos. Use Undo (Desfazer) ou o original preservado se precisar dessas formas novamente.

Confira a fantasia de três formas

Uma caixa delimitadora sozinha comprova muito pouco: tanto uma figura quanto um grupo de formas vetoriais podem ter uma. Confira a parte que realmente quer editar. O diagnóstico a seguir usa um foguete como exemplo, mas um animal, insígnia ou ícone para sala de aula funciona igualmente bem.

  1. Confira o contorno. Em uma fantasia duplicada, escolha Reshape e clique na borda da aleta do foguete. Procure pontos que acompanhem essa borda, em vez de alças ao redor de um retângulo. Se a arte estiver agrupada, selecione-a e use Ungroup quando disponível antes de conferir uma parte. Se não souber se está usando Reshape corretamente, desenhe um círculo temporário ao lado da arte e compare como a ferramenta o seleciona.
  2. Confira uma cor. Selecione o nariz do foguete e tente mudar seu Fill. Consegue recolorir essa região sem alterar o corpo ou outras partes? Desfaça a edição de teste. Selecionar a imagem inteira não fornece um nariz editável de forma independente, mesmo que a figura mostre várias cores.
  3. Confira onde ela vai aparecer. Compare a fantasia no editor com sua aparência no Palco no tamanho usado pelo projeto. Editabilidade do contorno e nitidez na tela são verificações separadas. Uma prévia irregular no Palco, sozinha, não é motivo suficiente para traçar arte que já tem traçados úteis.
Ilustração de um foguete pixelado selecionado como um objeto retangular único ao lado de um foguete suave com pontos de contorno editáveis e uma aleta separada.
Comparação conceitual de fantasias: uma caixa de seleção pode cercar um objeto raster único. Formas vetoriais editáveis têm pontos nos contornos e podem conter partes separadas.
O que você encontraO que conferir em seguidaPróxima etapa útil
A fantasia veio de PNG e suas bordas coloridas não têm pontosConfirme que está inspecionando a imagem, não uma forma nova desenhada sobre elaMantenha o bitmap, redesenhe ou trace a imagem de origem
A arte é selecionada como grupoDesagrupe quando disponível e inspecione um componenteEdite as formas existentes antes de considerar outra conversão
Algumas partes têm pontos e outras continuam figurasIdentifique a região específica que precisa de ediçãoReconstrua apenas essa região raster se o restante já funciona
A forma tem pontos, mas parece irregular apenas no PalcoConfira o tamanho de exibição desejado e compare com o SVG de origemInvestigue a exibição antes de substituir a arte

Para o último caso, o diagnóstico mais amplo de pixelização de SVG ajuda a separar o conteúdo do arquivo da forma como um aplicativo o exibe.

Escolha a correção adequada à arte

Mantenha bitmap quando os pixels fizerem parte do design

Um pequeno personagem de pixels não vira uma fantasia melhor só porque seu arquivo é vetorial. Se suas bordas em degraus, olhos pequenos e paleta limitada são deliberados, avalie-o no tamanho em que pretende usar. Mantenha a imagem original e evite redimensionamentos repetidos ao experimentar.

O mesmo vale para uma fotografia ou cenário pintado cuja textura importa mais que editar contornos individuais. Traçar esses detalhes em formas muda a arte. Se quer preservar pixels quadrados dentro de um SVG, essa é uma tarefa diferente de suavizar uma silhueta; nosso guia de conversão de pixel art explica a escolha.

Redesenhe uma fantasia simples com as ferramentas vetoriais do Scratch

Para um foguete feito de corpo, nariz, janela e aletas, desenhar essas partes separadamente dá controle direto da estrutura. Comece uma fantasia pintada nova no modo vetorial. Use as ferramentas de círculo, retângulo, linha e pincel para construir as partes principais e ajuste os contornos com Reshape.

Trabalhe da maior silhueta para dentro. Adicione a janela pequena depois que o corpo for legível no tamanho desejado. Mantenha uma aleta como objeto separado se precisar movê-la de forma independente. Essa é uma escolha de design: um traçado automático não decide quais peças suas edições posteriores exigirão.

Você também pode usar um editor vetorial externo para construir as formas. O tutorial original de arte vetorial para Scratch da Pinnguaq demonstra importar arte SVG, selecionar componentes, mudar preenchimentos e organizar elementos. Esse é o tipo de estrutura editável a buscar.

Trace clipart adequado quando a imagem original for apenas raster

Traçar é útil quando você já tem uma ilustração plana que quer manter, mas redesenhar cada contorno seria trabalho desnecessário. Use o PNG ou JPG original mais nítido disponível. Nessa rota, o PerfectVector pode reconstruir clipart adequado como traçados SVG para inspecionar antes de importar no Scratch. O objetivo é recuperar formas editáveis da figura original; a fantasia ainda precisa de uma verificação de edição depois.

Um traçado segue regiões visíveis. Pode dividir uma aleta em várias peças ou unir áreas encostadas que você queria mover separadamente. Olhos pequenos, espaços estreitos e letras merecem atenção especial. Se o objetivo é entender como essa reconstrução funciona, comece pela explicação de vetorização de imagens.

Importe o SVG e confira o centro da fantasia

O carregador de fantasias do Scratch aceita SVG como arte vetorial. Importe o próprio SVG baixado, não uma captura de tela ou prévia PNG dele.

  1. Selecione o ator existente e abra Costumes. Use Upload Costume no seletor de fantasias para adicionar o SVG junto do original. Use Upload Sprite quando quiser um ator separado.
  2. Compare a arte importada com a imagem original. Confira contorno, espaços entre partes, olhos e fundo. Se o arquivo original já tinha formas vetoriais, repare ou exporte novamente esse SVG em vez de traçar uma prévia raster dele.
  3. Repita as verificações de contorno e de uma cor. Confirme que as partes necessárias são editáveis e desfaça as edições de teste. Remova formas temporárias de comparação da cópia de trabalho.
  4. Confira o posicionamento em relação à mira central do editor de fantasias. Mantenha o mesmo ponto de referência visual entre fantasias relacionadas: para um foguete, pode usar o meio do corpo. Ajuste a arte conforme necessário e compare com a fantasia original no Palco.
  5. Alterne entre o original e o substituto sem mover o ator. Procure um salto indesejado, mudança de tamanho aparente ou retângulo de fundo. Mantenha o original até ficar satisfeito com o substituto.

O Scratch armazena um centro de rotação para cada fantasia; seu código de carregamento de fantasias obtém um do renderizador quando nenhum é fornecido. Por isso, reproduzir o desenho visível é apenas parte da verificação de importação. Seu posicionamento em relação ao centro da fantasia também precisa servir ao projeto.

Perguntas frequentes

Convert to Vector deixa uma fantasia do Scratch menos pixelada? Não traça nem suaviza os contornos do bitmap. A fantasia muda de modo de edição enquanto sua arte raster pode permanecer como objeto de imagem. Para criar contornos editáveis, redesenhe a arte ou importe um SVG com traçados vetorizados.

Por que consigo mover uma fantasia, mas não remodelar suas bordas? Mover um objeto de imagem não exige pontos no contorno visível. Confira se selecionou um grupo e inspecione um componente com Reshape. Um bitmap mantido no modo vetorial não ganha pontos de contorno com a mudança de modo.

Traçar um ator cria braços, pernas ou outras partes móveis separadas? Não presuma isso. O traçado reconstrói regiões visíveis, que podem diferir das partes que você quer mover. Inspecione as formas importadas e separe ou redesenhe componentes conforme necessário.

Fontes

  1. Scratch Foundation: implementação de conversão bitmap — Mostra a conversão para o modo de edição vetorial que preserva o raster.
  2. Scratch Foundation: carregador de arquivos de fantasia — Confirma que uploads de fantasias SVG usam o formato de recurso vetorial.
  3. Scratch Foundation: carregamento de fantasia vetorial — Mostra como uma fantasia importada recebe um centro de rotação.
  4. Pinnguaq: Trabalhando com arte gráfica vetorial no Scratch — Demonstra importação SVG e edição de formas individuais, preenchimentos e organização.

Se a fantasia começou como clipart raster plano e você precisa de contornos editáveis, converta a imagem de origem para SVG com o PerfectVector. Importe o resultado como fantasia nova e confira um contorno, uma cor e o centro da fantasia antes de substituir o original.

Mais do blog

Recomece com um SVG mais limpo
e fácil de editar