O que são imagens vetoriais e por que utiliza-lás?

A Caelum irá fazer um Outdoor e recebemos uma arte em jpeg com as dimensões de: 640x200px.

Tentaram utilizar a mesma imagem para o Outdoor e o painel ficou assim:

Com esse resultado, você talvez tenha medo de mostrar para seu chefe… Podemos notar que a imagem está com uma qualidade ruim, já que os pixels estão bem aparentes, ou seja, ficou estourada. E não é isso que gostaríamos como resultado final…

Mas poxa, a imagem está bonita aqui no meu PC:

Por que aconteceu aquilo com a imagem no Outdoor?

Para isso precisamos entender alguns pontos básicos sobre imagens. Vamos lá?

Como é feita uma imagem digital e suas diferenças

As imagens mais comuns, como fotos que tiramos nas câmeras, são formadas por bitmaps. Bitmaps que, por sua ordem, são formados por pixel. Mas afinal, o que é um pixel?

Cada pontinho na imagem representa um pixel, que está no seu monitor, tela do celular e etc. E, fazendo uma junção de blocos de pixels, (normalmente em cores semelhantes ou próximas) forma-se um bitmap.

Os arquivos Bitmaps, por serem formados pixel a pixel, se tiverem seu tamanho aumentado sofrem distorções consideráveis, pois cada ponto é transformado em blocos maiores, preenchidos com mais pixels de cores intermediárias, que consequentemente deixam a imagem meio deformada. Isso é chamado de interpolação.

Os formatos mais comuns que utilizam esse modelo são: jpeg, png, gif, tiff, etc. Mais usados, por exemplo, em fotografias. Então, para nossa situação nenhum desses formatos resolveria o problema.

Será que não existe uma espécie de receita de bolo? Uma fórmula que pudesse redimensionar proporcionalmente a mesma imagem para manter a qualidade?

Utilizando a matemática a seu favor

Ao invés de "pintarmos" pixel por pixel, podemos utilizar fórmulas matemáticas para recalcular as formas que criamos e assim não perder sua proporção e qualidade. Esse método é chamado de vetorização.

Dito isso, temos duas notícias: uma boa e uma ruim.

A ruim é que para fazer a vetorização teríamos que fazer os cálculos para cada forma que criamos (o que parece assustador!).

A boa notícia é que temos ferramentas que fazem isso para gente!

A ferramenta que iremos utilizar neste caso é o Adobe Illustrator (Conheça 7 ferramentas que podem ser alternativas ao Adobe Illustrator). Vamos ver como funciona esse lance de vetorizar na prática?!

Refazendo nossa imagem

Já que a nossa ideia é refazer/copiar o logo, porém em vetor, iremos abrir o Illustrator junto com a imagem que temos do logo da Caelum.

A ferramenta mais utilizada para vetorização no Illustrator é a Pen Tool. Que é bem parecida com a Pen Tool do Photoshop.

Podemos utilizar o mesmo conceito, clicando no ponto que desejamos começar e clicar onde queremos finalizar:

Para fazer as curvas do logo é bem simples também! A única diferença é que ao invés de apenas dar um clique para criar a linha, nós podemos clicar e arrastar para onde queremos que essa linha faça a curvatura:

Com isto conseguimos finalizar o restante do logo. Até chegar a algo mais ou menos assim:

Isto é apenas um rascunho inicial para termos uma noção de como ficará nossa nova arte.

E o resultado final ficaria mais ou menos assim:

Podemos exportar no formato .Ai, que nos permite editar a imagem a qualquer momento, e em .svg que irá nos possibilitar ampliar a imagem sem perda de qualidade (há outros formatos disponíveis também, como EPS, CDR, etc).

Faça o teste você mesmo e diga ai nos comentários!

Concluindo…

Conseguimos entender melhor para quais situações é uma boa opção a vetorização, como no caso de imagens em grandes dimensões. Mas também poderíamos utilizá-las em diversas outras situações, como em: identidade visual, ilustrações, em motion design, animações, entre outros.

Tento em mente tudo isso, uma "regrinha" que você pode levar considerar é que: sempre que tivermos que fazer um logotipo ou imagens que iremos querer escalar, já produzir em vetorial para evitar retrabalho e problemas futuros.

Seguindo essa linha de raciocínio podemos ter uma noção de qual tipo de imagem iremos precisar em trabalhos futuros.

Caso você tenha interesse em aprender ainda mais sobre estruturas e composições utilizando o Illustrator, temos cursos na Alura sobre esses temas!