Laura Lopes

Uma noção trivial para publicitários e designers, os sistemas de cores podem assustar quem está começando na área. Neste post vou tratar as principais diferenças entre CMYK e RGB.

RGB
Red Green Blue
(Vermelho, Verde, Azul)

Este é o sistema de cores usado pelos monitores de computadores, câmeras digitais, scanners e afins. É um sistema de cor luz, ou seja, que emite informações de luz em três níveis, formando preto (nenhuma luz) ou branco (máxima iluminação) ou tonalidades de cor baseado em quanto se tem de vermelho, verde ou azul.

Cada uma das tonalidades do RGB variam de 0 a 255. Quanto mais próximo do zero, mais escuro, ou seja, menos luz. Quanto mais próximo do 255, mais claro, mais luz.

Exemplos:

R 000 G 000 B 000 = preto
R 255 G 255 B 255 = branco
R 255 G 000 B 000 = vermelho
R 000 G 255 B 000 = verde
R 000 G 000 B 255 = azul

As cores que escolhemos para web são formadas com o sistema RGB, a diferença é que usamos o sistema em hexadecimal. Cada cor é formada por 6 dígitos ou letras. As duas primeiras para o R, as do meio para o G e as duas últimas para o B. Variam de 0 a 9 e de A a F. Quanto mais próximo de zero, menos intensidade de luz e quanto mais próximo de F, mais iluminação.

Exemplos:

#000000 = preto
#FFFFFF = branco
#FF0000 = vermelho
#00FF00 = verde
#0000FF = azul

CMYK
Cyan Magenta Yellow blacK
(Ciano, Magenta, Amarelo, Preto)

CMYK é a cor formada por pigmentos. É o sistema usado para a impressão. Como a base da impressão é o papel, o fundo geralmente já é branco e a medida que vamos adicionando tinta, vamos escurecendo a impressão. Cada uma das cores pode variar de 0 a 100%. No CMYK temos um processo inverso, quanto mais próximo do 100, mais pigmento existirá na impressão e mais forte será a cor. Então quanto menos porcentagem, menos cor, menos pigmento. Quanto mais pigmento, mais escuro.

C 000 M 000 Y 000 K 000 = branco
C 100 M 000 Y 000 K 000 = ciano
C 000 M 100 Y 000 K 000 = magenta
C 000 M 000 Y 100 K 000 = amarelo
C 000 M 000 Y 000 K 100 = preto

Como a mistura dos três pigmentos, CMY, não forma o preto puro, foi acrescentada a cor preta para dar um bom acabamento às impressões. Quem já fez mistura de tintas quando era criança, deve lembrar bem que, após misturar todas as cores dos potinhos de tinta guache, o resultado era uma cor marrom escura.

O RGB, como é visto através de iluminação tende a ser brilhoso, já CMYK tende a possuir menor brilho. Estes efeitos podem ser alcançados usando um papel brilhoso ou uma aplicação de verniz sobre a impressão. Não vou entrar em detalhes sobre estes processos agora.

A sugestão que eu deixo é: trabalhe sempre em RGB no seu computador. Isso porque as imagens que usamos são captadas no sistema RGB. Quando terminar o layout, transforme em CMYK e observe o resultado. Faça os ajustes necessários. Depois, salve o arquivo como um TIFF e mande para a gráfica.

Eu tive meu primeiro contato com a Internet em novembro de 1995. Tudo era muito lento e muito feio. Um mês depois, no meu aniversário, recebi um cartão muito fofinho. Eu quis guardar e não sabia como. Mandei um e-mail para o serviço que foi usado para me enviar o cartão e eles me disseram que era só clicar com o botão direito e escolher “salvar como”. Mas isso salvava só a foto e não página inteira com os dizeres que acompanhavam o cartão.

Foi nesse dia que eu resolvi que ia aprender HTML para salvar a página inteira. Notem que naquela época não existia o botão milagroso “salvar página da web COMPLETA”. Eu precisei salvar o HTML e a imagem. E ainda tive que editar o caminho da imagem para que ela apontasse para o meu computador e não para o endereço da web.

Desde então, web tem sido minha paixão.

