Adobe Illustrator: ilustrações para interfaces digitais

A base da ilustração - Apresentação

Olá, tudo bem? Eu sou Felipe Laboriau, designer gráfico e instrutor na Alura.

Autodescrição: Eu sou um homem de pele branca, cabelos pretos. Utilizo bigode e estou vestindo uma camiseta preta. Estou gravando esse vídeo do meu quarto, que tem um iluminação azul com um pouco de rosa atrás de mim, e um quadro pendurado na parede à minha esquerda.

Quero te convidar a participar do nosso curso de ilustrações para interfaces digitais. Nele, nós vamos criar uma ilustração digital com Illustrator. Vou te mostrar como você não precisa ser um ilustrador para criar uma ilustração!

Trabalharemos a vetorização a partir de uma fotografia. Nós vamos gerar uma ilustração do tipo flat. Ela é mais simplificada e terá um acabamento profissional, que você pode aproveitar futuramente nas suas interfaces digitais, sejam sites ou aplicativos. Trabalharemos majoritariamente com a ferramenta "caneta".

Vou partir do princípio de que você já conhece o Illustrator, não te apresentarei o programa do zero. Criaremos essa ilustração, vamos fazer todo o desenho, colorir, trazer volumetria e tridimensionalidade e incorporar textura. Depois, realizaremos um intercâmbio dessa ilustração, desse material criado dentro do Illustrator, com o Figma, que hoje é o principal software de prototipação de interfaces digitais.

Esse curso é pensado exatamente para você que já conhece um pouco do Illustrator, quer se aprofundar ainda mais no software e entender como criar ilustrações, representações de figuras humanas a partir de imagens. Se você já trabalha com o Figma, aprenderá como trazer o Illustrator para a construção dessas suas interfaces e trabalhar de ponta a ponta, da criação dos elementos e depois a prototipação com seus conhecimentos de Figma.

Espero que você tenha curtido a nossa proposta. Vamos estudar?

A base da ilustração - Visão geral

Olá, eu quero te dar as boas-vindas a mais um curso na Alura. Muito obrigado pela sua presença! Vou aproveitar esse espaço para conversarmos rapidamente sobre tudo que de fato será trabalhado durante o curso.

A proposta é que façamos uma ilustração a partir de uma imagem. Vamos conduzir a vetorização dessa fotografia de uma modelo em pé. Entenderemos as boas práticas, tanto da construção dos vetores como da organização desse tipo de arquivo.

Separaremos as diferentes "partes" da modelo em camadas distintas (cabeça, tronco, pernas, entre outros), para não nos enrolarmos mais adiante quando for construir o vetor.

Conversaremos bastante sobre as boas práticas, como construir essas formas da maneira mais tranquila possível, com linhas simples e com curvas bem feitas.

Uma vez que esses contornos, tenham sido criados, nós vamos trazer as cores para a nossa ilustração, que será do tipo flat, mais simplificada, mais minimalista. Ainda assim, vamos incorporar também uma certa volumetria e tridimensionalidade. Desenharemos as sombras da nossa ilustração.

Além disso, vamos incorporar textura para enriquecer visualmente o nosso resultado. Nós não geraremos apenas essa personagem, também criaremos uma ambientação. Então, vamos conversar sobre os elementos que podem ser construídos e o porquê deles, para termos um cenário que faça sentido e que enriqueça o nosso resultado de fato.

Além disso, vamos falar sobre como replicar o mesmo estilo de ilustração em diferentes ilustrações, preservando as cores, padronagens eventualmente criadas, elementos gráficos e texturas. Entenderemos como perpetuar o mesmo estilo visual.

Por fim, vamos entender como levar essa ilustração com textura e padronagens do Illustrator para o Figma, entendendo como se dá o intercâmbio entre esses softwares. Vamos aprender o que conseguimos levar de uma maneira mais tranquila, o que conseguimos trabalhar como vetor e o que precisamos salvar como imagem.

