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!

Curso Photoshop CS6 - Aula 8 - Seleções

SELEÇÕES

Se você deseja editar uma parte de uma imagem sem medo de que poderia danificar acidentalmente outra parte, é necessário primeiro selecioná-la.
Para selecionar uma parte de uma imagem em um programa de pintura, você a envolve com um contorno de seleção ou uma marca de seleção, o que diz ao Photoshop onde aplicar suas instruções de edição. O contorno de seleção aparece como um padrão de movimento de marcas de linhas tracejadas.

Seleção retangular

De grande importância para os programas de pintura, essa ferramenta permite que você     selecione partes retangulares ou quadradas de uma imagem.

Ao selecionar a ferramenta, na barra de propriedades temos:

Botão de seleção da ferramenta, ao lado temos os botões de manipulação de nossa seleção. O que está selecionado é o botão natural, onde, ao se fazer uma seleção e soltar o mouse e clicar novamente ele descarta a seleção anterior e inicia uma nova, o segundo botão permite somar uma nova seleção a que já está feita, esse comando pode ser substituído pela tecla SHIFT pressionada. O terceiro permite subtrair a seleção com a nova seleção, pode ser substituído pela tecla ALT, o último botão desse grupo permite fazer a intersecção das seleções, pode ser substituído pelas teclas SHIFT+ALT.

Podemos definir um enevoamento de nossa seleção através do comando Feather. Em style podemos definir valores para nossa seleção. Fixed Ratio fará sempre que a seleção possa ser escalar, mas respeitando os valores ali descritos, e Fixed Size, fará com a seleção seja feita pelos valores ali digitados.

 Eliptical Marquee

A ferramenta Eliptical Marquee funciona como a Retangular Marquee, exceto pelo fato de que ela seleciona partes elípticas ou circulares da imagem.

Quando precisar selecionar um objeto circular perfeito, não oval, posicione a seleção ao centro da imagem e faça a seleção com as teclas SHIFT+ALT pressionadas, isso quando ainda não houver nenhuma seleção, caso contrário, ele fará a intersecção das seleções.

Grupos de Ferramenta Laço

A primeira ferramenta do grupo da ferramenta Laço é laço livre, embora você possa utilizar essa ferramenta par selecionar qualquer área, é necessário uma precisão muito grande na seleção, então ela é mais utilizada para seleções livres.
 

A segunda ferramenta laço é laço poligonal, ele permite a seleção em ângulos retos.
 

O laço magnético que é a terceira ferramenta de seleção do grupo Laço permite criar seleções de acordo com os pixels de sua imagem. Conforme se vai arrastando ou mouse ele vai criando pontos. Você pode acrescentar pontos clicando, e pode voltar pontos usando a tecla BACKSPACE de seu teclado.
 

Ferramenta Varinha Mágica

A primeira das ferramentas é a Quick Select Tool, que permite selecionar os objetos da seguinte forma. Clique em uma parte de sua imagem mantenha pressionado e continue arrastando, em áreas como a imagem com grande destaque de cores, fica fácil de fazer a seleção:
 

A segunda ferramenta é a varinha mágica, ela verifica o pixel e captura todos os pixels semelhantes e ligados a área clicada. Você pode configurar a tolerância da ferramenta através da barra de propriedades. Ela é muito útil a da ferramenta através da barra de propriedades. Ela é muito útil a tolerância da ferramenta através da barra de propriedades. Ela é muito útil a selecionar áreas que tenham destaque em relação ao fundo da imagem.

 

Em qualquer uma das formas de seleção vistas, como as que ainda serão ensinadas, podem ser descartadas, pressionando CTRL+D.

Menu Select

Podemos também manipular as seleções em nossa imagem através desse menu. As opções são:

•    All - Seleciona toda a imagem.
•    Deselect - Desfaz qualquer seleção criada, pode ser substituído pelo CTRL+D.
•    Reselect - Retorna a última seleção feita.
•    Inverse - Inverte a seleção atual.
•    All Layers - Seleciona todas as Layers (camadas).
•    Deselect Layers - Descarta a seleção de todas as Layers (camadas).
•    Similar Layers - Seleciona Layers (camadas) similares.
•    Color Range - Permite selecionar em sua imagem a partir de pixel sem uma seleção já existente ou através de toda a imagem.

Feather

Permite fazer um enevoamento na imagem, baseado pela seleção feita.
Abra uma imagem, faça, por exemplo, uma seleção retangular em sua imagem.
 

Clique no menu Select, Modify, Feather
 

Defina o valor do enevoamento e clique em OK

Se você pressionar DELETE, ele apaga o que está selecionado, mantendo o enevoamento.
 

