Ilustrações vetorizadas dão um ar de modernidade na criação de web sites e aplicativos. Muitos sites já utilizam desta tendência e agora chegou a sua vez de explorar estes recursos.
Procurar por estes tipos de ilustrações pode ser tedioso e dificilmente você encontrará exatamente a imagem que você precisa, mas segue aqui uma dica de ouro… pesquise no undraw.
Conheça o undraw, uma biblioteca de ilustrações para web
Acesse o site https://undraw.co/illustrations e divirta-se, mas a grande sacada deste site não é apenas a sua vasta biblioteca de imagens, é a opção de download no formato SVG.
O que é SVG?
SVG (Scalable Vectorial Graphics) foi criado pela W3C, logo percebemos então que se trata de um formato de arquivo pensado para a Web, basicamente é uma imagem vetorizada, ou seja, não utiliza de mapa de bits como o JPG, PNG e GIF.
Uma imagem vetorizada pode ser escalável, significa que podemos aumentar ou diminuir as dimensões em largura e altura sem perder a qualidade e sem alterar o tamanho do arquivo em KB ou MB. O mesmo acontece com arquivos de vetor gerados pelo Corel Draw ou Adobe Ilustrator.
Não conseguimos usar o formato SVG para fotos, por este motivo ele é mais eficiente para ilustrações e textos.
Se tiver a opção SVG, opte por ela.
Se você tem uma imagem em formato PNG ou SVG, opte pelo SVG, por alguns motivos importantes;
- O tamanho do arquivo SVG é muito menor do que um PNG
- As dimensões de largura e altura não são comprometidas quando acessamos a mesma imagem em um Desktop e depois em um smartphone.
- SVG deixa seu site mais rápido
- Google ama SVG, sites que optam por SVG possuem mais possibilidade de obterem melhores indexações no Google.
Como usar SVG no meu site?
Não há segredo! Basta usar a tag <img> normalmente
<img src="caminho-do-arquivo.svg">
Como editar e mudar as cores das ilustrações do undraw?
Para isso você precisa apenas de um software de edições vetorial, se você não tiver nenhum instalado em seu computador, não pense duas vezes e instale o Inkscape. Aclamado pelos usuários do Linux (inclusive foi o professor Leandro da Etec de Ourinhos que me apresentou pela primeira vez), o Inkscape é uma solução perfeita para edição vetorial que substitui facilmente o Corel Draw e Adobe Illustrator e oferece versão em Português.
Faça o download no site oficial do projeto – https://inkscape.org/pt-br/
Após instalado, basta abrir o arquivo do undraw no Inkscape e a mágica acontece;
Uma coisa legal é que todas as ilustrações disponíveis no undraw são desagrupadas, isso permite uma fácil edição nos desenhos.
Como editar as cores de um arquivo SVG no Inkscape?
Selecione o desenho desejado e utilize a paleta de cores disponível na parte inferior da tela
Como mudar os elementos de lugar?
Em alguns casos, um único desenho é criado por várias partes (ou patches) e existe uma necessidade de agrupar estes patchs para poder mover o desenho uniformemente. Selecione todos os patchs que formam o desenho e clique com o botão direito sobre a seleção, escolha a opção agrupar.
E depois é só mover
O céu é o limite.
Este artigo ensina o básico, mas obviamente você pode adicionar textos e outras imagens à ilustração. Pode inclusive abrir várias ilustrações e a partir dos patchs de cada uma criar uma nova.
Exportando para PNG.
A recomendação é que utilize SVG em suas páginas da web, mas caso precise utilizar estas ilustrações em outros locais, como uma apresentação do Power Point por exemplo, ou em uma editoração do Publisher ou uma peça publicitária no Photoshop você deverá optar pela opção de arquivo em PNG.
Para exportar, clique no menu Arquivo > Exportar para PNG.
Gerar um arquivo PNG é o mesmo que fechar o arquivo, ou seja, ele não estará mais disponível para edição no Inkscape, por este motivo guarde sempre uma cópia da ilustração SVG caso precisa edita-la no futuro.