Então, mais uma vez, muito obrigado pela sua presença! Eu quero te lembrar que nós temos o fórum, onde você pode tirar suas dúvidas, fazer seus comentários. Também temos o Discord, que eu recomendo você participar para interagir com a comunidade da Alura, com o pessoal da nossa escola de UX Design — não só comigo, mas com outros professores, com outros alunos, com outras alunas. Assim, você pode compartilhar os seus trabalhos, pedir feedback, conversar de um modo geral conosco. Nos vemos no próximo vídeo.

A base da ilustração - Ambientação e início da vetorização

Nesse curso, nós vamos desenvolver ilustrações do estilo flat para serem utilizadas nas interfaces digitais do nosso banco ByteBank.

O que seriam ilustrações do tipo flat? São ilustrações em que se preza o minimalismo na representação das formas que estão sendo ilustradas.

Fiz uma pesquisa bem rápida no Dribble, uma plataforma excelente para conhecermos referências de trabalhos de outros profissionais. Separei dois projetos para entendermos com mais facilidade o que seria esse minimalismo.

Vamos observar esse primeiro projeto. Note como as cores acontecem na maior parte das vezes de forma chapada, de forma flat, até mesmo nas figuras humanas. Note os rostos, por exemplo, e o resto do corpo desses dois personagens. Temos apenas uma cor acontecendo. Na camiseta deles também só tem uma cor acontecendo. Há uma noção de tridimensionalidade e profundidade, com um tom um pouco mais escuro, mas ainda assim é só um tom de branco. Então, a ilustração do tipo flat preza pela menor quantidade possível de detalhes.

Nesse primeiro exemplo, os rostos até têm olhos, nariz e boca. Mas observe como, nesse segundo exemplo, não temos nem essas partes. Ainda assim, é possível transmitirmos uma mensagem, conseguimos entender que nesse caso se trata de uma figura humana.

Esse estilo flat está muito em voga hoje em dia e vou trazê-lo para o nosso projeto. Faremos essas ilustrações em cima de uma fotografia, porque eu quero desmistificar para você esse processo de ilustração.

Uma pessoa que trabalha com isso no dia a dia terá a competência para criar uma ilustração do zero e fazer um trabalho com outro nível de detalhe e qualidade gráfica, mas nós não necessariamente precisaremos de uma ilustração tão bem acabada assim. Para uso em interfaces digitais, muitas vezes essas ilustrações mais simples, flat, funcionam muito bem.

Você pode conseguir imagens gratuitas para serem utilizadas nas suas ilustrações, para você fazer a vetorização, a simplificação também da forma, em plataformas como Freepik. Nessas plataformas internacionais. é interessante que você utilize verbetes, palavras em inglês para ter resultados melhores. No Freepik, também há fotografias que precisamos pagar pelos direitos autorais, mas podemos filtrar as gratuitas no menu à esquerda. Outra opção é o Unsplash, uma plataforma de fotos gratuitas. Nele, você nem precisa fazer um filtro para selecionar fotos, só estamos trabalhando com elas.

Vou deixar todos esses links do Dribble, do Freepik, do Unsplash e de outras ferramentas interessantes online em um “Para saber mais”, em um texto depois desse vídeo. Então, vamos para o Illustrator, para começar o nosso trabalho.

Você vai notar que eu já trouxe uma fotografia que será a nossa referência da ilustração. Nesse primeiro momento, trabalharemos com a separação de camadas. Essa figura humana (uma pessoa que está mexendo em um smartphone) é composta por diversas partes. Nós temos todos os membros, as pernas, o tronco, os braços, a cabeça, as mãos, os pés, o próprio smartphone.

