Aplicar esquemas de cores exige vê-los novamente
Existem muitos recursos on-line para os designers explorarem, ajustarem e fazerem o download de ótimas combinações de cores.
Brincar com combinações complementares, análogas, monocromáticas e outras nos abre a possibilidades excitantes, e não faltam brindes.
Mas há uma diferença entre um esquema de cores vencedor e um design vencedor que o utiliza.
Escolher cores é o primeiro passo. Adapta-los para atender às suas necessidades de design é tão importante.
O que parece ser bom em uma amostra pode não funcionar bem em uma página da Web, mas isso não significa que você precise voltar à estaca zero. Vamos explorar aqui novas formas de ver esquemas de cores.
A cor desempenha um papel importante na forma como as pessoas absorvem conteúdo. Seja um design reservado ou barulhento, amigável ou sinistro, quente ou frio, os visitantes de um site são imediatamente influenciados pelo tom definido pelo layout, tipografia, imagens e, é claro, pelos matizes e valores que compõem seu esquema de cores.
Escolher cores pode ser o trabalho mais subjetivo em web design. Algumas cores funcionam bem juntas; outros, não tanto. Algumas combinações apelam para certas pessoas. Mais de um conjunto de cores pode se adequar ao mesmo design.
Felizmente, muitos recursos existem para ajudar. Geradores de paleta de cores, como Designer de esquema de cores , Adobe Kuler , Tucano Aviário e Esquema de cores diárias estamos entre os ótimos lugares para encontrar combinações de cores que efetivamente definem um estado de espírito. Mas encontrar uma paleta é apenas o primeiro passo. A eficácia potencial de qualquer esquema de cores pode ser comprometida pela maneira como é aplicada .
O número de cores em um esquema faz a diferença
Um esquema de cores é um conjunto de cores que foram escolhidas para trabalhar juntas. Esquemas geralmente têm pelo menos quatro cores e muitas vezes podem ser baixados como imagens simples e às vezes como
O esquema de cores acima é típico de como a maioria dos esquemas são apresentados: como amostras uniformes de cores planas. Este conjunto pode ser marcado como tal:
- Alegre
- Amigáveis
- Contemporâneo
- Casual
- Primárias
Mas faça uma ou duas cores se destacarem e diferentes adjetivos podem vir à mente.
A imagem acima tem o mesmo esquema apresentado na amostra, mas é menos casual e mais desértico. Esta imagem enfatiza as cores quentes. Manchas isoladas de azul e verde chamam atenção por serem mais esparsas. O humor resultante pode ser descrito como:
- Sandy
- Brilhante
- Caloroso
- Caqui
- Rude
A escolha da cor dominante afeta como o esquema aparece.
Novamente, aqui estamos usando as mesmas cores, mas com um final muito diferente. Esta imagem parece algo como um mapa do mundo abstrato, com ilhas de vermelho, verde e marrom. A imagem não é apenas mais legal - é um pouco mais escura , apesar de vir da mesma paleta.
Ser capaz de reconhecer boas combinações de cores não é suficiente, porque as cores raramente são aplicadas uniformemente ao design de um site. Usar as cores com sabedoria e na proporção certa é tão importante quanto escolher as cores certas.
O fundo define o tom
O local mais óbvio para causar impacto com cores é em segundo plano. Essa ampla extensão pode atrair tanta atenção quanto o conteúdo colocado sobre ela.
Apesar de ter conteúdo idêntico, o design à direita é muito mais quente que o da esquerda. Mas mais está acontecendo aqui do que uma simples troca de cores.
As barras de conteúdo no design verde (ou seja, o texto branco em vermelho) mantêm as suas próprias contra o amplo fundo verde. Mas o fundo vermelho à direita lava as barras verdes insignificantes. Isso porque, além de ser mais quente, esse tom específico de vermelho é mais saturado. Na verdade, os únicos elementos com peso visual suficiente para contrariar o fundo vermelho são os títulos grandes. O texto de corpo pequeno e barras verdes desbotadas empalidecem em comparação. Isso não é necessariamente ruim; um fundo poderoso dá a presença substancial da página. O design verde é mais frio e dá ao conteúdo um ambiente mais casual.
Qual uso de cor é melhor? Depende da sua intenção. Os visitantes devem considerar o conteúdo como relaxado ou corajoso? Você quer jogar as barras coloridas? Você está preocupado que o plano de fundo irá dominar a informação? Uma cor é mais importante que outra em sua marca? As respostas a essas perguntas determinarão qual cor está "certa". Essa paleta de cores única apresenta duas soluções diferentes.
Cor atrás do texto
A interação entre texto e fundo é afetada pelo tamanho e quantidade de cada um. O efeito do texto na página depende tanto da cor do próprio texto quanto da cor do plano de fundo - apesar da tendência geral de se preocupar mais com o plano de fundo.
Acima, texto claro contra um fundo escuro funciona melhor quando o tipo é grande. Emprestado do esquema de cores com o qual começamos, esse ouro é menos apropriado para o texto do corpo (isto é, cerca de 13 pixels ou menos). A solução é simples:
Acima, o pequeno texto nas duas últimas linhas está em um tom mais claro de ouro. Não é bem branco, mas muito mais legível que as duas linhas da primeira imagem. O contraste adicionado impede que o texto pequeno seja sobrepujado pelo plano de fundo. A chave é usar seu esquema de cores como ponto de partida, não uma regra fixa. Se uma cor de fundo ameaçar sobrecarregar elementos menores, aumente o contraste, o que manterá a integridade do esquema e manterá o conteúdo legível.
Texto em branco
Muitas páginas da Web têm planos de fundo brancos ou áreas de conteúdo em branco. Mas "branco" não significa "branco". Grandes faixas de branco afetam como a cor é percebida. Por exemplo:
As cores que começamos parecem mais claras quando usadas para texto.
- O azul relativamente escuro cria contraste suficiente para tornar o texto legível contra o branco.
- Este tom específico de verde combina com o fundo. Se a intenção é harmonia, então o verde funciona.
- Vermelho + branco = rosa ou pêssego.
- O ouro parece quase como um tom sépia.
O branco tende a iluminar tudo o que toca. Se você quiser definir um clima leve, então qualquer uma das combinações acima pode funcionar. Para mais impacto, você pode escurecer o esquema de cores.
Jogando com esquemas de cores no Photoshop
Se o seu design não exige que todas as cores do seu esquema sejam usadas uniformemente, você deve testar uma ou duas cores quanto à dominância. O truque é encontrar um esquema com cores que funcionem entre si e com a cor dominante.
Felizmente, temos um processo fácil de testar cores. Para ver como diferentes medidas de cor podem afetar um design, siga estas etapas no Photoshop.
1. Encontre ou crie um esquema de cores. Nosso exemplo tem cinco cores, mas qualquer número acima de um funcionará.
2. Crie uma nova imagem no Photoshop, 500 x 500 pixels, com um fundo branco.
3. Crie quatro novas camadas (sua camada de fundo será a quinta). Se o seu esquema tiver mais ou menos de cinco cores, adicione ou remova as camadas de acordo.
4. Preencha cada camada com uma cor diferente do seu esquema.
5. Adicione uma camada de máscara a todas as camadas acima da camada de fundo. Sua paleta de camadas deve ficar assim:
Acima, a paleta de camadas do Photoshop, com uma camada por cor e com máscaras de camada aplicadas.
6. Execute a ação "Thresholdizer" em cada máscara de camada - mas não nas próprias camadas.
Acima, ao usar a ação “Thresholdizer”, certifique-se de selecionar a camada de máscara , não a camada real. Se você executar a ação na camada por engano, fique feliz com a função "Desfazer".
Essa ação cria principalmente um padrão aleatório em uma máscara de camada. A partir daqui, o designer assume o comando: com o controle “Threshold”. Deslize o controle de limiar para a esquerda para revelar mais de uma determinada camada e para a direita para revelar menos. Aplicar essa ação a cada máscara de camada fará com que uma cor domine as outras em um padrão aleatório.
Nesse caso, o controle Threshold determina quanto de uma determinada camada é visível. Uma máscara de camada principalmente preta esconde a camada; principalmente branco revela a camada. Executar a ação Thresholdizer em cada máscara de camada criará uma mistura de cores como esta:
Este documento do Photoshop mostra como um desenho pode parecer se o amarelo fosse dominante. Ajustar as cores agora é fácil: para dar uma cor mais (ou menos) ao contraste, basta usar um comando do Photoshop (como Imagem> Ajustes> Saturação de Matiz ).
Por exemplo, o tom de verde que funcionou bem com azul antes não parece muito bom agora que o azul não é dominante. Alguns experimentos revelam o seguinte:
Aqui temos duas variações do nosso esquema de cores original. Variação # 1 escurece ligeiramente o verde. Isso quase funciona. A variação 2 muda tudo, exceto o amarelo, para adicionar contraste e alinhar os matizes.
E se o nosso design tivesse mais azul em vez de amarelo? Esse tom de azul é escuro o suficiente para contrastar com as outras cores, mas nenhuma delas é coordenada - são todas primárias. Ao escolher um novo dominante, criamos um novo problema.
Variação # 1 acima substitui o vermelho suave com um azul mais escuro e transforma o tom de verde em uma hortelã pálida. Variação # 2 vai para o outro lado, usando mais vermelho (ou Borgonha) em vez de menos.
O mérito de qualquer dessas variações é subjetivo. O ideal seria aplicá-las ao design atual antes de tomar uma decisão final. A chave está no processo: obter uma paleta, escolher uma cor dominante e fazer os outros trabalharem com ela.
Sobre a ação “Thresholdizer”
Não há mistério para esta ação. Você pode obter o mesmo efeito aplicando Filter> Render> Clouds ou Filter> Render> Difference Clouds em uma camada de máscara. Esta ação apenas refina o processo, organizando o comando Threshold em decil.
Por favor fique a vontade para baixe a ação “Thresholdizer” . Melhor ainda, crie o seu próprio e compartilhe com todos, fornecendo um link nos comentários abaixo.
Avaliando cores sem a ação
Claro, existem maneiras de julgar a cor sem jogar com o Threshold. Comece escolhendo uma cor principal e faça os outros trabalharem com ela.
Aqui está o nosso esquema de cores original, com marrom como a cor primária.
Nós diminuímos o verde e saturamos o vermelho. Cores mais duras se destacam, como o azul (que não foi ajustado).
Aqui, nós desbotamos o verde, amarelo e vermelho. Estes discretos "acentos" misturam-se com o fundo castanho. Escureça o azul para criar contraste.
As três cores primárias mais escuras vão bem contra o castanho médio, enquanto o amarelo pálido serve como uma cor de destaque.
Novamente, a decisão final vem quando o designer aplica esses esquemas ao design atual. Até então, estes são apenas pontos de partida: ferramentas úteis para evitar confrontos, referências úteis para manter os designs no tema e uma ótima maneira de explorar combinações.
A cor é meramente um elemento de design. O uso da cor é uma habilidade que se deve praticar para controlar o humor, cultivar o gosto e se tornar capaz de enxergar possibilidades em algumas amostras.
Apenas uma coisa é certa: que o verde tem que ir.
Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben é um freelancer web designer quem resolve problemas de comunicação com melhor design.
Como você testa as cores? Quais são as suas formas favoritas de criar esquemas de cores? Compartilhe suas opiniões nos comentários abaixo.