Tecnologias InternetImplantar a aplicação em produçãoDesenvolver os pacotes tecnológicos da aplicaçãoDefinição da arquitetura de informaçãoDefinição das arquiteturas de designfase de pesquisa do projetopágina principal

WP
arquitetura design
identidade visual

design

designer

elementos do design web

tipografia
cores
imagens
formatos

arquiteturas

documentar

exercício

ELEMENTOS DO DESIGN WEB - Cores padrões

  • Algumas de nossas escolhas de cores serão puramente subjetivas.

  • Cores e combinações de cores - tem efeitos previsíveis e precisamos ter certeza que as cores escolhidas não estão contradizendo a mensagem que escolhemos para transmitir.

  • Modelo da cor - é o método para apresentação e medição da cor. O olho humano percebe as cores de acordo com o tamanho da onda da luz que ele recebe.

MODELO RGB

O método pelo qual os monitores computador apresentam as cores. vermelho, verde e azul.

  • Uma grande porcentagem do espectro visível de cores pode ser representado pela mistura das cores primárias.

  • Os três componentes básicos de luzes coloridas em várias proporções conhecidos como cores primárias são: vermelho, verde e azul.

  • São conhecidos como cores primária porque várias porcentagens de cada cor são adicionadas para criar novas cores.

  • O modelo de cor RGB é conhecindo como aditivo. Os monitores de computador mostram cores usando uma mistura das cores primárias aditivas.

  • Como regra geral, devemos editar nossas imagens coloridas no formato RGB devido as seguintes razões:
    • Os arquivos RGB são menores que dos outros modelos.
    • Os monitores apresentam cores RGB melhor.
    • O modelo de cores RGB fornece um espectro de cores maior que outros modelos em um monitor, como o CMYK

MODELO CMYK

O método pelo qual as imagens são impressas usando o processo de quatro cores. ciano, magenta, amarelo e preto

  • O modelo de cor CMYK - ciano, magenta, amarelo e preto, representa os quatro processos de tintas usados para imprimir imagens em uma impressora.

  • Para imprimir uma imagem em uma gráfica, cada uma das quatro chapas é preparada com uma das cores e são denominadas de separação de cores. A combinação das cores separadas formam uma imagem composta.

  • O modelo CMYK é chamado de subtrativo porque combinando todas as cores, subtraímos cores, e produzimos o preto.

MODELO HSV (Hue, Saturation e Value)

A seleção e obtenção de cores no modelo HSV é muito mais intuitiva que nos modelos RGB e CMYK. Seu princípio baseia-se no controle dos valores de Hue, Saturation e Value.

  • Hue - é a componente que seleciona a "tinta" em uso, sendo controlada pela posição angular de um ponteiro numa roda de cores definida de 0 a 359.

  • Saturation - é a componente que determina a pureza da cor selecionada em Hue. Todos os tons de cinza possuem Saturation zero e todos os Hues puros possuem Saturation 1.

  • Value - regula o brilho da cor determinada por Hue e Saturation. A cor preto possue brilho zero e qualquer valor de Hue ou Saturation. O valor 1 de Value determina uma intensidade pura de Hue+Saturation.

  • O modelo HSV foi criado a partir de uma concepção intuitiva da maneira de trabalhar de um artista ao misturar cores para obter o correto sombreamento e na obtenção de tons intermediários.

PROCESSO DITHERING

  • O pontilhamento ou dithering é o processo de se usar as cores disponíveis na paleta para produzir outras cores.

  • As cores disponíveis são pulverizadas para simular as cores não disponíveis.

  • Se precisarmos de uma cor que seja um terço da cor A para a cor B, um programa que pontilha simplesmente pulveriza 33% dos pixels da cor B pulverizados sobre 100% da cor A.

Visualmente funciona bem para imagens fotográficas, mas para as demais imagens não funciona.

PROCESSO ANTI-ALISING

  • É o processo de adicionar cores intermediárias para suavizar as bordas serrilhadas observadas em imagens digitais.

  • O anti-alising adiciona mais cores, aumentando o tamanho da paleta.

  • O anti-alising não apenas adiciona mais cores, mas torna as imagens muito menos compressíveis, já que adiciona mais cores intermediárias.

Para reduzir o tamanho do arquivo, é preciso fazer o anti-alising com o menor número possível de cores.

PROFUNDIDADE DE CORES

  • Imagens de um bit têm apenas dois estados: ligado(branco) e desligado( preto).

  • Mais bits por pixel significa mais cores.

  • Mais cores produzem arquivos de imagens maiores, o que significa que eles levam mais tempo para serem carregados. Menor é melhor.

O número de cores que o sistema apresenta depende da quantidade de VRAM instalada, apesar da maioria do computadores atuais terem a capacidade de apresentar imagens em 24 bits -16 milhões de tons, estão configurados para 8 bits - 256 tons.

Lembre-se deste detalhe quando estiver desenvolvendo um design gráfico para web.

PALETAS DE CORES

  • As duas maneiras para se armazenar imagens raster-matriciais coloridas são: a indexada e em RGB.

  • Imagens no formato RGB são também conhecidas como: full color - totalmente coloridas ou true color - cores verdadeiras

  • Imagens no formato RGB usam valores de 8 bits(0 a 255) para Vermelho, Verde e Azul, formando assim um pixel de 24 bits (8 + 8 + 8 = 24).

  • Imagens com 256 cores ou menos, são denominadas indexadas.

  • As imagens indexadas têm uma paleta de cores associada, denominada color lookup table em inglês, ou CLUT - tabela de consulta de cores.

  • A paleta define até 256 cores, dando um número a cada cor. A imagem então refere-se a cada cor pela sua posição na paleta.

  • Imagens com mais de 256 cores não possuem paleta associada.

Observações Gerais

  • A luz contendo o espectro total é percebida como branca.

  • Quantidades iguais de vermelho, verde e azul produzem o branco.

  • Quando não há luz presente o olho percebe o preto.

Exemplo de Estudo de Cores - arquivo PDF

REFERÊNCIAS

Da cor à cor inexistente, Israel Pedrosa, 7a edição, Léo Cristiano editorial LTDA

Hue - cor, tom, tonalidade
Saturation - saturação, medida da saturação de cores, medida da nitidez da variação do cinza para o branco
Value - valor, troca, calcular

VRAM - Vídeo RAM, memória de vídeo, memória de acesso mais rápida usada em placas de vídeo mais atuais.


© 2002 Centro de Computação da Unicamp apoio@ccuec.unicamp.br o treinamento | referências| dicas webpro