Crie ilustrações simples para a web

Sep 11, 2025

Como

Sentei-me, joguei alguma música, diminui as luzes e abri meu laptop. Eu tive muita coisa para fazer. Em um esforço para convocar inspiração, comecei a desenhar Doodle Art. Linhas de um canto da tela para o outro, quando vi um formulário de cometa. "Hmm", meu cérebro lentamente começou, "E se eu as conectar e adicionar alguns planetas?"

Algumas horas depois, eu tive minha ilustração mais popular de dribbble. Eu ainda me lembro como isso aconteceu, mas depois de alguns cavando através do meu cérebro, descobri meu algoritmo interior para criar uma ilustração - não apenas este, mas qualquer outro que eu fiz. É engraçado, eu meio que esperava que seja mais complexo. Ah bem…

Estilo de ilustração

Antes de começar a trabalhar em uma ilustração, tenho certeza de que entendi seu propósito e o contexto onde vai viver. Isso é no aplicativo, site ou papel de parede? Haverá texto sobre ele, e ele estará localizado em um ambiente ocupado? É suposto simbolizar uma ação, ou é apenas lá para dar uma certa vibe?

Se a ilustração deve transmitir uma ideia clara, ou para simbolizar um objeto ou ação específica, eu vou optar por uma simples execução em que toda a atenção é focada na parte importante. Se, no entanto, estou especificamente indo para uma ilustração de fundo "silenciosa", escolherei uma abordagem semelhante a um padrão, ou certificar-se de que não há elementos óbvios de agarrar a atenção, para minimizar a possibilidade de as pessoas superpretando . Para ilustrações no aplicativo, tento manter as coisas manso, para evitar a atenção desviando da funcionalidade.

Regras estéticas

Meu cérebro gosta de criar todas essas regras estranhas. Eles são como desafios ridículos que eu não suporto passar por mais: E se eu desenhar um humano apenas usando círculos? E se eu ilustrar um pôr do sol usando apenas uma cor?

Regras geométricas, progressões lógicas, simetria. Há algo muito atraente em ter rigorosos regras matemáticas aplicadas à arte. Parece magia de engenharia reversa; Ele tirou o elemento místico na arte, então é quase como revelar a ciência por trás disso.

Ilustração complexa; Paleta de cores simples.

A city illustration with a complex level of detail, which has been combined with a simple, analogous colour palette — Uma ilustração da cidade com um nível complexo de detalhes, que foi combinado com uma paleta de cores simples e analógica (Crédito da imagem: Nina Geometrieva)

Como acontece, meu cérebro é bastante preguiçoso quando se trata de escolher a cor, por isso tem dois tipos gerais de paletas de cores que escolhe: um para ilustrações complexas; outro para os simples.

Ilustrações complexas têm alto nível de granularidade, com muitas formas / objetos e um monte de detalhes. Estes são geralmente padrão como por natureza e não têm um ponto focal claro. Meu cérebro decidiu que esses tipos de ilustrações funcionam bem com paletas de cores monocromáticas ou análogas. Ou, em termos mais amplos - menos cores e menos contraste de cor.

Tudo isso se resume ao equilíbrio visual; Se as formas são loucas, as cores devem ser brandas. Uma exceção está em um caso em que quero dar ênfase a um determinado objeto que de outra forma não se destacaria. Isso pode ser conseguido usando uma cor altamente contrastante, enquanto tudo o mais é mantido monocromático e manso. O equilíbrio visual perfeito é algum lugar entre overstimulation (cores altas, formas complexas, um monte de detalhes, tudo grita em seu rosto) e entusiasmo (o tipo ruim de mínimo, chato, nada novo ou interessante acontecendo).

Paletas monocromáticas

Analogous or monochrome palettes work effectively when there is a visual progression or repetition of elements — Paletas análogas ou monocromáticas funcionam efetivamente quando há uma progressão visual ou repetição de elementos (Crédito da imagem: Nina Geometrieva)

Uma paleta de cores monocromática é composta dos tons ou tons de uma cor. Tons acontecem quando uma cor é progressivamente misturada com branco; Tons acontecem quando é progressivamente misturado com preto. Uma questão que eu sempre tive com paletas monocromáticas é que tons e tons progressivamente perdem a vibração, devido à natureza de misturar uma cor com brancos ou negros, ambos os quais têm saturação zero por cento.

