Cores no Computador

1. parte 4:Cores na Tela e na Web| diferenças entre as mídias| | possibilidades, problemas e limitações das cores| | paletas | arquivos |

2. Cores no Computador Criar trabalhos de arte coloridos para a Web é muito diferente de outros meios coloridos de veiculação, porque neste caso você está publicando seu trabalho nas telas de outros usuários em vez de em páginas impressas. Trabalhar com cores baseadas em tela de computador pode ser mais divertido que trabalhar com tintas impressas: - Não é preciso esperar pela prova de cores nem trabalhar com valores CMYK que são muito menos vibrantes que os RGB. - Nada de arquivos de alta resolução. - Nada de telas de pontos para se preocupar. Trabalhar no computador para veiculação por meio deste é muito mais fácil algumas vezes, mas não pense que o que você vê em sua tela é o que outras pessoas irão ver na delas. As cores também apresentam seu próprio conjunto de detalhes e limitações desagradáveis. Para criar imagens a telas coloridas para a Web não é necessário entender as limitações desse meio, mas os resultados podem não ser o que você esperava.

3. Cores na WEB • Tudo o que é uma maravilha na Web - a acessibilidade global, a compatibilidade entre plataformas, a distribuição por rede e a tecnologia sempre em aperfeiçoamento - tem seu contraponto em algum lugar na criação de elementos gráficos em cores. • Em uma página impressa, todo mundo vê as mesmas cores (à exceção das pessoas com deficiências visuais). • Uma página impressa tem dimensões fixas e é elaborada uma vez a permanece do mesmo jeito para sempre. • Uma página impressa não pode ser alterada depois de concluída. • A Web difere das páginas impressas mais do que você poderia imaginar. • Não é suficiente trazer boas idéias a excelentes trabalhos de arte para a criação de páginas na Web. • É necessário entender o meio para assegurar que outros vejam suas criações a cores como você pretendia.

4. Cores na WEB Diferenças sobre a Web como meio de publicação no que diz respeito a cores: Os usuários visualizam seu trabalho de arte em monitores com uma grande variedade de configurações de profundidade de bits. Diferentes monitores de computador têm uma capacidade de cores a padrões de gama diferentes. Sistemas operacionais diferentes afetam o modo como as cores são exibidas. Navegadores da Web diferentes afetam o modo como as cores são exibidas. Os usuários avaliam seu site não só pelo conteúdo artístico, mas também por sua velocidade. Acredite, mas as cores podem afetar a velocidade!

5. C M Y B R G • RGB X CMYK • As diferenças entre CMYK a RGB são: • As cores CMYK são utilizadas pares simular tintas de impressão. • CMYK é utilizado para projetos de impressão. • Designers pares Web baseiam-se em tela. • O espaço de cor RGB é utilizado per todas as telas de computadores.

6. Calibração e gama Se você já teve dois aparelhos de TV, sabe que as cores podem variar enormemente. Qualquer pessoa que trabalhe em uma empresa usando mais de um computador sabe que as cores se alteram entre os sistemas - mesmo entre sistemas operacionais e hardware idênticos. Em plataformas diferentes, o problema da calibração é amplificado pelas diferenças de gama. 0 gama comanda o brilho e o contraste no monitor do computador. Os Macs, por exemplo, têm normalmente muito mais brilho que os PCs devido às diferenças de configuração de gama inerentes ao Macintosh. Tanto a calibração quando o gama impõem variáveis impossíveis de serem controladas no design para Web. Monitores SGI =1,7 gama Monitores Mac =1,8 gama Monitores PC =2,5 gama

7. Alta resolução X baixa resolução Uma vez que seu meio de veiculação é uma tela de computador e não uma página impressa, os arquivos de alta resolução não fazem parte da vida do design na web. A alta resolução é definida como qualquer arquivo que não possa ser exibido em seu tamanho pretendido em uma ampliação de 1:1 na tela de um computador. Os monitores normais de computador exibem 72 pixels por polegada e, por isso qualquer arquivo preparado a 72 ppp (pixels por polegada) ou dpi (dots per inch - pontos por polegada) é definido como um arquivo de baixa resolução, e acima disso é considerado de alta resolução. Você deve sempre trabalhar na "resolução da tela" ao criar imagens para Web (ou qualquer outro meio que se baseie em tela, como a televisão ou multimídia interativa). Sempre que trabalhar com imagens para Web, defina que seus elementos gráficos sejam medidos em pixels a não em polegadas ou milímetros. Essas unidades de medidas utilizadas em projetos de arte que serão impressos em papel. Os pixels são a unidade padrão de medidas para imagens que se baseiam em tela.

