Produzir imagens bitmap para suportes digitais (UC00504)

Há um pacote premium desta unidade: um PowerPoint editável de 100 ou mais diapositivos, um manual em PDF e dois testes com correção. Esta sebenta continua gratuita.

Introdução

Esta sebenta ensina a produzir imagens bitmap para suportes digitais: preparar o documento, editar e ajustar fotografias, compor imagens com camadas, aplicar cor e tipografia adequadas ao ecrã, criar imagens animadas e exportar tudo no formato certo para cada canal.

Trabalha-se sempre com imagens bitmap (raster, feitas de pixels), a linguagem visual de qualquer site, aplicação ou rede social. As aplicações de referência são o Adobe Photoshop, o programa mais usado no mercado, e o GIMP, a alternativa livre e gratuita com os mesmos conceitos de fundo. Aprender os conceitos, não só os cliques num programa específico, é o que garante que o conhecimento transfere-se para qualquer ferramenta.

Objetivos de aprendizagem (referencial): executar operações de edição e ajuste da imagem; executar operações de composição e manipulação de imagens; criar imagens animadas; e exportar imagens para difusão em suportes digitais, cumprindo sempre as normas de segurança e saúde no trabalho.

1. Imagens digitais para a web

Uma imagem bitmap é uma grelha de pixels, cada um guardando a sua própria cor. É diferente de uma imagem vetorial, descrita por curvas matemáticas: um vetor redimensiona-se sem perda de qualidade, uma bitmap não.

Toda a aplicação de edição de imagem organiza-se pelas mesmas zonas:

Os grupos principais da caixa de ferramentas são: seleção (retangular, laço, varinha mágica, seleção rápida), pintura (pincel, balde), retoque (carimbo, correção), texto, forma e navegação (zoom, mão). Cada ferramenta tem um atalho de teclado: V mover, M seleção retangular, L laço, T texto, Ctrl+Z anular, Ctrl+S guardar, Ctrl+T transformar livre. Trabalhar de cor com os atalhos muda o ritmo de uma sessão de edição inteira.

2. Formatar a página e a resolução em função do canal de difusão

Antes de desenhar seja o que for, define-se um documento novo com quatro decisões: largura e altura em pixels, resolução em ppi (pixels por polegada), modo de cor RGB e tipo de fundo (branco, transparente ou uma cor). Mudar o tamanho depois de começar obriga quase sempre a reajustar camadas e texto, por isso vale a pena decidir bem à partida.

A resolução e o tamanho corretos dependem sempre de onde a imagem vai ser vista, o chamado canal de difusão:

O ppi é apenas um metadado: não é o que determina o peso do ficheiro, isso depende do tamanho em pixels e da compressão usada. Ainda assim, o ppi não é relevante para o ecrã, porque este só lê o tamanho em pixels e nunca mostra mais do que a sua própria resolução física; o que importa ajustar ao canal certo são as dimensões em pixels, não o ppi. Ajustar a resolução ao canal certo é um dos critérios de desempenho desta UC.

3. Sistemas de cor, cores seguras e dithering

O sistema de cor RGB (vermelho, verde, azul) é cor aditiva, e é sempre o sistema usado nos ecrãs: em suporte digital, a regra é simples, RGB sempre. O sistema CMYK (ciano, magenta, amarelo, preto) é cor subtrativa, usada apenas na impressão. Uma imagem CMYK aberta num browser aparece com cores erradas, por isso converte-se sempre para RGB antes de exportar.

