Todos os dias voc\u00ea v\u00ea imagens diferentes ao seu redor, seja na internet, em outdoors ou livros.<\/p>\n
Essas imagens t\u00eam um papel importante e, como designer, voc\u00ea est\u00e1 ciente dele: informar uma mensagem \u00e0 sua audi\u00eancia. Por isso mesmo, a escolha das imagens\u00a0\u00e9 um fator muito relevante em conte\u00fados web. \u00c9 a\u00ed que entram os vetores.<\/p>\n
Vetores s\u00e3o tipos de imagens digitais feitos de linhas e pontos interconectados que s\u00e3o definidos em termos de altura, curvatura, raz\u00e3o e propor\u00e7\u00e3o. Ou, em outras palavras, \u00e9 uma imagem que pode ficar de qualquer tamanho.<\/p>\n
Por causa disso, voc\u00ea pode aumentar ou diminuir um vetor em qualquer propor\u00e7\u00e3o sem perder qualidade. Assim, eles podem ser usados para compor qualquer tipo de imagem!<\/p>\n
Hoje voc\u00ea vai entender o que s\u00e3o vetores, quais os benef\u00edcios de utiliz\u00e1-los, como edit\u00e1-los em programas de design como o Adobe Illustrator e o Inkscape, al\u00e9m de lugares\u00a0onde encontr\u00e1-los na internet.<\/p>\n
Ent\u00e3o, o que est\u00e1 esperando? Me acompanhe\u00a0na leitura deste texto!<\/p>\n
\u00c9 normal come\u00e7ar um projeto de design pedindo ao seu cliente uma coisa: vetores. Eles podem ser a logo de uma empresa, grafismos ou ilustra\u00e7\u00f5es institucionais.<\/p>\n
Mas uma coisa \u00e9 certa: vetores sempre estar\u00e3o presentes nos projetos de design.<\/p>\n
N\u00e3o \u00e9 dif\u00edcil entender o porqu\u00ea. Existem dois tipos principais de\u00a0imagens eletr\u00f4nicas<\/a>\u00a0que podem ser utilizadas por profissionais das artes gr\u00e1ficas: os vetores e as imagens r\u00e1ster. Ambas muito diferentes entre si.<\/p>\n Vetores s\u00e3o criados com um pano de fundo de f\u00f3rmulas matem\u00e1ticas. Isso, que inicialmente pode parecer complexo demais, \u00e9 essencial para que o vetor tenha sua principal caracter\u00edstica: mesmo que preenchido com cores, gradientes, padr\u00f5es ou qualquer atributo em particular ele pode ser dimensionado infinitamente.<\/p>\n J\u00e1 as imagens r\u00e1ster s\u00e3o diferentes. Por serem baseadas em pixel \u2014\u00a0a menor unidade de medida da computa\u00e7\u00e3 \u2014 o que consiste basicamente em pequenos quadradinhos de cor, esses arquivos n\u00e3o t\u00eam a mesma flexibilidade.<\/p>\n Por isso, para aplica\u00e7\u00f5es em que um tamanho pode variar, como a de uma logo, o ideal \u00e9 obter um arquivo em vetor. Ele ficar\u00e1 t\u00e3o bem num pequeno cart\u00e3o de visita e numa grande placa de rua e conseguir\u00e1 fazer tudo isso sem comprometer a performance do seu computador.<\/p>\n Afinal, ao contr\u00e1rio das imagens r\u00e1ster, vetores s\u00e3o muito leves e extremamente port\u00e1teis.<\/p>\n Mas estes n\u00e3o s\u00e3o os \u00fanicos benef\u00edcios de utiliz\u00e1-los. Conhe\u00e7a mais alguns deles a seguir.<\/p>\n O primeiro e principal motivo para se utilizar vetores \u00e9 essa flexibilidade que j\u00e1 mencionamos no t\u00f3pico anterior. O fato de se poder escalar esses desenhos para todos os tamanhos e propor\u00e7\u00f5es, sem a perda de sua resolu\u00e7\u00e3o, \u00e9 o que faz do formato um verdadeiro campe\u00e3o entre designers e outros profissionais gr\u00e1ficos.<\/p>\n Sempre que voc\u00ea tiver um projeto que ter\u00e1 de mudar de tamanho no futuro, o ideal \u00e9 usar vetores durante sua concep\u00e7\u00e3o. Assim, na hora de fazer as adapta\u00e7\u00f5es necess\u00e1rias n\u00e3o haver\u00e1 dor de cabe\u00e7a!<\/p>\n Entretanto, este n\u00e3o \u00e9 o \u00fanico grande motivo para se utilizar vetores. Eles s\u00e3o tamb\u00e9m muito f\u00e1ceis de se criar e editar, outra raz\u00e3o para sua popularidade. Usando ferramentas como o Freehand, Corel, o Inkscape ou o Illustrator \u00e9 muito simples expressar a sua criatividade. E n\u00e3o se corre o risco de ver distor\u00e7\u00f5es em uma imagem.<\/p>\n \u00c0s vezes, inclusive, o maior desafio nem est\u00e1 em criar o vetor em si, mas em decidir exatamente como ele vai conversar com o restante da composi\u00e7\u00e3o. A liberdade desse formato \u00e9 enorme, claro, mas isso significa que o designer precisa tomar decis\u00f5es talvez demais at\u00e9, o que tem seu lado bom e ruim. Por outro lado, quem j\u00e1 quebrou a cabe\u00e7a ajustando uma foto pixelada sabe que \u00e9 dif\u00edcil voltar atr\u00e1s depois de experimentar editar vetores pela primeira vez.<\/p>\n O curioso \u00e9 que, mesmo com tanta praticidade, tem gente que ainda resiste a migrar para ferramentas de edi\u00e7\u00e3o vetorial. Talvez seja apego ao m\u00e9todo antigo, ou s\u00f3 medo de sair da zona de conforto. Mas olha, depois que aprendemos a manipular curvas de B\u00e9zier sem sofrimento, tudo parece mais f\u00e1cil \u2013 n\u00e3o digo que vira passeio no parque, mas est\u00e1 mais pra brincadeira de crian\u00e7a do que pra maratona.<\/p>\n Quando voc\u00ea amplia demais uma foto, o que acontece \u00e9 que seus pixels “estouram”. Eles ficam maiores do que deveriam ser e, consequentemente, perdem resolu\u00e7\u00e3o. Com um vetor isso nunca acontece, pois n\u00e3o h\u00e1 pixels para escalar.<\/p>\n Editar vetores \u00e9 tamb\u00e9m mais prazeroso do que editar imagens r\u00e1ster, j\u00e1 que todos os componentes de uma imagem podem ser individualmente manipulados da forma como voc\u00ea preferir.<\/p>\n Isso significa que mudan\u00e7as n\u00e3o far\u00e3o com que voc\u00ea tenha de refazer todo o seu layout, uma excelente maneira de poupar tempo no seu dia a dia j\u00e1 corrido.<\/p>\n Por \u00faltimo, vetores s\u00e3o \u00f3timos quando impressos. Pelo mesmo motivo que eles n\u00e3o “estouram” ao longo de sua manipula\u00e7\u00e3o, ou seja, pela aus\u00eancia de pixels, vetores resultam em impress\u00f5es mais vivas e n\u00edtidas.<\/p>\n H\u00e1 uma por\u00e7\u00e3o de arquivos em vetor por a\u00ed, mas os mais comuns s\u00e3o o .ai, o .eps, o .pdf e o .svg.<\/p>\n Dentre esses formatos, apenas o .ai \u00e9 propriet\u00e1rio, ou seja, est\u00e1 atrelado a uma \u00fanica plataforma (o Adobe Illustrator).<\/p>\n Todos os demais tipos de arquivos podem ser abertos em qualquer editor de desenhos vetoriais que voc\u00ea tenha em m\u00e3os.<\/p>\n Editar vetores \u00e9 muito simples a partir do momento que voc\u00ea ganha alguma experi\u00eancia com uma ferramenta de design vetorial, como o Adobe Illustrator ou o Inkscape.\u00a0Essas ferramentas<\/a>\u00a0s\u00e3o o que permitir\u00e3o que voc\u00ea visualize e manipule todos os arquivos de vetores baixados nos sites recomendados por este artigo.<\/p>\n Na maioria dos casos, o que acontece \u00e9 o seguinte: desenhos vetoriais s\u00e3o organizados em camadas, ent\u00e3o quando voc\u00ea faz download deles pode edit\u00e1-los com facilidade.<\/p>\n Voc\u00ea encontrar\u00e1 em cada um pelo menos duas camadas, a de plano de fundo, onde ser\u00e1 colocada a cor ou textura que dar\u00e1 suporte ao seu vetor e uma camada principal, onde estar\u00e1 localizado o desenho em si.<\/p>\n Uma ou ambas as camadas podem estar protegidas, o que significa que voc\u00ea ter\u00e1 de clicar no \u00edcone que se assemelha a um cadeado em seu editor de imagens. Feito isso voc\u00ea estar\u00e1 pronto para editar aquela camada espec\u00edfica.<\/p>\n Para mudar as cores ou os formatos de um elemento, basta usar a Direct Selection Tool, que pode ser encontrada no Illustrator utilizando o atalho (A). Ao clicar em uma parte do desenho ela ser\u00e1 selecionada e estar\u00e1 pronta para edi\u00e7\u00e3o.<\/p>\n A partir da\u00ed voc\u00ea poder\u00e1 mudar sua cor ou tra\u00e7ado conforme desejar, selecionando seus pontos \u00e2ncora. Voc\u00ea tamb\u00e9m poder\u00e1 fazer um monte de transforma\u00e7\u00f5es com a forma selecionada, como mover, rodar, refletir ou mudar sua escala de acordo com a sua necessidade.<\/p>\n Quando terminar sua edi\u00e7\u00e3o, n\u00e3o se esque\u00e7a de salvar um novo arquivo, clicando nas teclas Ctrl + Shift + S.<\/p>\n Um recurso muito bacana que existe para auxiliar designers na sua jornada de cria\u00e7\u00e3o \u00e9 a compra de vetores prontos. Desenhos e figuras podem ser baixados da internet para facilitar o seu trabalho e acelerar a velocidade com que voc\u00ea faz suas entregas.<\/p>\n Existem alguns sites espec\u00edficos para isso, como o Freepik, o Pixabay, o\u00a0DepositPhotos<\/a>\u00a0e o ShutterStock. Abaixo voc\u00ea confere o procedimento para encontrar desenhos vetoriais em cada um destes websites.<\/p>\n Entre no\u00a0Freepik.com<\/a>, digite o termo mais pr\u00f3ximo da sua escolha e clique em “Browse Popular Vectors”. Ele abrir\u00e1 uma p\u00e1gina com os resultados, na qual \u00e9 poss\u00edvel filtr\u00e1-los por mais popular, mais baixado ou mais novo. Boa parte dos vetores s\u00e3o gratuitos, mas alguns s\u00e3o recursos premium.<\/p>\n Para encontrar vetores no\u00a0Pixabay<\/a>\u00a0o processo \u00e9 bastante parecido com o que voc\u00ea fez no site anterior. Voc\u00ea abrir\u00e1 a p\u00e1gina inicial, digitar\u00e1 o termo de sua escolha e no menu lateral \u00e0 busca selecionar\u00e1 “Vector Graphics” antes de clicar no bot\u00e3o da lupa.<\/p>\n O site oferece mais op\u00e7\u00f5es de filtragem do que seu concorrente Freepik, permitindo que voc\u00ea liste por tamanho, cor ou categoria.<\/p>\n No\u00a0DepositPhotos<\/a>\u00a0o processo tamb\u00e9m \u00e9 parecido com o dos demais websites. Escolha um termo de pesquisa, como “orange” (laranja) e selecione “Vectors”.<\/p>\n A\u00a0ShutterStock<\/a>\u00a0segue o mesmo procedimento, com um grande diferencial. Voc\u00ea pode selecionar um termo de pesquisa e buscar por “Vectors”, clicando no bot\u00e3o vermelho da lupa ou fazer upload de uma imagem e buscar vetores semelhantes a ela, clicando no \u00edcone da c\u00e2mera.<\/p>\n H\u00e1 tamb\u00e9m muitos websites que entregam desenhos vetoriais gratuitamente. Selecionamos alguns dos melhores deles para que voc\u00ea adicione aos seus favoritos.<\/p>\n At\u00e9 pouco tempo atr\u00e1s ele se chamava VectorOpenStock. O\u00a0Vexels<\/a>\u00a0tem um monte de categoriais de vetores gr\u00e1ficos, organizados de forma simples. Seu grande diferencial, entretanto, \u00e9 a ferramenta que permite que voc\u00ea edite um vetor online (direto de seu navegador) e\u00a0customize suas cores<\/a>\u00a0e elementos, para que ele esteja pronto assim que voc\u00ea clicar em baixar.<\/p>\n J\u00e1 precisou de uma marca para fazer um mockup e n\u00e3o a encontrou? O\u00a0BrandEPS<\/a>\u00a0planeja resolver isso, com sua biblioteca com mais de 9000 arquivos de logos de diversos empreendimentos ao redor do mundo.<\/p>\n Como o pr\u00f3prio nome indica,\u00a0DryIcons<\/a>\u00a0\u00e9 um site para o desenvolvimento de icones que distribui v\u00e1rios deles gratuitamente, sob uma licen\u00e7a Creative Commons. Voc\u00ea pode utiliz\u00e1-los em seus designs e templates web gratuitamente e fazer o download de tantos quanto quiser.<\/p>\nPor que eles s\u00e3o usados?<\/h2>\n
Quais s\u00e3o os formatos de vetores?<\/h2>\n
Como editar vetores em programas de design?<\/h2>\n
Como buscar vetores em sites?<\/h2>\n
Freepik<\/h3>\n
Pixabay<\/h3>\n
DepositPhotos<\/h3>\n
ShutterStock<\/h3>\n
Onde encontrar os melhores vetores gr\u00e1tis?<\/h2>\n
Vexels<\/h3>\n
BrandEPS<\/h3>\n
DryIcons<\/h3>\n
Vecteezy<\/h3>\n