9. Profundidade de bits A profundidade de bits é extremamente importante para compreender os elementos gráficos na Web. Se refere à quantidade de cores que há em uma imagem. A quantidade de cores em uma imagem pode ter um ENORME impacto no tamanho do arquivo. Veja como a profundidade de bits é calculada: 32-bits 16,7 milhões de cores ou mais, além de uma máscara de escala de cinza de 8 bits (nível de 256) 24-bits 16,7 milhões de cores ou mais 16-bits 65,5 mil cores 12-bits 32,8 mil cores 8-bits 256 cores 7-bits 128 cores 6-bits 64 cores 5-bits 32 cores 4-bits 16 cores 3-bits 8 cores 2-hits 4 cores 1-bit 2 cores

10. 1-bit 4-bits

11. Profundidade de bits

12. Pontilhamento e separação por bandas Quando uma imagem com milhões de cores é convertida para 256 cores ou menos, perde-se qualidade de imagem. Basicamente, quando se removem cores de uma imagem, alguns sacrifícios precisam ser feitos. Isto pode ocorrer de duas maneiras: pontilhamento ou separação por bandas. 1. Pontilhamento é o posicionamento de pixels coloridos diferentes dentro de uma imagem que utiliza uma paleta de 256 cores, para simular uma cor que não existe na paleta. Uma imagem pontilhada geralmente parece granulada ou composta de pixels dispersos. 2. Paleta adaptativa é usada para converter a imagem para 256 cores com base em cores existentes dentro da imagem. Geralmente, o pontilhamento baseado na paleta adaptativa tem a melhor aparência entre todos os métodos de pontilhamento.

13. Pontilhamento e separação por bandas 3. Pontilhamento de tela é o que acontece quando uma imagem de 24 bits ou 16 bits é visualizada em um computador com placa para 256 cores. A cor da imagem é reduzida a 256 cores e o "pontilhado" parece uniforme, como se tivesse sido aplicado um padrão. 4. Separação por bandas é um processo de reduzir cores a 256 ou menos sem pontilhamento. Ele produz áreas de cor sólida e gera um efeito posterizado. Compreender a terminologia do pontilhamento a da separação por bandas é importante no design para Web, pois eles geralmente são efeitos indesejáveis. Às vezes é necessário reduzir a qualidade das imagens para melhorar a velocidade.

14. Pontilhamento e separação por bandas

15. Profundidade de bits do Monitor Até agora, a profundidade de bits vem sendo definida conforme se relaciona com as imagens. Na verdade existem duas situações em que é importante compreender a profundidade de bits. A primeira é entender a profundidade de bits de uma imagem e a segunda e entendê-la nomonitor do usuário final. A maioria dos designers tem monitores de 32/24 bits (que podem exibir 16,7 milhões de cores). O usuário médio de computadores - portanto o representante médio dos usuários da Web - tem um monitor de 8 bits (256 cores). Quando as pessoas com sistemas de 256 cores visualizam suas telas da Web, não conseguem ver imagens em 24 bits, mesmo que queiram. Neste ponto temos um grande problema. A maioria das pessoas que cria trabalhos de arte para sites da Web está visualizando-os sob condições bem melhores do que as do usuário final mediano.

16. Cores Hexadecimais Antes do surgimento da Web, poucas pessoas que não fossem programadores e matemáticos tinham qualquer necessidade de trabalhar com números hexadecimais. Números hexadecimais no design para Web são usados para converter valores RGB de maneira que o HTML entenda quais cores você escolheu. Para descrever a cor R:255 G:00 B:51, o código hexadecimal seria: FF0033. Veja o código de exemplo mínimo para uma página em HTML que tem o seguinte esquema de cores: <html> <body bgcolor="003333" text="33CCCC" link="336699" <link="006666" alínk="00CC99" </body> </html>

