A partir da versão 2015 da Photoshop CC, é possível exportar pranchetas, camadas, grupos de camadas ou documentos, como imagens JPEG, GIF, PNG, PNG-8 ou SVG. Selecione os itens no painel Camadas, clique com o botão direito do mouse na seleção e selecione Exportação rápida ou Exportar como no menu de contexto.
Vetor Raster VS SVG
Vetor Raster vs SVG ou Scalable Vector Graphic é, como o nome diz, um gráfico vetorial . Outros formatos como PNG, GIF, JPG, BMP são gráficos raster . A principal diferença entre esses dois é que os vetores são compostos de caminhos que os tornam escaláveis, enquanto os rasters são compostos de dados de pixels rígidos, portanto, incapazes de escalar. (Quando redimensionamos a imagem raster, simplesmente extrapolamos os dados de pixel atuais que temos. O vetor, por outro lado, recalcula o caminho no tamanho de destino)
Mas este artigo não é sobre como criar SVG a partir de PNG? Bem, depende da imagem. Claro, não podemos criar um SVG a partir de imagens fotográficas ou detalhadas. Mas para imagens simples com baixa complexidade de cor e forma, como desenho animado, ícone ou design plano como a imagem sorridente abaixo, são possíveis.
Precisaremos criar os caminhos da imagem, preenchê-los com cores e convertê-los em forma antes de exportá-los como SVG.
Vamos começar!
1) Abra a imagem no Photoshop e use a ferramenta de seleção “Varinha Mágica” para selecionar todas as áreas pretas (saiba mais sobre seleções)
2) Uma vez selecionado, selecione a Ferramenta “Seleção de Objeto”
3) Clique com o botão direito e selecione “ Criar Demarcador de Trabalho… ”
4) Em seguida, no menu Camada, clique em “ Nova camada de preenchimento ” e “ Cor sólida… ”
5) Selecione a cor preta
6) Agora você obterá uma nova camada com a área preta. Mas é uma camada de forma que é vetorial.
7) Repita o mesmo processo com a área laranja do cachorro. Você terá que fazer isso para cada cor em sua imagem
8) Assim que tiver a camada de forma para cada cor, desative a camada da imagem original.
9) Selecione Arquivo> Exportar> Exportar como …
10) No menu suspenso superior direito, selecione SVG como Formato. Em seguida, verifique a imagem de visualização se tudo está OK e clique em Exportar.
E é isso! Agora você terá a versão SVG de sua imagem PNG, que é escalonável e tem um tamanho de arquivo muito menor.
Até a próxima.
