Como criar SVG a partir de PNG ou JPG no Photoshop

 

Alguns anos atrás, a Adobe decidiu adicionar o recurso “Exportar como SVG” ao Photoshop. O que significa que agora você pode exportar imagens SVG diretamente do Photoshop sem a necessidade do Illustrator. Neste tutorial, mostraremos como transformar imagens PNG ou JPG em SVG com o Photoshop. Vamos dar uma olhada!

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.

Qual a diferença entre Photoshop e Illustrator?

Aprender design gráfico é uma longa e divertida caminhada, aprendizagem constante e tendências que vão e vem. Se está a dar os primeiros cliques no mundo do design, já se deve ter interrogado porque existem vários programas da Adobe dedicados à manipulação gráfica – Photoshop e Illustrator, já para não falar do Indesign e até Corel Draw.

Isto acontece porque cada um deles tem propósitos diferentes. E você pergunta, “design não é tudo a mesma coisa?”.

Posso dizer a você com toda a certeza, não necessariamente. Mas não se preocupe, vamos explicamos a seguir.

Já trabalho já a muito tempo com estas ferramentas, e uma coisa que aprendi é que praticamente tudo que eu conseguia fazer com o Illustrator eu conseguiria fazer no Photoshop.

Pelo menos na minha área de web design nunca tive problemas com eles, sempre trabalhei com eles em conjunto, a diferença existe entre eles e vou mostrar para você agora!

A principal diferença entre o Photoshop e Illustrator, é a forma como as imagens são interpretadas pelo software. Enquanto o Illustrator se destina ao desenho vectorial, o Photoshop foi criado para manipular píxeis de imagens ou seja um trabalha com vetores (Illustrator) e o outro com Matriz (Photoshop), veja como funciona cada funcionalidade:

Explicando de um jeito muito simples, vetorizar é uma forma de transformar os pixels de uma imagem em curvas, linhas e pontos, com a possibilidade de modificar seus elementos separadamente (editar, rotacionar, mover, recolorir, entre outras mudanças).

Assim, é válido dizer que uma imagem vetorizada é diferente de outra em formato .PNG ou .JPEG, por exemplo, sobretudo pelo fato de ela se manter bem fiel à qualidade da sua resolução no momento em que for ampliada. As imagens .PNG ou .JPEG, por outro lado, costumam perder a qualidade quando são ampliadas, mostrando seus pixels.

Para dar um exemplo prático, se a gente tenta imprimir um banner de 3 metros com .JPG, que tenha medidas 500px por 500px, com certeza, essa imagem terá sua qualidade comprometida. No entanto, se utilizarmos uma imagem vetorizada neste mesmo banner, ela terá sua qualidade completamente preservada.

Resumindo:

 Vetor (Illustrator)

Quando você cria uma arte no Illustrator ela pode aumentar e diminuir de tamanho sem perder a qualidade, ex: Você pode criar um banner para a web de 1024×90 pixels aparentemente ele é pequeno, porém seu banner é vetorizado você pode aumentar este banner para ser impresso em uma lona de mais de 10 metros e por ai vai! Basicamente esta é a principal funcionalidade do Illustrator.

Matriz (Photoshop)

Diferente do Illustrator uma arte feita em matriz não pode alterar o seu tamanho, usando novamente a situação hipotética descrita anteriormente, se caso o banner fosse feito no Photoshop ele não poderia ficar maior, porque não, ele perderia a qualidade. Simples!

Na imagem abaixo ilustro esta definição com base no meu logotipo. Ao aumentarmos a imagem em Photoshop(coluna da direita), é nítida a pixelização da imagem. Quanto maior o aumento da imagem, mais evidente se torna.

Por outro lado, aplicando esse mesmo aumento num ficheiro vectorial, no Illustrator, a imagem mantém sempre bem definida a sua forma.

Podemos fazer as mesmas coisas com os dois?

Sim, porém cada um tem suas finalidades, o Photoshop por si só é direcionado para criar, editar e tratar imagens, já o Illustrator é melhor utilizar para criar artes para impressão e elementos que sempre precisarão de diminuir e aumentar constantemente como um logotipo.

Apesar do Illustrator ser bastante popular, o Photoshop é o mais indicados para edição de fotografias. Com ele é possível remover desde a celulite que incomodam as modelos, remover manchas à criação de efeitos surrealistas.

Não existe uma ferramenta que deva escolher em detrimento de outra. Deve tirar proveito das capacidades de cada uma para o trabalho em questão.

Conhecer bem esses softwares vai garantir que você escolha a melhor ferramenta para a tarefa. Muitos designers terão preferência por um deles, seja em termos de usabilidade ou estética. Mas, o mais importante é que você se responsabiliza, como designer, por conhecer ambos os programas saber o que pode fazer com cada. 

Se sua experiência for diferente, compartilhe suas opiniões nos comentários!