Porém vamos fazer com que ele enevoe em volta da seleção e deixe a imagem com fundo transparente.
Pressione CTRL+Z para voltar à seleção.
Clique no Menu Select Inverse.
Observe agora na paleta de Layers que na Layer da imagem aparece um cadeado.
 

Isso significa que o background da imagem está bloqueado. Para desbloquear o background, dê um duplo clique na layer.
 

Pressione OK e veja que agora a imagem está desbloqueada.

Pressione DELETE.
 

Sobre as demais opções do Menu Select, Modify:

• Border - Acrescenta uma borda em sua seleção.
• Smooth - Suaviza a seleção.
• Expand - Aumenta a sua seleção.
• Contract - Diminui a sua seleção.

As demais opções do menu select são:

• Grow - Seleciona os pixel vizinhos de uma seleção existente e tem cores semelhantes às incluídas na seleção, de acordo com o valor de tolerância.
• Similar - Funciona de maneira similar a opção Grow exceto que os pixels não precisam ser adjacentes, quando acionado o comando, ele seleciona qualquer pixel que esteja dentro da faixa de tolerância, independente do local do pixel na imagem de primeiro plano.
• Transform Selection - Permite alterar a forma de sua seleção através da barra de propriedades.

 
 

 Através do Menu Edit, Transform, podemos também modificar a forma de nossa seleção, inclusive adicionando Perspectiva.

Ainda nas barras de propriedades no final da barra temos o botão de WARP, ele permite trabalhar a seleção como se fosse um envelope.

Com isso encerramos mais um assunto próxima aula faremos 2 atividades.

até lá.

Curso Photoshop CS6 - Aula 7 - Alterando amanho da imagem

REDEFININDO UMA IMAGEM

Normalmente quando se fala em redimensionar uma imagem, isso significa aumentar ou reduzir uma imagem. O Photoshop trabalha de diversas formas para alteração de sua imagem. A forma mais clássica, clique no Menu Image / Image Size.

Na caixa que se abre temos o tamanho da imagem em largura e altura, onde ele apresenta as dimensões em pixels. E, na parte do meio, as dimensões em cm que são referentes ao documento, além da resolução. Abaixo temos as opções de Scale Styles, que ao estar marcada fará com os estilos aplicado sejam redimensionados (veremos estilos posteriormente), está marcada a opção “Constrain Proportions”, que mantém a proporção da imagem. Para definir as novas dimensões clique em OK.

Sempre que for trabalhar com imagens em grande formato, e precise adaptá-las em um layout, é altamente recomendável redimensioná-las antes a um valor próximo do que precisa, isso fará com o Photoshop consuma menos memória de seu equipamento.

Você pode também aumentar a área de uma imagem ou diminuir a área recortando a imagem através do comando Canvas Size.

Abra uma nova imagem:

Veja a imagem original.

Clique no Menu Image, Canvas Size

A caixa de diálogo mostra as dimensões originais da imagem, e permite que você possa adicionar as novas dimensões, definindo também um ponto de âncora. No caso vou alterar o Width para 800 e colocar como ponto de âncora o meio à direita.

Ao clicar em OK, o Photoshop pedirá uma confirmação. (Pela redução da imagem, irá ocorrer um corte na imagem).

Caso precise retornar, utilize o comando desfazer (CTRL+Z). Este comando ele desfaz e repete a última ação. Caso deseje desfazer mais ações, a combinação CTRL + ALT + Z efetua o procedimento, lembrando que não é ilimitado, voltando apenas 21 ações.

Outra forma de se recortar uma imagem é através da ferramenta CROP, clique sobre a ferramenta e observe a barra de propriedades.

Podemos utilizar para ela um corte livre, ou podemos pela barra de propriedades definir altura, largura e resolução. Estes dados ficam armazenados na memória do Photoshop, então caso venha a utilizar essa ferramenta e precise de corte livre, basta clicar no botão Clear.

Para utilização da ferramenta basta clicar onde começa o recorte mover o mouse com o botão esquerdo pressionado

Observe que ao soltar o mouse ele ainda não faz o corte e apresenta alças de dimensão para que se possa alterar a área de corte. Ao definir a área de corte desejada, clique no botão de confirmação na parte superior da tela (canto superior direito, botão em forma de V). 

Para facilitar a utilização da ferramenta de corte em áreas de precisão, pressione a tecla Caps Lock (maiúscula) de seu teclado que o cursor do mouse transforma-se em uma cruz, facilitando o processo.

Até a próxima

Aula 1 - Introdução
Aula 2 - FERRAMENTAS
Aula 3 - Ferramentas Parte II
Aula 4 - Imagens Bitmap
Aula 5 - Painéis
Aula 06 - Criar, Abrir, Salvar e Exportar