Para nossa ilustração não ficar confusa enquanto estivermos trabalhando, eu recomendo que você separe essas diferentes partes em camadas distintas, para você não ficar clicando sem querer em cada uma delas. Note que eu já criei uma camada chamada “Imagem”, onde eu vou deixar exatamente essa imagem. Posso bloquear essa camada e não ficar clicando nesse conteúdo sem querer.

Vou criar uma camada nova que eu vou chamar de “pernas”, para então começar a minha vetorização. Vou dar o zoom e vamos seguir o nosso trabalho com aquele princípio fundamental de utilizar o menor número de pontos âncora possível. Caso tenhamos alguma dificuldade em fazer o desenho de uma curvatura, de algo que é mais suave, podemos aproveitar os diversos artifícios que o Illustrator nos oferece, por exemplo, a suavização de cantos.

Com tecla "P", usarei a ferramenta caneta. Não vou trabalhar com o preenchimento, apenas com uma cor de traçado. Vou escolher magenta, que dá um contraste legal em relação à cor da calça que a modelo está usando, que é mais escura, e vou trabalhar com um ponto.

Posso começar acima da barra da calça, por exemplo, dou um clique e seguro, dou um clique e seguro, trago para o ponto da lateral direita, e vou continuando. Observe que estamos falando de uma simplificação, então eu não preciso necessariamente seguir o contorno da calça perfeitamente. Eu preciso da forma geral, do contorno mais fundamental.

Estou trabalhando com o menor número de pontos possível, então a calça sobe e depois faz uma curvatura. Então, clico para mudar o sentido. Trago para cima mais uma vez, mais uma curvatura. E eu não preciso fazer a textura toda da calça, se eu não quiser. Posso fazer uma suavização.

O que está acontecendo no cós da calça? O próximo ponto seria um ponto curvo. Eu posso dar um “Enter”, confirmar o desenho desse meu segmento, clicar e continuar o desenho a partir desse ponto. E eu clico e eu atribuo a curvatura. O ponto seguinte seria muito curvo, pressiono “Enter”, confirmo e clico do cós para a continuação do bolso esquerdo. E vou trazendo a forma da perna da nossa modelo.

Lembrando mais uma vez que o objetivo é uma ilustração flat, ou seja, eu estou fazendo uma simplificação da minha representação. Trago para o interior da perna esquerda da modelo, e posso começar a finalizar a perna. Ficou um ponto a mais, então vou dar um “Ctrl + Z”. Mas na parte de cima, “Enter”, porque eu não quero uma curvatura tão grande, e trago para baixo. E finalizo o meu desenho.

Vou dar um “Ctrl + 0”, vamos esconder momentaneamente a camada imagem e temos as pernas, a calça da modelo concluída. Se você está com dificuldade de enxergar a imagem por trás, a linha do vetor não facilita muito, você não quer ficar indo e voltando, o que você pode fazer?

Você pode desbloquear a camada “Imagem”, eu vou acessar a imagem que está dentro, ela não está bloqueada, e eu posso até reduzir a opacidade, posso colocar, por exemplo, 50% de opacidade. Se você achar mais interessante, pode trabalhar com 70%. É um artifício para você estudar. No meu caso, o 100%, por enquanto, está funcionando bem. E no próximo vídeo nós vamos continuar essa vetorização, ou seja, vamos criar novas camadas e fazer as outras partes do corpo da nossa modelo e concluir a forma, os contornos principais.

Não esqueça que nós temos o fórum do nosso curso para você tirar suas dúvidas, fazer seus comentários. Se você tiver interesse em compartilhar os seus trabalhos, interagir com a comunidade da Alura, eu recomendo também que você conheça o nosso Discord. Você pode trocar ideia não só comigo, mas com os outros alunos e alunas da Alura, e com outros professores também.

Sobre o curso Adobe Illustrator: ilustrações para interfaces digitais

O curso Adobe Illustrator: ilustrações para interfaces digitais possui 90 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de Design Gráfico em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• A base da ilustração
• Cor e volume
• Ambientação e variação
• Ambientação e variação