Cada cor RGB tem um código hexadecimal (#RRGGBB), a forma universal de comunicar uma cor exata entre o design e o desenvolvimento web, usado tanto nas aplicações de edição como em CSS. O conceito histórico de cores seguras da web (216 cores) garantia que uma cor aparecia igual em qualquer monitor antigo com paleta de 8 bits; hoje os ecrãs mostram milhões de cores, mas o raciocínio da cor exata e do código partilhado mantém-se atual.

O dithering é uma técnica que simula cores que faltam numa paleta limitada, misturando pixels de duas cores próximas num padrão visual. É especialmente relevante no formato GIF, que tem uma paleta máxima de 256 cores. As caixas de diálogo de exportação mostram sempre uma previsão de cor, o resultado otimizado lado a lado com o original e o peso final em KB, para comparar antes de confirmar.

4. Tipografia para suportes digitais

O texto num suporte digital tem regras próprias: tem de ser legível em ecrãs pequenos e a distâncias variáveis, e as famílias tipográficas devem garantir leitura e funcionalidade no canal escolhido. As fontes web-safe (Arial, Verdana, Georgia) estão sempre disponíveis em qualquer dispositivo; fontes personalizadas exigem converter o texto em imagem, ou incorporá-las via CSS quando o destino é uma página real.

Duas paletas controlam o texto:

• Caracteres: tipo de letra, tamanho, entrelinha (leading), espaçamento entre letras (tracking) e entre pares específicos (kerning).
• Parágrafo: alinhamento, avanço de linha, espaço antes e depois do bloco.

Há dois tipos de texto: texto pontual, uma linha ou palavra solta (títulos, botões), e texto em área ou parágrafo, numa caixa com largura definida, onde o texto quebra automaticamente (descrições, legendas). O texto mantém-se editável enquanto for uma camada de texto; só se converte em forma ou se rasteriza quando é preciso aplicar um efeito que a camada de texto não suporta, e nesse momento perde-se a possibilidade de corrigir uma gralha sem refazer o efeito.

5. Camadas (layers)

As camadas (layers) são folhas transparentes sobrepostas que, juntas, compõem a imagem final. Cada camada pode ser editada sem afetar as outras, tem uma opacidade entre 0 e 100% e um modo de mistura que determina como a sua cor se combina com as camadas por baixo. A ordem na pilha de camadas, de cima para baixo, determina o que fica visível em cada ponto da imagem.

Operações básicas: criar, duplicar, apagar e renomear uma camada; agrupar camadas relacionadas numa pasta, para organizar composições complexas; bloquear uma camada para não a alterar por engano; e reordenar arrastando na paleta de camadas. Nomear as camadas com clareza (logotipo, fundo, botão-cta) poupa muito tempo mais tarde, sobretudo em ficheiros com dezenas de camadas.

Existem vários tipos de camada: normal (pixels de imagem), de texto (editável até ser rasterizada), de forma (vetorial dentro de um documento bitmap) e de ajuste (aplica correções de brilho ou cor sem alterar os pixels originais). O clipping group recorta uma camada pela forma da camada imediatamente abaixo, uma técnica muito usada para encaixar uma textura ou fotografia dentro de uma letra ou de uma forma.

6. Estilos e shapes

Os estilos de camada (layer styles) aplicam efeitos de forma não destrutiva e reutilizável: sombra projetada, relevo (bevel), contorno, brilho e sobreposição de cor ou gradiente. Ao contrário de um efeito "achatado" diretamente nos pixels, um estilo continua editável a qualquer momento, pode ser copiado de uma camada para outra e guardado como predefinição para reutilizar noutros projetos, garantindo consistência visual entre elementos.

As ferramentas de forma (shape), como retângulo, elipse, polígono, linha e forma personalizada, baseiam-se em vetores, por isso redimensionam sem perder qualidade mesmo dentro de um documento bitmap. São muito usadas para botões, ícones e molduras, que depois recebem estilos de camada. A ferramenta caneta (pen) desenha formas livres ponto a ponto, útil para contornos precisos que as formas geométricas não conseguem.

Exemplo resolvido · botão de chamada de ação (call to action)

1. Desenhar um retângulo arredondado com a ferramenta de forma.
2. Aplicar um estilo de camada: sombra projetada ligeira, distância 2 px, opacidade 30%.
3. Adicionar uma camada de texto com a mensagem do botão, fonte web-safe, tamanho legível.
4. Agrupar as duas camadas numa pasta chamada botão-cta.
5. Guardar o estilo como predefinição, para reutilizar noutros botões do mesmo site.

7. Tratamento fotográfico

O tratamento de uma fotografia digital passa por ajustes de brilho e contraste, níveis (levels) e curvas (curves) para corrigir a exposição, balanço de cor para corrigir dominantes indesejadas, recorte (crop) e endireitar (straighten) para enquadrar bem, e ferramentas de retoque como o carimbo (clone stamp) e o pincel de correção (healing brush) para remover manchas ou imperfeições.

Exemplo resolvido · corrigir uma foto de produto subexposta

Uma fotografia de um produto para a loja online, tirada com pouca luz.

1. Abrir a foto e verificar o histograma: a maioria dos valores está concentrada à esquerda (zona escura).
2. Aplicar Níveis, arrastando o ponto branco para a esquerda até onde os dados terminam do lado direito do histograma, ou seja, até ao valor mais claro real da imagem, sem cortar detalhe.
3. Ajustar o balanço de cor, removendo uma leve dominante amarela causada pela luz artificial.
4. Recortar a imagem para centrar o produto e remover fundo desnecessário.
5. Aplicar uma leve nitidez (sharpen) final, para compensar a suavização típica do redimensionamento e da própria captura (sensor e interpolação), não dos ajustes de cor anteriores.

Seguir os passos por esta ordem evita perder informação: ajustar tons antes de recortar, e recortar antes de aplicar nitidez.

Depois do ajuste tonal, a otimização de fotografias trata do redimensionamento para o uso final, da nitidez e da redução de ruído, sempre equilibrando qualidade visual com o peso do ficheiro final.

8. Composição de imagens e imagens de fundo

Compor é juntar várias imagens numa só de forma coerente. As seleções (retangular, laço, varinha mágica, seleção rápida) recortam cada elemento pelo contorno mais adequado; as máscaras de camada escondem partes de uma camada sem apagar pixels, de forma reversível. A regra de ouro de qualquer composição é a coerência visual: a luz, a perspetiva e a escala têm de bater certo entre os elementos combinados, senão a montagem "não cola" aos olhos de quem vê.

As imagens de fundo (background images) podem ser contínuas (tileable), repetindo-se sem costura visível e poupando peso de ficheiro em relação a uma imagem grande única, ou baseadas em padrões (patterns) e gradientes, alternativas leves a fotografias para fundos de secções de um site. O fundo cobre normalmente grandes áreas do ecrã, por isso é muitas vezes o elemento mais pesado de uma página se não for bem otimizado.

9. Otimização e exportação, JPEG e GIF

Toda a imagem publicada num suporte digital equilibra qualidade visual e peso do ficheiro. Ficheiros pesados demoram a carregar, prejudicam a experiência de quem visita o site e até o posicionamento em motores de busca. A caixa de diálogo de exportação (gravar para web) mostra sempre uma previsão do resultado e do peso final antes de confirmar; comparar duas ou três definições de qualidade e escolher a mais leve que ainda pareça boa é boa prática.

O formato JPEG usa compressão com perdas (lossy): quanto menor a qualidade escolhida, mais pequeno o ficheiro e mais visíveis os artefactos (blocos, manchas). É ideal para fotografias, com muitas cores e gradações suaves, mas não suporta transparência, e comprimir demasiado degrada rapidamente a nitidez.

O formato GIF tem uma paleta limitada a 256 cores, mas dentro dessa paleta a compressão é sem perdas (lossless). Suporta transparência (um único nível, sem meios-tons) e animação, sendo por isso ideal para gráficos de cor plana: ícones, logótipos simples, botões e animações curtas. As opções de exportação incluem o número de cores, o tipo de dithering e o método de transparência.

Erro clássico a resolver: o halo em GIF transparente

Um problema recorrente é o halo (contorno esbranquiçado) à volta de um objeto recortado num GIF transparente. Acontece porque o anti-aliasing cria pixels de transição de cor entre o objeto e o fundo original da fotografia, e esses pixels de transição ficam visíveis quando a imagem passa a estar sobre um fundo diferente. A solução é definir a cor de fundo (matte) na exportação igual à cor do fundo onde a imagem vai ficar, para que a transição se misture corretamente, ou ajustar cuidadosamente a máscara antes de exportar. Resolver problemas de transparência de imagens animadas é um critério de desempenho explícito desta UC.

Guardar imagens para suportes audiovisuais

Uma imagem destinada a um vídeo, a uma emissão ou a uma peça de motion graphics segue uma lógica diferente da imagem impressa ou da imagem para a web: o que importa não é o ppi, mas o tamanho em pixels, que tem de corresponder à resolução do projeto de vídeo, tipicamente Full HD (1920 × 1080 px) ou 4K (3840 × 2160 px). Guarda-se sempre em RGB, tal como para a web, e num formato sem perdas ou de qualidade elevada (PNG, TIFF ou JPEG com qualidade alta), porque um ecrã de grandes dimensões evidencia qualquer artefacto de compressão que numa miniatura passaria despercebido. Vale ainda a pena respeitar a zona de segurança de título (title-safe area), deixando uma margem sem elementos essenciais junto às bordas, porque alguns ecrãs de televisão cortam ligeiramente o fotograma. Guardar imagens para suportes audiovisuais é uma aptidão própria desta UC, distinta da exportação para web, redes sociais ou impressão.

10. Imagens animadas em GIF

Uma animação GIF é uma sequência de frames (fotogramas) reproduzidos em ciclo. Cada frame tem um atraso (delay) próprio, medido em centésimos de segundo, e o loop pode repetir infinitamente ou um número definido de vezes. A otimização por frames de diferença, guardando apenas o que muda entre um frame e o seguinte, reduz drasticamente o peso final do ficheiro.

Exemplo resolvido · banner animado de 3 frames

1. Criar três camadas, uma por estado do banner: texto a aparecer, produto em destaque, chamada de ação final.
2. Converter as camadas em frames na paleta de animação (timeline).
3. Definir o atraso de cada frame, por exemplo 1 segundo, e o loop como "sempre".
4. Otimizar usando frames de diferença e exportar como GIF.

11. Fatias, rollovers e mapas de imagem

Uma fatia (slice) divide uma imagem grande em regiões independentes, cada uma exportável no seu próprio formato e nível de otimização. As fatias de utilizador são desenhadas manualmente com a ferramenta de fatia; as fatias automáticas são geradas pela aplicação a partir dessas, preenchendo o resto da imagem. Cada fatia pode ir para JPEG, GIF ou PNG, consoante o conteúdo, fotográfico ou de cor plana.

Um rollover muda o aspeto de uma fatia da imagem quando o rato passa por cima, é clicado ou fica ativo, baseando-se em camadas com estados diferentes (normal, sobre, pressionado) associadas à mesma fatia. É a técnica clássica dos botões de navegação de sites antes de o CSS assumir esse papel; o raciocínio de "estados de um botão" mantém-se atual.

Um mapa de imagem define zonas clicáveis dentro de uma única imagem, cada uma a apontar para um destino diferente. No mapa do lado do cliente, as coordenadas ficam no próprio HTML (<map> e <area>) e o browser processa o clique; no mapa do lado do servidor, o browser envia as coordenadas ao servidor, que decide o destino. O mapa do lado do cliente é hoje a opção habitual, por não depender de processamento adicional no servidor.

12. Automatização, gestão de ficheiros e segurança no trabalho

As ações (actions) gravam uma sequência de passos (redimensionar, aplicar nitidez, exportar) que se repete com um único clique; um droplet transforma essa ação num pequeno ficheiro executável, bastando arrastar um lote de imagens para cima dele para as processar todas de uma vez, num verdadeiro processamento em lote (batch).

Exemplo resolvido · redimensionar 50 fotos de produto

1. Gravar uma ação: abrir foto, redimensionar para 1200 px de largura, aplicar leve nitidez, exportar para JPEG qualidade 80.
2. Guardar a ação e criar um droplet a partir dela.
3. Arrastar a pasta com as 50 fotos originais para o droplet.
4. As 50 fotos saem processadas e otimizadas, sem repetir manualmente o mesmo trabalho 50 vezes.

Depois de fatiar e otimizar, é possível exportar HTML e imagens juntos, com o código de referência a cada fatia e, quando aplicável, o mapa de imagem correspondente; este código é um ponto de partida técnico, normalmente ajustado depois no editor final do site.

Uma boa gestão de ficheiros digitais e arquivo separa sempre originais, trabalho (ficheiro editável, com camadas) e exportados (versões finais para publicação), usa uma nomenclatura consistente (nome do projeto, versão, data) e mantém sempre o ficheiro fonte editável, mesmo depois de exportar. Sem ele, qualquer alteração futura implica refazer tudo de raiz.

Por fim, trabalhar muitas horas ao computador exige cuidados de ergonomia e saúde no trabalho: ecrã à altura dos olhos, costas apoiadas, antebraços paralelos à secretária, pausas regulares (a regra 20-20-20, a cada 20 minutos olhar 20 segundos para algo a 6 metros de distância, cerca de 20 pés) e iluminação adequada, sem reflexos no ecrã, para prevenir fadiga visual. Estas normas são conteúdo avaliável desta UC, não um extra.

Erros comuns

• Usar sempre 300 ppi "para garantir qualidade" na web, sem perceber que o ppi é só um metadado que não afeta o peso do ficheiro nem a qualidade no ecrã: o que conta é o tamanho em pixels.
• Trazer uma imagem em CMYK de um trabalho de impressão e esquecer de a converter para RGB antes de publicar.
• Rasterizar o texto demasiado cedo e só depois notar uma gralha, obrigando a refazer o efeito todo.
• Ficheiros com "Camada 1", "Camada 2", sem nenhum nome, impossíveis de navegar num projeto com dezenas de camadas.
• Usar GIF para uma fotografia (fica pesado e com bandas de cor) ou JPEG para um gráfico com texto (fica com manchas e halos).
• Exportar um GIF transparente sem definir a cor de fundo (matte) e obter uma auréola clara à volta do objeto.
• Guardar só o exportado final e apagar o ficheiro fonte com camadas, "para poupar espaço".

Glossário

• Bitmap (raster): imagem organizada em pixels, cada um com a sua própria cor.
• Ppi (pixels por polegada): unidade de resolução de uma imagem digital.
• RGB: sistema de cor aditiva usado em todos os ecrãs.
• CMYK: sistema de cor subtrativa usado na impressão.
• Hexadecimal: código de seis carateres que identifica uma cor RGB exata.
• Dithering: mistura de pixels de duas cores para simular uma cor em falta numa paleta limitada.
• Camada (layer): nível independente e editável de uma composição.
• Clipping group: recorte de uma camada pela forma da camada imediatamente abaixo.
• Estilo de camada: efeito não destrutivo e reutilizável (sombra, relevo, contorno).
• Shape: forma vetorial dentro de um documento bitmap.
• Máscara de camada: oculta partes de uma camada de forma reversível.
• JPEG: formato de compressão com perdas, ideal para fotografias.
• GIF: formato de paleta limitada, com transparência e animação.
• Matte: cor de fundo definida na exportação transparente para que os pixels de transição do anti-aliasing se misturem com o novo fundo, evitando halos.
• Frame: cada fotograma individual de uma animação.
• Fatia (slice): região independente e exportável de uma imagem.
• Rollover: mudança de aspeto de uma fatia consoante a interação do utilizador.
• Mapa de imagem: zonas clicáveis definidas dentro de uma única imagem.
• Ação (action): sequência de passos gravada e reutilizável.
• Droplet: ação transformada em executável para processamento em lote.
• Title-safe area: margem junto às bordas do fotograma sem elementos essenciais, para não serem cortados em ecrãs de televisão.

Síntese

A produção de imagens bitmap para suportes digitais segue sempre a mesma lógica de trabalho: definir o documento (tamanho, resolução, RGB) em função do canal de difusão → editar e ajustar a fotografia (níveis, curvas, retoque) → compor com camadas, estilos e shapes, cuidando da cor e da tipografia adequadas ao ecrã → animar, quando necessário, em GIF, resolvendo problemas de transparência → otimizar e exportar no formato certo, com fatias, rollovers e mapas de imagem quando a imagem é interativa → automatizar tarefas repetitivas e arquivar bem o trabalho, sempre com atenção à ergonomia e à segurança no posto de trabalho.

Exercícios resolvidos

1. Uma imagem vai ser publicada num banner de um site. Que resolução e sistema de cor usas, e porquê?

Resolução: 72 a 96 ppi e sistema de cor RGB. É o par correto para qualquer ecrã: o que importa no ecrã é o tamanho em pixels, não o ppi, que é apenas metadado e não altera o peso do ficheiro; CMYK, próprio da impressão, produziria ainda por cima cores erradas num ecrã, que só lê RGB.

2. Um cliente pede um logótipo com texto para o cabeçalho do site, em JPEG. Concordas com o formato? Justifica.

Resolução: não. O logótipo tem texto e cor plana, e o JPEG (compressão com perdas) cria manchas e halos à volta de contornos nítidos, além de não suportar transparência. O formato correto é GIF ou PNG, que preservam a nitidez do texto e permitem fundo transparente.

3. Exportaste um GIF transparente e aparece uma auréola clara à volta do objeto quando colocado sobre um fundo escuro. Qual a causa e a correção?

Resolução: a causa é o anti-aliasing, que cria pixels de transição de cor calculados para o fundo original (claro), visíveis quando a imagem passa para um fundo diferente. A correção é definir a cor de fundo (matte) na exportação igual à nova cor de fundo, ou ajustar a máscara do recorte antes de exportar.

4. Precisas de redimensionar e otimizar 200 fotografias de produto do mesmo modo. Qual é o fluxo de trabalho mais eficiente?

Resolução: gravar uma ação com os passos (redimensionar, nitidez, exportar), transformá-la num droplet e arrastar a pasta com as 200 fotos para cima dele, processando todas de uma vez em lote, em vez de repetir manualmente cada passo 200 vezes.

5. Um colega apaga o ficheiro fonte com camadas assim que exporta o JPEG final, "para poupar espaço em disco". Que lhe respondes?

Resolução: que o ficheiro fonte editável é o único que permite corrigir ou reaproveitar o trabalho no futuro; sem ele, qualquer alteração implica refazer a composição de raiz. A boa prática é manter sempre originais, trabalho (com camadas) e exportados em pastas separadas, com nomenclatura e backups regulares.

6. Uma imagem vai ser inserida num vídeo institucional montado em Full HD, para ser exibida num ecrã grande numa feira. A que tamanho e em que formato a guardas?

Resolução: ao tamanho em pixels do projeto de vídeo, 1920 × 1080 px, em RGB; o ppi não é relevante para vídeo. O formato deve ser sem perdas ou de qualidade elevada (PNG, TIFF ou JPEG de alta qualidade), porque um ecrã grande evidencia qualquer artefacto de compressão, e vale a pena deixar uma margem de segurança (title-safe) junto às bordas.