17. Cores protegidas para navegadores Por que toda esta problemática em torno das cores protegidas para navegadores, afinal ? Qual a função de um navegador? O software navegador é sua janela para a Web. Você não pode ver páginas da Web sem um navegador e, portanto ele desempenha um importante papel na forma como suas imagens são exibidas, principalmente quando visualizadas em sistemas de 256 cores. Felizmente, os navegadores mais conhecidos (Netscape, Mosaic e Internet Explorer) compartilham o mesmo processo de gerenciamento de paleta. Eles trabalham com as paletas do sistema de cada plataforma respectiva: Mac, Windows e Win95. Isso significa que qualquer trabalho que você criar será forçado a ajustar-se a uma variedade de paletas diferentes, dependendo do sistema operacional em que ele for visualizado. Por sorte, há cores comuns nas paletas de sistema 256 - na verdade, 216 cores comuns. Cada sistema operacional reserva 40 cores, além das 256 possíveis, para seu próprio uso. Isso significa que se você adotar as 216 cores comuns, elas serão universalmente aceitas entre os navegadores, sistemas operacionais e plataformas de computadores.

18. Por que trabalhar com uma paleta limitada? Embora seja maravilhoso e agradável elaborar designs usando um grande monitor e combinação de mais de 16 milhões de cores, a maioria das pessoas que irão ver seus trabalhos tem computadores capazes de ver imagens com apenas 256 cores em um monitor com tamanho de 640 x 480, ou 800 x 600 . Quando trabalhamos com cores diferentes das 216 protegidas para navegadores, estes as convertem de qualquer maneira. Isso terá um efeito negativo em seu trabalho, como mostram os exemplos a seguir: Trabalho de arte baseado em hexadecimal Se você escolher um valor hexadecimal para um segundo plano de uma única cor baseado no que aparece em seu monitor de milhões de cores, poderá muito provavelmente ter escolhido um valor que não é protegido para navegadores. Se for este o caso e se o usuário final visualizar a imagem em um monitor de 256 cores, o navegador irá convertê-la em uma das 216 cores protegidas - ou seja, ele irá converter a cor que você escolheu para a própria paleta.

20. Trabalho de arte baseado em ilustração Em trabalhos de arte baseados em ilustração, caso você crie logotipos, ilustrações, cartoons (desenhos animados) ou desenhos em cores diferentes das 216... adivinhou. O navegador as converte de qualquer maneira! Em vez de mudar as cores, que é o que acontece com cores baseadas em hexadecimal, ele cria um pontilhado no seu trabalho.

21. Trabalho de arte baseado em fotografia As fotografias são o único tipo de arte que realmente não se beneficia do uso de cores protegidas para navegadores. A razão para isso é que os navegadores convertem as fotografias em suas próprias paletas fixas, mas fazem um ótimo trabalho com isso, ao contrário do trabalho de péssima qualidade que fazem com artes baseadas em hexadecimal e em ilustração.

22. Trabalho de arte baseado em fotografia O resultado deste estudo? Não é necessário converter imagens fotográficas para a paleta protegida para navegadores ou mesmo para a paleta de 8 bits. 0 navegador faz seu trabalho sujo de pontilhamento, independentemente de como a imagem foi preparada. É melhor deixar a imagem em uma paleta adaptativa ou em um formato de arquivo de 24 bits para que as fotografias tenham a vantagem adicional de serem visualizadas com melhor qualidade em ambientes de navegadores de 24 bits. Os JPEGs sempre produzirão o menor tamanho de arquivo para fotografias e têm a vantagem adicional de serem um formato de arquivo de 24 bits, diferentemente do que ocorre com arquivos GIF, que não podem gravar imagens com profundidades de bits maiores que 8 bits (256 cores).

23. Como é a aparência da paleta para navegadores? A paleta de 216 cores para a Web tem somente seis valores de vermelho, seis valores de verde a seis valores de azul que variam em contraste. Às vezes ela é chamada de paleta 6x6x6 ou de cubo 6x6x6. Ela é uma paleta predeterminada que, como tal, não pode ser alterada. É assim que os navegadores são programados e os designers não têm qualquer controle em HTML sobre o modo como os navegadores processam o gerenciamento de paleta.