Hoje, com os sistemas de segurança ficando cada vez mais sofisticados, a opção Arquivo > Salvar como > Página da Web, completa não anda mais funcionando como antes. Principalmente com as páginas de Internet Banking. Estas são as que ficam em pior estado. E haja conhecimento em HTML, PHP, ASP, .NET para corrigir a bagunça.

Então eu decidi trocar a maneira como salvo as páginas web que visito.

Configurei meu navegador para imprimir as páginas com cores e com o fundo e, ao invés de mandar para a impressora, pois não gosto de acumular papel, mando imprimir em um arquivo PDF. É perfeito, ele é econômico em espaço, fica bonito, é fácil de catalogar e assim eu não preciso mais usar o Word para colar as páginas que eu quero. Aliás, este foi o segundo motivo. Como o pacote Microsoft Office é muito caro, optei por usar o Open Office, só que o Writer dele não é muito bom para salvar páginas da Internet.

Toda essa introdução para explicar porque eu mudei a forma de guardar os arquivos da web!

Vamos agora partir para a configuração:

Primeiro você vai precisar de um programa que seja capaz de gerar arquivos em PDF. Pode ser o Adobe Acrobat, o CutePDF, entre outros. Eu uso o PDF 995 que é gratuito. Clique no link e vá até a seção downloads. Os instaladores vêm separados e será preciso executar os três arquivos (Pdf995 Printer Driver, Free Converter, pdfEdit995).

Baixe os três e execute nesta ordem:

Pdf995 Printer Driver (Version 7.7s*)
Free Converter (Version 1.1)
pdfEdit995 (Version 7.7)

Pronto, agora você já tem uma “impressora” e um editor de arquivos PDF. Se você não tem uma impressora jato de tinta, laser, etc, a PDF será automaticamente colocada como impressora padrão. Se você salva mais arquivos do que imprime, vale a pena trocar a PDF para a padrão (Menu Iniciar > Impressoras e aparelhos de fax. Clique com o botão direito em PDF e escolha: Definir como impressora padrão).

Agora vamos configurar o seu navegador para imprimir a página do modo como a vemos.

No Internet Explorer, vá em Ferramentas > Opções da Internet. Marque a opção Imprimir cores e imagens do plano de fundo, conforme a figura:

No Firefox, quando você for imprimir, vá sempre em Visualizar a Impressão primeiro. Lá, clique em Configurar Página e, na aba Geral, marque a opção Imprimir cores e imagens do plano de fundo.

Agora é só salvar e escolher PDF como impressora.

Ele vai abrir uma janela e pedir para que você escolha a pasta aonde vai salvar o arquivo e também vai pedir que você dê um nome ao arquivo que está sendo salvo.

Uma janela de progresso vai abrir. Você vai precisar clicar no botão da direita para que ele feche a janela com os patrocinadores. A geração do arquivo pode demorar um pouco.

Quando ele terminar, o seu leitor de PDF, que pode ser o Adobe Reader, vai abrir e você vai poder conferir se o arquivo ficou do seu agrado!

Dúvida:

Quero fazer um link, onde eu clico no nome de um produto, por exemplo, e ele abre em uma nova janela a foto desse produto. Só que gostaria que nessa janela aparecesse apenas o produto, e quando faço aqui aparece todos os menus.

Solução:

No Dreamweaver 8 (e no MX 2004) existe a janela de Behaviors. Você pode acessá-la através do menu Window > Behaviors.

Crie uma página html.

Faça um link.

Clique na imagem para aumentar.

Não coloque o endereço direto para a foto que quer abrir, preencha o local do link com o caracter: #

Selecione o texto do link, como mostra a primeira figura.

Vá no painel de Behavior e escolha Open Browser Window.

Quando a janela abrir, configure com os dados da imagem que você deseja abrir em uma nova janela.

Não marque nenhuma das opções, assim os menus e botões não irão aparecer na nova janela.

No painel de Behaviors, troque a opção que vem marcada para onClick.

Isso fará que a janela abra somente quando a pessoa clicar no link.

Para cada imagem, repita o procedimento.

Clique aqui (com o botão direito e escolha salvar como) para fazer download de um exemplo em html de uma imagem que é aberta pelo link. Clique aqui (também com o botão direito) para fazer download da imagem.

Esse processo é feito através de javascript, portanto, o código javascript deve permanecer no arquivo html para que o efeito funcione!