Cor, luz e hierarquia visual

Conceitos aplicados ao jardim na janela e critérios para adaptar.

Use este material para consultar as decisões do exemplo. Os SVGs editáveis estão no kit da trilha; as imagens de etapas ajudam a comparar o efeito de cada mudança.

Escolher uma paleta por função

Comece com funções, não com dezenas de amostras: fundo, protagonista, apoio e destaque. No jardim, o papel claro (#F7EBD5) dá respiro, o verde escuro (#264F42) sustenta as folhas, a terracota (#CE7154) destaca o vaso e o azul acinzentado (#527A86) diferencia o regador. Céu e paisagem usam verdes mais claros; o sol traz um acento quente.

Esses valores são escolhas deste exemplo, não uma receita obrigatória de harmonia. Para uma versão noturna, você pode reduzir luminosidade do fundo, ajustar o contraste das folhas e trocar o acento. Mudar todas as cores aleatoriamente dificulta entender o que melhorou; altere uma função por vez.

Salve amostras com nomes e repita-as entre formas relacionadas. Na primeira passagem, resolva grandes áreas com cores planas. Gradientes, textura e brilho entram quando ajudam a separar material ou volume. Se o protagonista só aparece depois de muitos efeitos, revise seu contraste básico com o fundo.

Conferir claro e escuro além do matiz

Matiz distingue famílias como verde e laranja; valor descreve a leitura de claro e escuro. Duas cores diferentes podem ter luminosidade parecida e se confundir quando a imagem fica pequena ou perde saturação. O estudo de valores conserva a geometria do jardim e substitui as cores por cinzas calculados a partir de luminância.

Compare folha e céu, vaso e mesa, alça e parede. As folhas escuras continuam dominantes; os verdes claros da paisagem ficam no fundo. Se uma peça desaparecer, experimente alterar claro/escuro, tamanho ou separação espacial. Não conclua que toda borda precisa do contraste máximo: áreas secundárias podem ser discretas.

A comparação em cinza é um diagnóstico parcial. Ela não simula todas as deficiências de visão de cor, telas ou condições de luz. Para comunicar informação importante, combine cor com forma, posição ou texto. Nesta cena, a identidade do regador vem também do bico e da alça.

Sugerir volume com sombras e brilhos coerentes

O vaso recebe uma faixa escura à direita e dois reflexos claros à esquerda. A sombra projetada fica sob e à direita do vaso. Essas pistas sugerem uma iluminação predominante vinda da esquerda/frente, mesmo numa cena plana e estilizada. O sol da janela participa da composição; não foi usado para calcular fisicamente todas as sombras.

A faixa do vaso está recortada pelo corpo, com opacidade 0,27. Isso mantém a sombra dentro da forma. No regador, uma faixa clara curta sugere superfície curva. Compare com a versão de cores planas: a silhueta continua a mesma, mas as marcas ajudam a separar superfícies.

Antes de multiplicar efeitos, escolha uma direção de luz e observe se os sinais se contradizem. Para uma proposta deliberadamente gráfica, você pode quebrar o realismo, desde que a leitura permaneça clara. Gradiente não conserta uma silhueta ruim; uma sombra escura demais pode parecer um objeto colado sobre o vaso.

Entender opacidade do objeto e do grupo

Opacidade reduz a contribuição visível de um objeto ou conjunto. Duas manchas semitransparentes sobrepostas podem ficar mais fortes na interseção. Se você quer que uma sombra formada por várias peças tenha uma intensidade uniforme, talvez precise agrupar as peças opacas e reduzir a opacidade do grupo.

No jardim, a sombra do vaso é uma única elipse com opacidade 0,55; a faixa interna do vaso usa 0,27. Mudar esses valores altera a força da marca, sem precisar trocar sua cor. Já baixar a opacidade de toda a planta faz o fundo aparecer também através das folhas e caules, o que muda a intenção.

Diferencie opacidade de modo de mesclagem: Multiply, por exemplo, altera a operação de combinação de cores e não equivale a simplesmente baixar a opacidade. Comece com modo normal e cores planas; use outro modo quando souber o efeito desejado e confira sobre o fundo de destino.

Por que a transparência muda quando você agrupa

Considere duas formas da mesma cor, parcialmente sobrepostas, sobre um fundo transparente. Com composição normal source-over, cada forma com alfa 0,5 deixa passar parte do que está atrás. Na interseção, a segunda forma aparece sobre uma região que já tem contribuição da primeira. O alfa combinado é 0,5 + 0,5 × (1−0,5) = 0,75. Fora da interseção, continua 0,5. É por isso que a sobreposição pode ficar mais forte.

Agora deixe as duas formas opacas, agrupe-as e aplique opacidade 0,5 ao resultado do grupo. A composição interna é resolvida primeiro; depois o conjunto recebe a opacidade. No caso simples de duas formas da mesma cor, a união fica com força uniforme, inclusive na interseção. O resultado é diferente de aplicar 0,5 a cada objeto. A especificação W3C separa composição, mesclagem e grupos; interfaces de pintura podem ainda oferecer grupos com passagem de efeitos ou isolamento, então confira o comportamento no seu editor.

Aplicação ao jardim

A sombra projetada do vaso foi desenhada como uma elipse única para evitar emendas entre manchas. Se você decidir construí-la com duas elipses, teste duas versões: opacidade individual e opacidade no grupo. Compare a interseção sobre a mesa clara. Não é necessário mudar a cor para investigar essa diferença; mantenha cor, posição e tamanho constantes.

A sombra interna do vaso resolve outro problema: sua forma é maior que a área visível, e o recorte limita onde pode aparecer. Recorte responde “onde”; opacidade responde “com que contribuição”. Você pode usar ambos ao mesmo tempo. Uma máscara gradual acrescenta variação espacial de visibilidade, útil para uma transição suave, mas desnecessária para toda borda.

Como separar um defeito de desenho de um defeito de composição

Se uma faixa escura aparece só na interseção de duas sombras, investigue alfa e agrupamento. Se aparece fora do vaso, investigue o recorte. Se a sombra tem força uniforme mas parece um adesivo, investigue forma, posição e relação com a luz. Se o resultado muda ao mover a sombra sobre outro fundo, lembre que semitransparência depende do que está atrás.

Os números acima descrevem alfa, não uma promessa de cor final idêntica em qualquer aplicativo. Espaço de cor, modo de mesclagem, bordas com antialiasing e exportação podem influenciar pixels. Compare também o PNG no fundo de destino. Para o exemplo, o fundo é opaco e está no próprio SVG; uma versão transparente precisa de uma nova conferência sobre a página onde será usada.

Não aplique opacidade ao grupo inteiro apenas por conveniência. Se o vaso, folhas e sombras estiverem no mesmo grupo, todos podem ficar translúcidos. Organize conjuntos pela decisão que quer controlar e mantenha uma cópia antes de alterar uma hierarquia complexa.

Adicionar detalhes que sobrevivem ao tamanho de uso

As nervuras explicam a direção das folhas, a faixa do vaso sugere volume e a folha caída ocupa um pequeno espaço no primeiro plano. Cada detalhe tem uma função. Adicionar textura em toda a superfície criaria outra linguagem e poderia competir com a forma principal.

Compare final e cores planas primeiro em tamanho grande, depois a cerca de 300 pixels de largura. Se as nervuras desaparecerem, a planta ainda deve ser reconhecível. Se o vaso se confundir com o fundo, resolva massa e contraste antes de desenhar pequenos riscos. A quantidade de detalhe deve seguir a hierarquia: protagonista, apoios e fundo não precisam da mesma atenção.

Mantenha detalhes em camada separada enquanto decide. Ocultar essa camada é uma comparação rápida e reversível. Antes da entrega, confira se um detalhe solto permaneceu alinhado após mover sua forma-base: nervuras e brilhos não seguem automaticamente objetos que vivem em outra camada.

Referências

Fontes conferidas em 2026-09-26.

Abrir as checklists da trilha →