Um guia passo a passo para projetar ilustrações personalizadas sem nenhuma habilidade de desenho
Publicados: 2022-03-11Vejo muitas empresas hoje usarem ilustrações ou imagens. Embora essas opções sejam baratas, a mensagem da marca é diluída porque os visuais não são exclusivos do produto.
Em um mundo onde 74% das mídias sociais e profissionais de marketing B2B usam recursos visuais em suas promoções, como você se diferencia visualmente é fundamental.
Se sua marca for prolífica, as pessoas aprenderão a linguagem visual associada à sua marca. Assim que eles virem as mesmas ilustrações de estoque associadas a outro produto, a identidade da sua marca enfraquecerá.
Com ilustrações personalizadas, os elementos da identidade de uma marca podem se unir em torno de uma perspectiva e personalidade compartilhadas. Eles se comunicam com os clientes em um nível intuitivo e ajudam as marcas a contar sua história de maneira duradoura.
No entanto, muitos designers evitam trabalhar como ilustradores por medo de não terem habilidades de desenho. Estamos aqui para mostrar como qualquer designer pode desenvolver belas ilustrações, sem necessidade de desenho.
Veremos três estilos de ilustração populares e aplicaremos etapas muito simples para desenvolver sua própria arte do zero. Você pode acompanhar e aplicar o que aprenderá para criar peças de ótima aparência para seu próximo projeto.
Recrie a famosa ilustração do espaço.
A designer e ilustradora Nina Georgieva é a pioneira por trás desta notória peça Dribbble, e agora, o estilo se tornou uma tendência própria.
Roubando a inspiração de Georgieva, vamos criar nossa própria ilustração espacial, seguindo alguns passos fáceis.
Isso é o que você vai conseguir no final.
1. Comece pelas estrelas.
Usando a “ferramenta estrela” do Illustrator, crie uma estrela de quatro pontas. Em seguida, torne-o 75% transparente.
Enquanto estiver selecionado, duplique-o no local pressionando Ctrl+C e, em seguida, Ctrl+F.
Reduza a forma na frente.
Em seguida, adicione um efeito brilhante; selecione a forma maior; e aplique um efeito “Gaussian Blur” do painel “Appearance”.
Por fim, você pode armazenar sua forma de estrela dentro do painel “Símbolos” para usá-la posteriormente na composição.
2. Crie a forma da nuvem.
Empilhe retângulos com várias larguras.
Mescle-os com o painel “Pathfinder”.
Termine dando a toda a forma um alto valor de “raio de canto”.
3. Faça a textura do planeta das nuvens
Começando com a forma da nuvem, crie o efeito de textura do planeta como mostrado acima.
Empilhe muitas formas de nuvens juntas e certifique-se de ter uma sucessão de curvas externas e internas para criar um padrão ondulado.
4. Ajuste a textura.
Simplifique o padrão ondulado antes de aplicá-lo à forma do planeta.
Remova os pontos extras de um lado da textura e alise-o.
5. Crie um planeta texturizado.
Sobreponha o padrão ondulado com um círculo e crie uma divisão usando a opção “Divide” no painel “Pathfinder”.
Exclua a forma extra criada fora do círculo e crie um efeito de iluminação aplicando diferentes valores de cinza a cada lado do planeta.
6. Adicione uma atmosfera ao planeta.
Crie dois círculos maiores e cole-os atrás do planeta com Ctrl+X e depois Ctrl+B.
Alinhe-os corretamente.
Adicione transparência aos novos círculos e um efeito de desfoque ao terceiro círculo (dentro do painel “Aparência”).
Agrupe (Ctrl+G) e armazene o resultado dentro do painel “Símbolo”.
7. Duplique e pinte os planetas.
Copie várias formas de planetas do painel "Símbolos" e recolora-as usando duas cores diferentes para cada lado.
Use a “Direct Selection Tool (A)” para selecionar e a “Eyedropper Tool (I)” para escolher e aplicar uma cor.
8. Dimensione e posicione seus planetas
Mova os planetas em diferentes posições com a “Ferramenta de Seleção (V)” e dê a eles vários tamanhos arrastando os cantos brancos que aparecem quando selecionados (mantenha a tecla “Shift” para escala proporcional).
9. Adicione os anéis.
Desenhe alguns círculos de linha ao redor dos planetas para fazer os anéis.
Para colar planetas menores na frente dos anéis, selecione-os e pressione Ctrl+X (recortar) e Ctrl+F (colar na frente).
10. Adicione algumas nuvens e estrelas no céu.
Voltando ao painel “Símbolo”, arraste e solte algumas formas de nuvens e estrelas.
Duplique, dimensione e posicione-os como desejar em seu espaço.
Aqui está o resultado final.
Brinque com escala, posição e cores para realmente torná-lo seu.
Adicione um pouco de tipografia e pronto, você tem um novo plano de fundo da área de trabalho personalizado.
Recrie o estilo de ilustrações do blog Toptal
O blog Toptal é uma fonte valiosa de insights e inspiração criada por grandes talentos em todo o mundo. Assim como o que você está lendo agora, a maioria dos artigos apresenta ilustrações para apoiar o conteúdo. Usamos formas geométricas simples e cores brilhantes para representar objetos.
Vamos ver como você pode aplicar esse estilo para criar suas próprias ilustrações de comida.
Isso é o que você vai conseguir no final.
1. Desenhe uma fritada simples.
Para criar uma fritada, comece com um retângulo longo e adicione vários pontos nas bordas com a “Ferramenta Caneta (P)”.
Ajuste a forma movendo os pontos ao redor, usando a “Ferramenta Seleção Direta (A)”.
2. Crie o recipiente de maionese.
Crie três círculos com tamanhos decrescentes, de trás para frente.
O círculo externo é o recipiente, o do meio (em branco) é a maionese e o círculo interno, menor (com um traço colorido) é para o efeito de iluminação.
Corte o círculo interno ao meio e certifique-se de que o “Cap” e o “Canto” do painel “Stroke” sejam redondos.
3. Faça o ketchup e a mostarda.
Duplique a xícara de maionese para criar mostarda e ketchup.
Basta aplicar cores diferentes ao molho e à luz, como sugerido acima.
4. Adicione a alface em forma de onda.
Com a “Ferramenta Caneta (P)”, trace uma linha reta e adicione vários pontos a ela.
Distribua seu espaçamento horizontal a partir do painel “Alinhar”.
Arraste para baixo os pontos de alteração e arredonde cada canto ao máximo, até que esteja completamente liso.
5. Crie uma fatia de pão.
Crie um oval longo; sobreponha-o com a forma da onda e crie uma divisão usando a opção “Divide” do painel “Pathfinder”.
Remova a forma extra que você obtém da ferramenta “Dividir” e, em seguida, recolora a fatia de pão.
6. Faça o pão de hambúrguer.
Espelhe a fatia de pão verticalmente e adicione um ponto de inflexão na camada superior.
Arredonde essa borda para fazer um pão de hambúrguer liso.
7. Finalize o hambúrguer.
Pinte a alface de verde.
Em seguida, crie diferentes “retângulos arredondados” para carne, queijo e tomate, usando as cores marrom, amarelo e vermelho, respectivamente.
Mova as coisas para colocar em camadas adequadamente o seu hambúrguer.
8. Crie um cachorro-quente com o hambúrguer.
Começando com a ilustração do seu hambúrguer, remova os tomates e o queijo, recolora a alface para maionese e mostarda e duplique o pão inferior para um cachorro-quente mais simétrico.
9. Desenhe o formato da pizza.
Comece com a camada superior do hambúrguer, mova os pontos inferiores para baixo e aproxime-os.
Duplique a forma do triângulo, reduza-a e torne-a amarela para uma base brega.
10. Adicione as formas de tomate.
Sobreponha um grande círculo vermelho com círculos internos menores e use a opção “Minus Front” do painel “Pathfinder”.
Coloque várias fatias de tomate com diferentes tamanhos e posições na forma de pizza.
11. Faça algumas fatias de carne.
Desenhe uma forma marrom orgânica com a “ferramenta Caneta (P)”, duplique e dimensione-a em cima de sua pizza.
12. Adicione coberturas extras.
Adicione traços menores, coloridos e arredondados em espaços vazios para finalizar suas coberturas de pizza.
13. Crie o canudo.
Estrela com um longo retângulo branco.
Adicione dois pontos com a “Ferramenta Caneta (P)” e mova as bordas superiores para dobrar o canudo.
Copie e cole o ponto do meio na borda direita, depois aplique um traço vermelho e sem preenchimento.
Mova a linha vermelha no meio do retângulo branco.
14. Crie a forma da lata de refrigerante.
Desenhe um polígono de oito lados; adicione a lata; mova os quatro pontos superiores para cima; e dimensione (S) as bordas superior e inferior para fora para torná-la mais parecida com uma lata.
Adicione retângulos arredondados na parte superior e inferior para criar as bordas.
15. Ajuste a forma da lata e dimensione o canudo.
Mova os pontos para ajustar as formas e, em seguida, dimensione a lata e o canudo em proporções relacionáveis.
16. Finalize com o desenho ondulado da lata.
Desenhe uma forma orgânica e ondulada para o desenho na lata.
Em seguida, crie uma divisão com o painel “Pathfinder” e exclua as formas externas extras.
Aqui está o resultado final.
Recrie uma ilustração inspirada no jogo Monument Valley
Monument Valley é um jogo best-seller criado pelo estúdio UsTwo. Ele ganhou dezenas de prêmios, incluindo o melhor jogo para iPad da Apple em 2014, e seu estilo de ilustração é inspirado na bela arte geométrica de Escher.
Agora você aprenderá a criar facilmente o mesmo estilo visual que fez deste jogo um grande sucesso.
Isso é o que você vai conseguir no final.
Você só usará planos e cubos como blocos de construção para toda a ilustração.
A paleta de cores tem quatro cores para a água, grama, madeira e construção – cada uma em três tons para simular a luz natural.
1. Crie um plano isométrico.
Comece com um quadrado e siga estas três etapas para criar uma forma isométrica. Preste atenção porque você repetirá esse processo toda vez que precisar de outra forma isométrica.
Vamos chamá-lo de “Efeito Isométrico:”
Vá para Effect > 3D > Extrude & Bevel Selecione “Isometric Top” dentro do menu suspenso “Position” - dentro do painel de opções que aparece. Defina “Extrude Depth” para zero na primeira opção “Extrude & Bevel”.
Agora você tem um plano isométrico.
Para brincar melhor com a forma, vá para Object > Expand Appearance.
Isso permitirá que você altere a cor do plano e mova os pontos livremente.
Vamos chamá-lo de “Efeito Expandir”.
2. Trace as faces da ilha.
Para criar as três faces da forma da ilha, crie um quadrado e dois retângulos alongados.
Repita o “Efeito Isométrico” em cada um.
Para a etapa dois, aplique “Isometric Top”, “Isometric Left” e “Isometric Right”, respectivamente.
3. Complete e pinte a base da ilha.
Aplique o “Expand Effect” e pinte cada rosto com diferentes tons de verde, com o mais claro sempre em cima.
4. Crie faces de cubo em perspectiva.
Aplique o “Efeito Isométrico” em três quadrados, com isométrico esquerdo, superior e direito no passo dois. Isso fornece as três faces necessárias para obter um cubo isométrico.
Observe que cada objeto em sua ilustração usará apenas três faces. Essa é a beleza da perspectiva isométrica.
5. Componha um cubo.
Solte as formas com o “Expand Effect”, junte as faces e aplique três tons de cinza para simular a iluminação.
Dica: O tom mais claro está sempre no topo; o mais escuro, à direita; e o tom médio, à esquerda. Aplicar isso a todas as formas da sua ilustração criará uma impressão de luz natural.
6. Inicie a base da árvore.
Siga os mesmos passos do cubo isométrico e, desta vez, alongue as faces esquerda e direita antes de conectar o todo.
Em seguida, aplique três tons de marrom para representar a madeira.
7. Termine a árvore.
Reduza a casca da árvore; duplicar um cubo; e colorir seus rostos como a forma da terra em verde.
8. Use um cubo para criar os blocos de construção
Duplique um cubo e pinte-o de rosa para o material de construção.
Jogue com escala; mova os pontos inferiores para baixo para criar uma base de torre; e reduzi-lo para criar um pilar.
9. Monte as torres.
Alinhe a base da torre e o cubo rosa.
Deixe algum espaço entre eles e posicione três pilares dentro dessa lacuna.
Para um alinhamento perfeito, certifique-se de definir “Snap to Point” e “Smart Guides” na opção de menu “View”.
10. Ponte as torres.
Selecione o ponto superior e direito de um plano superior e faça snap nos pontos com o plano equivalente na torre gêmea.
Simplesmente duplique e redimensione um plano do lado direito para criar uma borda para a ponte da torre.
11. Crie escadas.
Copie e cole três faces de uma torre; alinhe as arestas para criar um bloco; e, em seguida, mova os pontos inferiores para criar um degrau de um degrau.
Duplique e posicione as etapas várias vezes.
12. Feche as escadas.
Alinhe os pontos dos lados esquerdos para fechar as lacunas das escadas.
13. Vire as escadas.
Selecione suas escadas concluídas e use a “Ferramenta Reflect (O)” para criar um segundo bloco voltado para a esquerda.
Certifique-se de alterar as cores das faces esquerda e direita para respeitar o efeito de iluminação – tom mais escuro à direita, tom médio à esquerda e tom mais claro no topo.
14. Ligue as escadas.
Anexe alguns cubos às escadas para criar trampolins e vincule-os às torres.
15. Crie um efeito de profundidade de água.
Duplique e diminua a escala da superfície azul clara.
Coloque-o em várias posições e adicione um tom de azul ainda mais escuro para finalizar o efeito de profundidade do mar.
16. Inicie o deck usando planos existentes
Assim como nas escadas e na ponte da torre, comece pelas faces existentes, alinhe os pontos corretamente para fechar a forma e termine aplicando tons de madeira marrom.
17. Adicione pilares ao deck.
Selecione a casca da árvore, depois duplique, diminua e posicione para criar os pilares do deck.
Aqui está o resultado final.
Você pode adicionar manchas maiores e escuras no mar ou quadrados isométricos menores e coloridos no plano da ilha para simular grama e flores.
No geral, divirta-se, mova as coisas e construa algumas torres legais, usando os blocos de construção simples que você acabou de aprender.
Para concluir
Como vimos com esses três guias, você não precisa de muita habilidade de desenho para criar algumas ilustrações bonitas.
Tudo o que você precisa ter em mente são estes 3 princípios:
- Comece com uma ideia ou conceito claro em mente - o que você está retratando?
- Inspire-se com obras de arte e estilos existentes - roube como um artista.
- Observe e traduza elementos complexos em formas geométricas básicas com as quais você pode trabalhar - mantenha-o simples.
Divirta-se criando suas próprias ilustrações e carregue sua nova obra de arte no Dribbble e em outros lugares da web. Aproveitar!
• • •
Leia mais no Blog Toptal Design:
- eCommerce UX – Uma visão geral das melhores práticas (com infográfico)
- A Importância do Design Centrado no Homem no Design de Produto
- Os melhores portfólios de UX Designer – Estudos de caso e exemplos inspiradores
- Princípios heurísticos para interfaces móveis
- Design Antecipatório: Como criar experiências de usuário mágicas