Cores, formas e otimizações de imagens

Bom dia pessoal

Estava aqui estudando o famoso CSS com o livro “250 HTML and Web Design Secrets” e depois de ver muitos conceitos legais de regas de css e HTML (alguns ultrapassados pelo livro ser antigo) encontrei uma área que é de muita ajuda quando se fala em imagens na web e um pouco depois sobre cores e formas... achei muito legal então além de anotar tudo aqui no meu precioso caderninho, eu também resolvi compartilhar isso... porque é de grande utilidade...

Começando com imagens para web

Todos vocês devem estar se perguntando qual raio de extensão é a melhor para salvar arquivos, qual o melhor raio de programa para criar e editar imagens, e (talvez) por que raio tantos...

A muito tempo atrás quando o computador não tinha ainda uma internet, apenas transferência de arquivos por uma rede extremamente lenta de computadores (sem plataforma web) um cidadão Eric Hamilton da empresa C-Cube Microsystems em 1983 criou o formato JPEG para transitação de imagens no computador e por conseqüência do momento, na internet. Logo depois em 1987 uma empresa chamada CompuServe resolveu implementar também sua própria otimização de arquivos de imagens na internet, então ela criou o arquivo .GIF (Graphic Interchange Format).

A diferença dos dois é a seguinte

(de forma bem simples)

O .GIF (Graphics Interchange Format) tem 256 cores em sua paleta (incluindo transparente), tornando seu arquivo dependente dessa gama (não que isso seja pouco) isso já reduzia muito o tamanho do arquivo, mas também tem outro fator... ela mapeava a imagem na hora da otimização, e criava “códigos” para a forma, por exemplo: tenho uma imagem que é um círculo preto num fundo cinza claro, como ela otimizaria isso, criaria um código (como uma função) falando onde são as fronteiras da parte branca, e também da parte preta, fazendo uma função só para o preto e outra para o branco, sem contar com a localização no tamanho da imagem e afins... mas no fim são apenas “funções” definindo de onde até onde vai certa cor.

O .JPEG (Joint Photographic Experts Group) já faz otimização diferente, a sua imagem é transformada numa grande matriz (campo quadriculado) com quadradinhos bem pequenos,(com capacidade em torno de milhões de cores) e dentro desses quadradinhos vem a informação da cor que está nele, e quanto menos quadradinhos, menor a quantidade de informação de cor dentro deles, e menor o tamanho (em Kb) do arquivo (diferente do .gif não exporta quadrados transparentes).

Mas nos dois casos, após a otimização, a imagem é transformada numa grande matriz, no caso do .GIF essa matriz é menos alterada quando redimensionada a imagem, mas o .jpg faz um estrago muito maior (criando mais quadrados, esticando os que existem multiplicando ou duplicando as cores dos quadrados adjacentes).

“Ah mas ainda tem o .PNG que você ainda não falou”

Opa... claro... o famoso...

O grande problema das extensões .jpg e .gif na época era que as empresas que os criaram cobravam para o desenvolvedor de software ou qualquer outra entidade que quisesse usar essa extensão, cobrava direito de exportação. Então surgiu publicamente o .PNG (Portable Network Graphics), que engloba as duas otimizações e ainda mantém o canal alfa (transparência) com definição muito mais aprimorada que o .GIF, fazendo valer a pena o seu uso nos projetos Web ,muito mais agora que os browsers estão se dedicando a compreender essa transparência da extensão, e também por sua alta taxa de otimização e qualidade.

Então aqui vão as dicas:

- Se você estiver com uma foto, uma imagem com troca de cores muito intensa e variada, use .JPG para melhor definição e otimização.

- Se está trabalhando com vetores, imagens com pouca transição de cor e linhas rígidas de objetos, tente o .GIF por sua otimização por funções numéricas para linhas e cores.

- Se você está com um projeto web, e também precisa de uma qualidade boa com transparência, por favor, use o .PNG... ele ainda é pouco utilizado mas parece que depois desse “upgrade” nos browsers ele chegou pra ficar!

Os Programas

"Ei qual a diferença de usar um Photoshop e um Corel Draw (ou Illustrator) "

