junho 2, 2020

Adicionar ilustrações personalizadas no seu site sem usar o Illustrator ou Photoshop

Você quer colocar ilustrações vetorizadas no seu site, blog ou email, mas não sabe como editar no Illustrator (ou não tem o programa)?

Não precisa entrar em pânico, nem gastar dinheiro com isso. Eu vou te dar a solução mais prática, simples e gratuita que existe.

Qual a solução mágica?

Já ouviu falar da plataforma de recursos digitais Freepik? Bom, se ainda não conhece, não esqueça de postar essa postagem no Pinterest para não esquecer jamais.

Freepik é uma comunidade que reúne designers e e fotógrafos que disponibilizam fotos, vetores, ícones e templates grátis e pagos através de assinatura. São milhares de desenhos que você pode fazer download e usar de forma comercial nos seus trabalhos.

Nesse site tem muitos modelos grátis e existem alguns modelos que os criadores colocam acessível apenas para os assinantes premium que pagam uma mensalidade.

Agora falando sobre vetores e ilustrações, sempre que você fizer download o arquivo estará no formato de vetor ou photoshop, para editar é preciso ter os programas certos, porém, nem todo mundo domina a arte de editar vetores sem danificar a estrutura existente, é um desafio enorme. E por isso, eu quero te mostrar uma nova ferramenta que a FreePik disponibilizou recentemente: STORIES FREEPIK.

O que é Stories Freepik?

É uma versão mais prática do Freepik original, onde você pode fazer download dos arquivos de imagem vetorizados diretamente no formato SVG ou PNG e usar no seu site. E o site permite que você use suas cores de marca e até mesmo anime as ilustrações! Não é o máximo?

Personalize os conceitos ilustrados e anime-os para destacar sua página de destino, aplicativo ou apresentação

Como posso mudar a cor das ilustrações?

É muito fácil. Ao selecionar uma ilustração, você verá no canto superior direito um botão chamado “CHANGE COLOR”. Clique nele e escolha uma cor predefinida, use o seletor de cores ou apenas insira seus próprios valores RGB ou Hex.

Posso selecionar fundos diferentes em todos os estilos de ilustração? Se sim, como?

Antes de selecionar qualquer ilustração na página inicial, dependendo do estilo, você verá diferentes opções para escolher no lado esquerdo da tela:

HIDDEN: o fundo é removido (todos os quatro estilos.
SIMPLE: um plano de fundo simples é exibido (apenas Rafiki, Bro e Pana).
DETAILED: um plano de fundo mais detalhado é exibido (apenas Rafiki e Pana)

Você também pode encontrar essas opções no lado direito da tela depois de selecionar qualquer ilustração.

Posso escolher quais elementos das ilustrações eu quero manter?

Absolutamente! Sempre que você seleciona uma ilustração, encontra uma lista de LAYERS (camadas) no lado direito da tela. Essas camadas correspondem aos diferentes elementos da ilustração, o que significa que você pode escolher as que deseja manter e descartar as que não precisa. Para ocultar qualquer elemento, basta clicar no olho ao lado do nome na lista. Da mesma forma, para mostrá-lo, basta clicar no olho novamente.

Como posso animar as ilustrações?

Após selecionar uma ilustração, um botão chamado “ANIMATE IT” aparecerá no canto superior direito da tela. Se você clicar nele, acessará o painel de animação, onde poderá selecionar qualquer um dos elementos da ilustração e aplicar diferentes animações a eles. Aqui está uma lista abrangente:

ENTRANCE (Entrada)

Fade In: o elemento aparece gradualmente na tela.
Slide Up: o elemento aparece na tela enquanto desliza para cima.
Slide Down: o elemento aparece na tela enquanto desliza para baixo.
Slide Left: o elemento aparece na tela enquanto desliza do lado esquerdo.
Slide Right: o elemento aparece na tela enquanto desliza do lado direito.
Zoom In: o elemento aparece na tela enquanto aumenta de tamanho.
Zoom Out: o elemento aparece na tela enquanto diminui.
Light Left: o elemento entra pelo lado esquerdo, freia e permanece no lugar.
Light Right: o elemento entra pelo lado direito, freia e permanece no lugar.

LOOPING (Repetição)

Shake: o elemento parece estar tremendo.
Spin: o elemento gira no lugar no sentido horário..
Floating: o elemento parece estar flutuando para cima e para baixo.
Heartbeat: o elemento cresce e diminui, imitando um batimento cardíaco.
Wind: o elemento se move levemente para os lados como se estivesse sendo soprado pelo vento.

Você também pode ajustar algumas configurações para personalizar ainda mais essas animações:

Easing (somenta para animações de ENTRADA): aqui você pode selecionar o tipo de flexibilização que deseja para a animação.
- Toon: o elemento excede um pouco e depois volta ao normal.
- Linear: a animação parece uniforme por toda a duração.
- Ease-in: a animação começa lentamente e aumenta a velocidade.
- Ease-out: a animação fica mais lenta no final.
Duration: aqui você pode definir a duração em segundos, usando o controle deslizante ou inserindo seu próprio valor.
Delay: aqui você pode definir quantos segundos devem passar antes que a animação comece.
Animate children (somente para animações de ENTRADA): marque esta caixa se desejar que as diferentes partes do elemento selecionado sejam animadas individualmente, o que significa que elas aparecerão na tela em momentos diferentes.

Se você não tiver certeza de quais deve escolher, sempre pode clicar em “RANDOMIZE!” para gerar um conjunto aleatório de animações para os diferentes elementos da ilustração. Finalmente, para remover todas as animações, basta clicar em “RESET”.

Ao baixar ilustrações, quais formatos de arquivo estão disponíveis?

Todas as ilustrações podem ser baixadas como arquivos SVG ou PNG. Os primeiros são totalmente editáveis, suportados pela maioria dos navegadores e podem ser convertidos em formas devido à sua natureza vetorial, enquanto os últimos possuem uma boa taxa de compactação, maior profundidade de cor e suporte à transparência.

Por outro lado, as animações podem ser baixadas como um arquivo HTML para usar no seu site com SVG e CSS embutidos. Eles também podem ser exportados como um vídeo GIF ou MP4, permitindo selecionar o tamanho e a cor do plano de fundo para adaptá-lo ao seu projeto.

Observe que não é possível exportar uma animação como um vídeo GIF ou MP4 contendo efeitos de entrada e loop ao mesmo tempo. Se você precisar dos dois tipos, deverá exportá-lo duas vezes: um com efeitos de entrada e outro com efeitos de loop.