24. Como é a aparência da paleta para navegadores? Não é surpresa que estas cores tenham sido escolhidas matematicamente, e não por sua beleza ou qualquer tipo de classificação de cores. Conhecer o padrão dos valores numéricos é útil, porque pode-se facilmente consultar documentos de código ou de imagens para verificar se eles contêm tais valores. Aqui temos uma versão da paleta protegida para navegadores, extraída diretamente do computador.

25. Como é a aparência da paleta para navegadores? Estes três exemplos de conjuntos de amostras utilizam as 216 cores e proporcionam gradientes de cores a partir do vermelho até todas as cores da paleta protegida pares navegadores. O conjunto de amostras à esquerda mostra uma paleta com alta saturação, enquanto que o conjunto de amostra à direita mostra uma paleta não-saturada. Organizando estas cores de uma forma visual, em vez de matemática, os designers conseguem trabalhar com essas cores a fazer escolhas melhores, em vez de escolhê-las a partir de uma matriz matemática desorganizada.

26. O que são cores híbridas protegidas? As cores híbridas protegidas foram inventadas por Don Barnett e Bruce Heavin quando estavam trabalhando em um protótipo de site da Web para a DreamWorks Interactive SKG htcp://www.cris.com/"Nekton/sources/net_barn.htm. Don Barnett queria usar cores que não se alterassem ou ficassem pontilhadas em ambientes de 256 cores, mas ele não gostava das 216 cores que tinha para escolher. Teve então a idéia de formar um padrão pré-pontilhado - pixel a pixel - de várias cores protegidas para navegadores. Isso criou uma mistura ótica de cores, fazendo com que seus olhos tivessem a ilusão de que se tratava de uma nova cor fora da paleta limitada de 216 cores.

28. Formatos de arquivo na Web a as cores Existem, até o momento, dois formatos de arquivo principais para a Web: JPEGs a GIFs. Ambos os formatos de arquivo foram amplamente adotados devido à sua alta capacidade de compactação de imagens. Na Web, arquivos pequenos (não só em dimensões, mas também em tamanho de arquivo) resultam em elementos gráficos rápidos. Os JPEGs foram criados para compactar fotografias a os GIFs foram criados para compactar elementos gráficos.

29. Compactação GIF • Ao contrário da maioria dos outros formatos de arquivo gráfico, o GIF foi projetado especificamente para veiculação on-line, como foi originalmente projetado pela CompuServe no final dos anos 80. • Os GIFs são aceitos por todos os navegadores. • São pequenos • Outras vantagens : fazem animação, transparência a entrelaçamento. • A compactação de um arquivo GIF é sem perdas, significando que o algoritmo de compactação do GIF não provocará a degradação indesejada da imagem. • No entanto, o processo de converter uma imagem de 24 bits para 256 ou menos cores fará com que ela sofra degradação; sendo assim, não se anime muito!

30. JPEG O formato de arquivo JPEG (pronuncia-se jota-peg) oferece uma alternativa de 24 bits para o formato de arquivo GIF de 8 bits. É ótimo especialmente para conteúdo fotográfico, pois fotografias de 24 bits não têm pontilhados! O formato de arquivo JPEG foi desenvolvido especificamente para imagens de estilo fotográfico. Ele observa áreas com mudanças sutis de tons a cores a oferece a melhor compactação quando encontra esse tipo de criação de imagem. Outra diferença entre GIF a JPEG é o fato de você poder gravar JPEGs em uma variedade de níveis de compactação. Isso significa que compactação mais ou menos intensa pode ser aplicada a uma imagem, dependendo do que parecer melhor.

33. JPEG Você pode verificar, através desse teste, que não há muita diferença entre baixa qualidade e alta qualidade, exceto com os elementos gráficos. Como já dissemos, deixe os elementos gráficos com GIF a as fotografias com JPEGs. Embora haja boas razões para gravar fotografias como GIFs (animação, transparência e entrelaçamento), não há boas razões para gravar elementos gráficos como JPEGs, a menos que sejam combinados com fotografias. Com o conteúdo fotográfico, em geral, não tenha medo de experimentar configurações de baixa qualidade; geralmente a economia no tamanho do arquivo é substancial e a perda de qualidade não é tão signifcativa.

34. Personalização da aparência