Para evitar esse entorpecimento gradual, uso uma fraude simples: além de adicionar branco ou preto, eu troco progressivamente o matiz um pouco. Esta é essencialmente uma paleta análoga sutil em vez de uma paleta monocromática. Por exemplo, se eu quiser criar tons monocromáticos vermelhos, eu mudaria a matiz para laranja. Se eu quiser criar tons monocromáticos vermelhos, mudaria a matiz para Magenta quando escurece. Se eu quiser obter tons mais claros de azul, eu mudo em direção a ciano; Para tons escuros de azul, eu mudo na outra direção, para roxo.

Isso resulta em uma paleta que ainda se sente um pouco monocromática, mas é muito mais viva e definitivamente tem chute. Desde que descobri isso, nunca criei uma verdadeira paleta monocromática novamente.

Ilustração simples; Paleta de cores complexas

Ilustrações com menor complexidade geralmente têm um ponto focal claro e hierarquia de objetos. As formas tendem a ser mais simples, então as escolhas de cor podem ser mais selvagens. Estou pensando em cores de alto contraste de qualquer tipo - complementar, tríávia, tetradic - contanto que seja uma paleta atraente e estimulante.

Há um universo inteiro entre o que descrevi como ilustrações complexas e simples. Mas meu cérebro não está excessivamente preocupado com todo esse espectro - prefere rotular qualquer ilustração complexa ou simples.

Paletas de cores de alto contraste não são tão simples quanto pegando as cores opostas em uma roda de cores. A roda de cores é um ótimo ponto de partida, mas não é de modo algum o final do processo. Por exemplo, ao escolher uma boa combinação laranja e azul, presto atenção a algumas coisas: luminância percebida e como as cores do Accent funcionam com as cores padrão.

Luminância percebida

Se ambas as cores tiverem a mesma luminância percebida, o cérebro acha difícil distinguir a fronteira entre eles - então olhar para a imagem se sente desconfortável. A menos que as cores nunca sejam suficientes para se tocar, vale a pena garantir que eles não tenham a mesma luminância percebida.

Ah, e no caso de você ser curioso por que eu uso a palavra "percebida", procure o efeito Helmholtz-Kohlrausch, que demonstra que as cores com a mesma luminância podem ser percebidas para ter valores diferentes. Como a laranja tem maior luminância percebida do que azul, por exemplo, é fácil aumentar ainda mais a disparidade entre as duas cores usando uma laranja mais clara e um azul mais escuro.

Acento versus cores padrão

An illustration for the Zopim homepage. Blue shades are dominant, with orange providing the accents — Uma ilustração para a página inicial do Zopim. Tons azuis são dominantes, com laranja fornecendo os acentos (Crédito da imagem: Nina Geometrieva)

Se o uso de cada cor for vastamente diferente, ajusto os valores de cor de acordo. Ser corajoso com cores de acento e reproduzi-lo com cores padrão é a minha abordagem.

No exemplo azul-laranja acima, eu usaria azul como uma cor calmante para encher áreas maiores, para planos de fundo e elementos grandes, e alguma laranja selvagem para botões, ícones e outros pequenos elementos. No contexto da ilustração, eu teria matizes azuis como a base, e novamente, laranja como o sotaque - talvez por meio de enfatizar um detalhe interessante, ou um elemento importante.

Verificação do Saldo visual

Qualquer que seja a ilustração que você acabe, seguindo os guias acima, certifique-se de dar um passo para trás e verifique se tudo faz sentido juntos. Há tantas exceções a regras na ilustração, que seria impossível listar todas as combinações que dão à luz uma ilustração incrível. Sempre tente as coisas que parecem interessantes, e quando algo te surpreende, certifique-se de entender para que você possa continuar melhorando sua intuição.

Este artigo originalmente apareceu em Revista Net. Edição 286; compre aqui !

Artigos relacionados

7 Web Design Dos e Don'ts
6 dos melhores portfólios freelance de 2016
As 6 melhores ferramentas do Photoshop para web designers

Crie ilustrações simples para a web

Estilo de ilustração

Regras estéticas

Ilustração complexa; Paleta de cores simples.

Paletas monocromáticas

Ilustração simples; Paleta de cores complexas

Luminância percebida

Acento versus cores padrão

Verificação do Saldo visual

Como - Artigos mais populares

Designer de afinidade: Como usar restrições

Como usar camadas inteligentes no Photoshop

Mestre a ferramenta de faca

Crie um personagem com uma pose forte no Photoshop

Melhore suas pinceladas em óleos

Faça uma dupla exposição no Photoshop

Crie um auto-retrato com apenas 4 cores

Como criar cabelos e pele 3D

Categorias