A diferença é a seguinte, o Photoshop é um programa MATRICIAL que trabalha com a imagem separa por minúculos quadrados (normalmente por pixeis) que contém uma cor específica que em grande escala vira um desenho,e ele atua em cima dessa matriz, podendo ser criada qualquer tipo de imagem e solução visual. Claro que têm seus poréns, por exemplo, sua definição de imagem é totalmente restrita ao tamanho (dimensões) de seu arquivo, se aumentar ele (diminuir nem tanto) ele perde considerávelmente a resolução, e também não é muito aconselhável para impressões e trabalhos minusciosamente precisos, e quando você for exportar sua imagem, otimizá-la, conta muito o tamanho do arquivo, se seu arquivo for muito grande (de dimensões) quer dizer que têm mais quadrados na matriz com definições de cores, então mais informações, logo ele é maior em kbytes.

O Corel ou Illustrator é VETORIAL ou seja ao invés de trabalhar com uma matriz de pixeis, ele cria funções e códigos para as coisas que estão aparecendo na sua frente, por exemplo, se você criar uma linha reta, ele cria um F(x) dentro de sua programação que determina o tamanho de sua linha, a grossura, a cor. Então essa linha é uma linha, se você alterar os lados dessa linha o código vetorial que vai mudar, é um número e não uma informação dentro de vários quadrados. Então se você aumenta essa imagem em dimensões ela não aumenta em peso, pois a única coisa que está fazendo é mudando um valor no número da função desse elemento ( o y para de ser x e começa a ser z), e não importa o Zoom que você dê nesse arquivo ele vai ter linhas totalmente precisas, pois é uma função, e não mais uma matriz. Também tem seus poréns, ele não te dá as mesmas liberdades que o photoshop, ele dá outras possibilidades, mas a parte mais liberta da imagem vai da sua experiência e criatividade com a ferramenta e com seu projeto. Ele é o mais indicado para criações de peças perfeitamente alinhadas e medidas, é o melhor recurso para impressões e afins pela sua perfeição de traço.

UFA!

Agora vêm as cores

No meu livro encontrei algumas tabelas que podem ser úteis na criação de projetos visuais no que diz respeito a cores, suas utilizações, impactos e principalmente "A Psicologia das Cores".

Vermelho	Poder, energia, amor, calor, paixão, perigo, agressão, violência, sangue.
Azul	Confiança, conservadorismo, segurança, tecnologia, limpeza, clareza, calmaria, ordem
Verde	Natureza, terra e Terra, saúde, boa sorte, inveja, renovação, dinheiro
Amarelo	Otimismo, alegria, esperança, Filosofia, desonestidade, covardia, traição
Roxo	Espiritualidade, mistério, poder, mítico, transformação, crueldade, arrogância
Laranja	Energia, calor, destaque
Marrom	terra, confiança, conforto, resistência
Cinza	Inteligente, futurista, elegante, modesto, triste
Branco	Puro, limpo, precisão, inocência, morte
Preto	Poder, sexualidade, sofisticação, mistério, medo, infelicidade, morte

*Interessante:

De 2 a 3% das mulheres do mundotem um sentido para detectar cores muito mais avançadas que o normal do ser humano, elas tem um sentido de "cones" onde veêm mais cores (normalmente em aves raras) e são classificadas tetracromáticas.

Fonte:http://en.wikipedia.org/wiki/Tetrachromat

http://www.4colorvision.com/files/tetrachromat.htm

Dicas de cor

- Antes de tudoconheça seu público alvo, para melhor definir as cores mais adequadas.

- Como o azul é universalmente aceitável, ele vai ser útil em maioria dos casos.

- Lembre-se que ao inserir uma textura á sua imagem a cor de foco muda.

- O texto deve estar adequado com cores e fundo de acordo com o público alvo, mas é também universal ele estar destacado em contraste.

Link de um site bem legal sobre cores: http://www.colormatters.com

The simbolic meaning of Shapes

Retângulo	Autoridade, estabilidade, força, limpo, legível, claro
Triângulo	Ação, movimento, direção, masculino
Círculo	Comunidade, movimento fluído, flexibilidade, feminino

Tomara que tenha sido de grande proveito ^^.
Desculpa as falhas das tabelas, tá dando sozinho e não dá pra arrumar XC