UC00504

Produzir imagens bitmap para suportes digitais

Editar, compor, animar e exportar imagens para a web e outros canais digitais

Curso profissional · 25h · Técnico de Multimédia

Plano

  1. Imagem bitmap e o software de edição
  2. Página de trabalho, resolução e canal de difusão
  3. Sistemas de cor para a web
  4. Tipografia para suportes digitais
  5. Camadas (layers)
  6. Estilos e shapes
  7. Tratamento fotográfico
  8. Composição e imagens de fundo
  9. Otimização e formatos GIF/JPEG
  10. Fatias, rollovers e mapas de imagem
  11. Automatização
  12. Gestão de ficheiros e segurança no trabalho

Bloco 1 · Imagem bitmap e o software de edição

O que é uma imagem bitmap

Uma imagem bitmap (ou raster) é uma grelha de pixels, cada um com uma cor própria. É o oposto da imagem vetorial, feita de curvas e formas matemáticas.

  • Fotografias, capturas de ecrã e texturas são sempre bitmap.
  • Ampliar demasiado uma bitmap "pixeliza" a imagem, porque a grelha fica visível.
  • As aplicações de referência do mercado são o Adobe Photoshop (pago) e o GIMP (livre e gratuito); os conceitos são os mesmos nos dois.

Nesta UC trabalhamos sempre em bitmap, para publicação em ecrãs.

A interface e a área de trabalho

Toda a aplicação de edição de imagem organiza-se da mesma forma:

Zona Função
Barra de menus acesso a todos os comandos
Caixa de ferramentas ferramentas de seleção, pintura, texto, forma
Barra de opções parâmetros da ferramenta ativa
Paletas (painéis) Camadas, Cor, Histórico, Ações
Área de trabalho (canvas) a imagem em edição

Reconhecer estas zonas no Photoshop e no GIMP é o primeiro passo para trabalhar em qualquer aplicação do mercado.

Ferramentas, paletas e atalhos de teclado

  • Grupos de ferramentas: seleção (retangular, laço, varinha mágica), pintura (pincel, balde), retoque (carimbo, correção), texto, forma e navegação (zoom, mão).
  • As paletas dão acesso rápido a camadas, cor, histórico e ações sem passar pelos menus.
  • Atalhos de teclado poupam tempo: Ctrl+Z anular, Ctrl+S guardar, Ctrl+T transformar, V mover, M seleção retangular, T texto.

Decorar meia dúzia de atalhos muda o ritmo de trabalho numa sessão de edição inteira.

Bloco 2 · Página de trabalho, resolução e canal de difusão

Formatar a página de trabalho

Antes de desenhar seja o que for, define-se o documento novo:

  • Largura e altura, em pixels para trabalho digital.
  • Resolução, em ppi (pixels por polegada).
  • Modo de cor: RGB para ecrã.
  • Fundo: branco, transparente ou uma cor.

Estas escolhas condicionam tudo o resto do trabalho; mudar o tamanho depois de começar obriga quase sempre a reajustar camadas e texto.

Resolução em função do canal de difusão

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

Canal Resolução Exemplo de tamanho
Página web 72-96 ppi banner 1920 × 600 px
Rede social (post) 72 ppi 1080 × 1080 px
Impressão 300 ppi A4 a 300 ppi
Ecrã de apresentação 96-150 ppi 1920 × 1080 px
Vídeo (audiovisual) 72 ppi (conta o tamanho em pixels) Full HD 1920×1080 px ou 4K 3840×2160 px

O ppi é só metadado, não é o que pesa no ficheiro, isso depende do tamanho em pixels. O ppi não é relevante para o ecrã, porque o ecrã só lê o tamanho em pixels e nunca mostra mais do que a sua própria resolução.

Bloco 3 · Sistemas de cor para a web

Sistemas de cor: RGB, CMYK e a escolha certa

  • RGB (vermelho, verde, azul): cor aditiva, usada em todos os ecrãs. É sempre o sistema de cor da web.
  • CMYK (ciano, magenta, amarelo, preto): cor subtrativa, usada na impressão.
  • Uma imagem CMYK aberta num browser fica com cores erradas; converte-se sempre para RGB antes de exportar para a web.

Regra da UC: suporte digital → RGB, sempre.

Cores seguras e códigos de cor

  • Cada cor RGB tem um código hexadecimal (#RRGGBB), usado em CSS e nas aplicações de edição.
  • O conceito histórico de cores seguras da web (216 cores) garantia que a cor aparecia igual em todos os monitores antigos, com paletas de 8 bits.
  • Hoje os ecrãs mostram milhões de cores, mas o hexadecimal continua a ser a forma universal de comunicar uma cor exata entre design e desenvolvimento.

O seletor de cor (color picker) mostra sempre o valor hexadecimal ao lado da amostra.

Dithering e previsão de cor

  • Dithering: técnica que simula cores que faltam numa paleta limitada, misturando pixels de duas cores próximas num padrão. Usa-se sobretudo em GIF (paleta máxima de 256 cores).
  • Previsão de cor: as caixas de diálogo de exportação mostram uma antevisão lado a lado do original e do resultado otimizado, com o peso final em KB.
  • Comparar as previsões antes de exportar evita surpresas de qualidade ou de tamanho do ficheiro.

Bloco 4 · Tipografia para suportes digitais

Tipografia para a web: introdução

O texto num suporte digital tem regras próprias:

  • Tem de ser legível em ecrãs pequenos e a distâncias variáveis.
  • As famílias tipográficas devem garantir leitura e funcionalidade no canal escolhido (site, rede social, app).
  • Fontes web-safe (Arial, Verdana, Georgia) estão sempre disponíveis; fontes personalizadas exigem que o texto seja convertido em imagem ou incorporado via CSS.

A escolha da tipografia é um dos critérios de desempenho desta UC.

Paletas de caracteres e de parágrafo

Paleta Controla
Caracteres tipo de letra, tamanho, entrelinha (leading), espaçamento (tracking/kerning)
Parágrafo alinhamento, avanço, espaço antes/depois

Um bom espaçamento entre linhas (entrelinha) facilita a leitura de blocos de texto mais longos, como legendas ou descrições de produto.

Criar e manipular texto

  • Texto pontual: uma linha ou palavra solta (títulos, botões).
  • Texto em área/parágrafo: caixa com largura definida, 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/rasteriza quando é preciso aplicar efeitos que a camada de texto não suporta.

Regra prática: manter o texto editável o máximo de tempo possível, só rasterizar no fim.

Bloco 5 · Camadas (layers)

Camadas: introdução

As camadas (layers) são folhas transparentes sobrepostas que compõem a imagem final.

  • Cada camada pode ser editada sem afetar as outras.
  • Têm opacidade (0-100%) e modos de mistura (blending modes) que combinam a cor com as camadas abaixo.
  • A ordem na pilha de camadas (de cima para baixo) determina o que fica visível.

Trabalhar em camadas é a base de toda a composição de imagem profissional.

Criar e manipular layers simples

  • Criar, duplicar, apagar e renomear camadas.
  • Agrupar camadas relacionadas numa pasta, para organizar composições complexas.
  • Bloquear uma camada para não a alterar por engano.
  • Reordenar arrastando na paleta de camadas, mudando o que fica por cima.

Nomear as camadas com clareza (logotipo, fundo, botão-cta) poupa tempo mais tarde, sobretudo em ficheiros com dezenas de camadas.

Tipos de layers e clipping groups

  • Camada normal: pixels de imagem.
  • Camada de texto: editável enquanto não for rasterizada.
  • Camada de forma (shape): vetorial dentro de um documento bitmap.
  • Camada de ajuste: aplica correções (brilho, cor) sem alterar os pixels originais.
  • Clipping group: recorta uma camada pela forma da camada imediatamente abaixo, útil para encaixar uma textura ou foto dentro de uma letra ou forma.

Bloco 6 · Estilos e shapes

Estilos: introdução

Os estilos de camada (layer styles) aplicam efeitos de forma não destrutiva e reutilizável:

  • Sombra projetada, relevo (bevel), contorno, brilho exterior/interior, sobreposição de cor ou gradiente.
  • Podem ser guardados, copiados e reaplicados noutras camadas ou noutros projetos.
  • Ao contrário de um efeito "achatado", um estilo continua editável a qualquer momento.

Um botão de site típico usa vários estilos combinados: sombra ligeira, contorno e gradiente subtil.

Criar e manipular estilos

  • Aplicar um estilo pela paleta de estilos de camada, ajustando ângulo, distância, cor e opacidade.
  • Copiar e colar um estilo de uma camada para outra, garantindo consistência visual.
  • Guardar um conjunto de estilos como predefinição, para reutilizar em projetos futuros (útil para manter a identidade visual de um cliente).

Shapes e as suas ferramentas

  • Ferramentas de forma (shape): 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.
  • Muito usadas para botões, ícones e molduras que depois recebem estilos de camada.
  • A ferramenta caneta (pen) desenha formas livres ponto a ponto, para contornos precisos.

Bloco 7 · Tratamento fotográfico

Manipulação de fotografias digitais

Ajustes essenciais numa fotografia antes de publicar:

  • Brilho e contraste, níveis (levels) e curvas (curves) para corrigir exposição.
  • Balanço de cor para corrigir dominantes de cor (foto demasiado amarela ou azulada).
  • Recorte (crop) e endireitar (straighten) para enquadrar bem.
  • Ferramentas de retoque: carimbo (clone stamp) e pincel de correção (healing brush) para remover manchas ou imperfeições.

Exemplo resolvido · corrigir uma foto de produto subexposta

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á à esquerda (escuro).
  2. Aplicar Níveis: arrastar o ponto branco para a esquerda até onde os dados terminam do lado direito do histograma, sem cortar detalhe.
  3. Ajustar o balanço de cor, removendo uma leve dominante amarela da luz artificial.
  4. Recortar para centrar o produto e remover fundo desnecessário.
  5. Aplicar leve nitidez (sharpen) final para compensar a suavização típica do redimensionamento e da captura (sensor e interpolação), não dos ajustes de cor.

O resultado é uma foto de produto clara, com cor fiel e pronta a otimizar para exportação.

Bloco 8 · Composição e imagens de fundo

Composição e manipulação de imagens

Compor é juntar várias imagens numa só, de forma coerente:

  • Seleções: retangular, laço, varinha mágica, seleção rápida, cada uma adequada a um tipo de contorno.
  • Máscaras de camada: escondem partes de uma camada sem apagar pixels, de forma reversível.
  • Regras de coerência visual: luz, perspetiva e escala têm de bater certo entre os elementos combinados, senão a composição "não cola".

Criação de imagens de fundo (background images)

  • Fundos contínuos (tileable): repetem-se sem costura visível, poupando peso de ficheiro em relação a uma imagem grande única.
  • Padrões (patterns) e gradientes: alternativas leves a fotografias para fundos de secções de um site.
  • Otimizar sempre o fundo para o menor peso possível, porque cobre grandes áreas do ecrã e pode ser o elemento mais pesado da página.

Bloco 9 · Otimização e formatos GIF/JPEG

Otimização: velocidade na web

Toda a imagem publicada num suporte digital tem de equilibrar qualidade visual e peso do ficheiro:

  • Ficheiros pesados demoram a carregar, prejudicam a experiência e o posicionamento em motores de busca.
  • A caixa de diálogo de exportação/gravar para web mostra a previsão e o peso final antes de confirmar.
  • Regra prática: comparar sempre duas ou três definições de qualidade e escolher a mais leve que ainda pareça boa.

Ficheiros JPEG: opções e otimização

  • Compressão com perdas (lossy): quanto menor a qualidade escolhida, mais pequeno o ficheiro e mais artefactos visuais (blocos, manchas).
  • Ideal para fotografias, com muitas cores e gradações suaves.
  • Não suporta transparência.
  • A escala de qualidade (0-100 ou baixa/média/alta) permite equilibrar peso e nitidez.

Ficheiros GIF: paleta, transparência e opções

  • Paleta limitada a 256 cores, sem perdas dentro dessa paleta (lossless).
  • Suporta transparência (um único nível, sem meios-tons) e animação.
  • Ideal para gráficos de cor plana: ícones, logótipos simples, botões, animações curtas.
  • Opções de exportação: número de cores, tipo de dithering e método de transparência.

GIF: transparência, anti-aliasing e máscaras

Um problema clássico de resolver: o halo (contorno esbranquiçado) à volta de um objeto recortado em GIF transparente.

  • Acontece porque o anti-aliasing cria pixels de transição de cor entre o objeto e o fundo original, e esses pixels ficam visíveis sobre o novo fundo.
  • 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.
  • Alternativa: usar máscaras cuidadosamente ajustadas ao contorno antes de exportar.

Resolver problemas de transparência é um dos critérios de desempenho explícitos da UC.

Guardar imagens para suportes audiovisuais

Uma imagem para um vídeo, uma emissão ou motion graphics segue uma lógica diferente da imagem impressa ou para a web:

  • O que importa é o tamanho em pixels, correspondente à resolução do projeto de vídeo (Full HD 1920 × 1080 px ou 4K 3840 × 2160 px); o ppi não é relevante.
  • Guardar sempre em RGB, num formato sem perdas ou de qualidade elevada (PNG, TIFF ou JPEG de alta qualidade), porque um ecrã grande evidencia qualquer artefacto de compressão.
  • Deixar uma zona de segurança de título (title-safe area) junto às bordas, sem elementos essenciais, porque alguns ecrãs de televisão cortam ligeiramente o fotograma.

GIF animados

  • Uma animação GIF é uma sequência de frames (fotogramas) reproduzidos em ciclo.
  • Cada frame tem um atraso (delay) próprio, em centésimos de segundo.
  • O loop pode repetir infinitamente ou um número definido de vezes.
  • Otimização: usar frames de diferença, guardando só o que muda entre um frame e o seguinte, reduzindo drasticamente o peso.

Exemplo resolvido · banner animado de 3 frames

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

Bloco 10 · Fatias, rollovers e mapas de imagem

Fatias (slices): tipos, criação e manipulação

  • Uma fatia (slice) divide uma imagem grande em regiões independentes, cada uma exportável no seu próprio formato e otimização.
  • Fatias de utilizador: desenhadas manualmente com a ferramenta de fatia.
  • Fatias automáticas: geradas pela aplicação a partir das fatias de utilizador, preenchendo o resto da imagem.
  • Cada fatia pode ir para JPEG, GIF ou PNG, consoante o conteúdo (foto vs gráfico plano).

Rollovers: slices baseadas em layers

Um rollover muda o aspeto de uma fatia da imagem quando o rato passa por cima, é clicado ou fica ativo.

  • Baseia-se em camadas com estados diferentes (normal, sobre, pressionado) associadas à mesma fatia.
  • A aplicação gera automaticamente o código e as imagens necessárias para a troca acontecer no browser.
  • Técnica clássica de botões de navegação de sites antes do CSS assumir esse papel.

Mapas de imagem no servidor e no cliente

Um mapa de imagem define zonas clicáveis dentro de uma única imagem, cada uma a apontar para um destino diferente.

  • Mapa no cliente: as coordenadas ficam no próprio HTML (<map> e <area>), o browser processa o clique.
  • Mapa no servidor: o browser envia as coordenadas do clique ao servidor, que decide o destino.
  • O mapa no cliente é hoje a opção habitual, por não depender de processamento no servidor.

Bloco 11 · Automatização

Automatização: ferramentas, ações e droplets

  • Ações (actions): uma sequência de passos gravada (ex.: redimensionar, aplicar nitidez, exportar), que se repete com um clique.
  • Droplets: uma ação transformada num pequeno ficheiro executável; basta arrastar um lote de imagens para cima dele para processar todas de uma vez.
  • Processamento em lote (batch): aplica a mesma ação a uma pasta inteira de imagens.

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 50 vezes o mesmo trabalho.

Bloco 12 · Gestão de ficheiros e segurança no trabalho

Importação/exportação e implementação em HTML

  • Depois de fatiar e otimizar, a aplicação pode exportar HTML e imagens juntos, com o código de referência a cada fatia (<img src="...">) e, se aplicável, o mapa de imagem correspondente.
  • Este HTML gerado é um ponto de partida, normalmente ajustado depois no editor de código ou no CMS do site.
  • Importar imagens de outras fontes (bancos de imagens, câmaras, telemóveis) exige verificar sempre a resolução e o modo de cor antes de continuar o trabalho.

Gestão de ficheiros digitais e arquivo

  • Arquitetura de pastas: separar sempre originais, trabalho (PSD/XCF editável) e exportados (finais para publicação).
  • Nomenclatura de ficheiros consistente: nome do projeto, versão, data (loja-banner-v2-20260930.psd).
  • Manter o ficheiro fonte editável (com camadas) mesmo depois de exportar; sem ele, qualquer alteração futura implica refazer tudo de raiz.
  • Cópias de segurança (backup) regulares do trabalho em curso.

Normas de segurança e saúde no trabalho

Trabalhar muitas horas ao computador exige cuidados de ergonomia e saúde ocupacional:

  • Postura: ecrã à altura dos olhos, costas apoiadas, antebraços paralelos à secretária.
  • Pausas regulares: regra 20-20-20 (a cada 20 minutos, olhar 20 segundos para algo a 6 metros de distância, cerca de 20 pés).
  • Iluminação adequada, sem reflexos no ecrã, para prevenir fadiga visual.
  • Cumprir a legislação portuguesa de segurança e saúde no trabalho aplicável a postos de trabalho com ecrãs de visualização.

Recapitulando

  • A imagem bitmap organiza-se em pixels; o documento define-se pelo canal de difusão (resolução, sistema de cor RGB).
  • Camadas, estilos e shapes dão estrutura e flexibilidade não destrutiva à composição.
  • Tratamento fotográfico e composição combinam imagens de forma coerente.
  • Otimização (JPEG para fotos, GIF para cor plana e animação) equilibra qualidade e peso.
  • Fatias, rollovers e mapas de imagem preparam a imagem para a interação na web.
  • Automatização, gestão de ficheiros e segurança no trabalho fecham um fluxo de trabalho profissional.

Próximo: fichas e mini-projecto, produzir um conjunto de imagens bitmap de raiz.

NOTAS DO PROFESSOR - enfatizar: bitmap = grelha de pixels, cada um guarda a sua cor. Não há "fórmula", há memória. - erro comum/pergunta: alunos confundem bitmap com "imagem de baixa qualidade". Uma bitmap pode ter altíssima resolução, o problema é ampliá-la além do tamanho original. - exemplo/analogia: uma bitmap é como um mosaico de azulejos, cada quadrado tem uma cor fixa; um vetor é como uma planta arquitetónica, descreve formas, não quadrados.

NOTAS DO PROFESSOR - enfatizar: a organização da interface é praticamente universal entre aplicações de edição de imagem. - erro comum/pergunta: alunos "perdem" paletas fechadas sem querer; mostrar como as repor pelo menu Janela/Window. - exemplo/analogia: comparar lado a lado o Photoshop e o GIMP, apontando as mesmas zonas com nomes diferentes.

NOTAS DO PROFESSOR - enfatizar: velocidade de trabalho profissional vem dos atalhos, não do rato a percorrer menus. - erro comum/pergunta: perguntar à turma quantas vezes já usaram Ctrl+Z hoje; normalizar o erro e a correção rápida. - exemplo/analogia: os atalhos são como os comandos de um carro, quem conduz todos os dias não olha para eles, usa-os de cor.

NOTAS DO PROFESSOR - enfatizar: decidir o documento ANTES de começar poupa retrabalho. - erro comum/pergunta: começar a trabalhar num documento demasiado pequeno e depois ampliar, perdendo qualidade. - exemplo/analogia: é como escolher o tamanho da tela antes de pintar um quadro, não se estica depois.

NOTAS DO PROFESSOR - enfatizar: mais ppi não é sempre melhor, tem de corresponder ao canal de saída. - erro comum/pergunta: alunos usam sempre 300 ppi "para garantir qualidade" na web, sem perceber que o ppi é só metadado, não afeta peso nem qualidade no ecrã: o que conta é o tamanho em pixels. - exemplo/analogia: é como enviar um vídeo em 4K a alguém que só tem um telemóvel antigo, a qualidade extra perde-se pelo caminho.

NOTAS DO PROFESSOR - enfatizar: a regra é simples e não tem exceções nesta UC, digital = RGB. - erro comum/pergunta: trazer um ficheiro CMYK de um trabalho de design gráfico e esquecer de converter antes de publicar online. - exemplo/analogia: RGB é luz que se soma (ecrã apagado é preto); CMYK é tinta que se subtrai (papel em branco reflete tudo, tinta a mais escurece).

NOTAS DO PROFESSOR - enfatizar: o código hexadecimal é a "matrícula" universal de uma cor entre ferramentas diferentes. - erro comum/pergunta: escolher uma cor "a olho" em vez de copiar o código hexadecimal da marca, gerando inconsistências entre materiais. - exemplo/analogia: o hexadecimal é como o código postal de uma cor, aponta sempre para o mesmo sítio.

NOTAS DO PROFESSOR - enfatizar: dithering troca qualidade percebida por menos cores reais, útil quando o formato limita a paleta. - erro comum/pergunta: exportar sem olhar à previsão e só perceber o problema depois de publicado. - exemplo/analogia: dithering é como misturar pontos de duas tintas de parede para imitar uma terceira cor que não existe na loja.

NOTAS DO PROFESSOR - enfatizar: a tipografia para digital prioriza legibilidade sobre sofisticação decorativa. - erro comum/pergunta: escolher uma fonte muito fina ou ornamentada que se torna ilegível num ecrã pequeno. - exemplo/analogia: pensar num letreiro de rua, tem de se ler a andar, não só quando se está parado em frente.

NOTAS DO PROFESSOR - enfatizar: entrelinha e espaçamento fazem tanta diferença na legibilidade como a fonte escolhida. - erro comum/pergunta: texto todo colado, sem entrelinha ajustada, difícil de ler em blocos maiores. - exemplo/analogia: a entrelinha é como o espaço entre prateleiras de uma estante, sem espaço os livros ficam ilegíveis.

NOTAS DO PROFESSOR - enfatizar: rasterizar cedo demais impede corrigir gralhas sem refazer o efeito todo. - erro comum/pergunta: rasterizar o texto e só depois notar um erro ortográfico. - exemplo/analogia: é como imprimir um rascunho em vez de guardar o documento editável, depois só dá para corrigir a régua.

NOTAS DO PROFESSOR - enfatizar: trabalhar sem camadas (tudo achatado) torna qualquer correção depois quase impossível. - erro comum/pergunta: perguntar porque é que mudar a opacidade de uma camada não afeta as outras. - exemplo/analogia: as camadas são como folhas de acetato sobrepostas num projetor, cada uma com o seu desenho.

NOTAS DO PROFESSOR - enfatizar: nomear camadas é uma prática de organização, uma das atitudes avaliadas nesta UC. - erro comum/pergunta: ficheiros com "Camada 1", "Camada 2", "Camada 47" sem nenhum nome, impossíveis de navegar. - exemplo/analogia: é como etiquetar caixas de mudança, sem etiqueta ninguém encontra nada depois.

NOTAS DO PROFESSOR - enfatizar: clipping group é uma técnica muito usada para "vestir" texto ou formas com imagens. - erro comum/pergunta: confundir clipping group com máscara de camada, são parecidos mas não são a mesma coisa. - exemplo/analogia: o clipping group é como um molde de bolachas, a forma de baixo recorta o que está em cima.

NOTAS DO PROFESSOR - enfatizar: não destrutivo significa que se pode voltar atrás e mudar parâmetros sem perder qualidade. - erro comum/pergunta: aplicar um efeito "achatando" a camada e depois não conseguir ajustá-lo. - exemplo/analogia: um estilo é como um filtro reaplicável de Instagram, não uma edição definitiva na foto original.

NOTAS DO PROFESSOR - enfatizar: consistência visual entre elementos vem de reutilizar os mesmos estilos, não de repetir manualmente os valores. - erro comum/pergunta: cada botão do site com uma sombra ligeiramente diferente, porque foi aplicada "a olho" cada vez. - exemplo/analogia: um estilo guardado é como uma receita escrita, qualquer pessoa da equipa obtém o mesmo resultado.

NOTAS DO PROFESSOR - enfatizar: shapes são vetoriais mesmo num documento bitmap, por isso não "pixelizam" ao redimensionar. - erro comum/pergunta: desenhar um botão com a ferramenta de pintura em vez da ferramenta de forma, perdendo a possibilidade de o redimensionar depois sem perda de qualidade. - exemplo/analogia: uma shape é como um molde de corte reutilizável; uma pintura livre é como desenhar à mão de cada vez.

NOTAS DO PROFESSOR - enfatizar: níveis e curvas dão controlo muito mais fino do que o simples brilho/contraste. - erro comum/pergunta: exagerar no contraste e "queimar" as zonas claras da foto, perdendo detalhe. - exemplo/analogia: níveis são como ajustar o volume de graves/médios/agudos, curvas são o equalizador fino de cada faixa.

NOTAS DO PROFESSOR - enfatizar: seguir os passos por ordem evita perder informação: ajustar tons antes de recortar, recortar antes de aplicar nitidez. - erro comum/pergunta: aplicar nitidez logo no início e ampliar defeitos que só depois se corrigiriam. - exemplo/analogia: o histograma é como o mostrador de um forno, mostra onde está a "temperatura" tonal da imagem.

NOTAS DO PROFESSOR - enfatizar: uma boa composição obedece às mesmas regras de luz e perspetiva da fotografia original. - erro comum/pergunta: colar um objeto com sombra a vir de um lado diferente da luz da imagem de fundo, denunciando a montagem. - exemplo/analogia: compor imagens é como montar um cenário de teatro, tudo tem de parecer pertencer ao mesmo espaço.

NOTAS DO PROFESSOR - enfatizar: um fundo mal otimizado é muitas vezes o maior culpado pela lentidão de uma página. - erro comum/pergunta: usar uma fotografia de alta resolução como fundo repetido, quando um padrão simples resolveria com muito menos peso. - exemplo/analogia: um fundo tileable é como um papel de parede, um único padrão pequeno repete-se e cobre a parede inteira.

NOTAS DO PROFESSOR - enfatizar: a otimização não é um passo opcional, é um critério de desempenho da UC. - erro comum/pergunta: exportar sempre na qualidade máxima "para garantir", sem comparar o peso resultante. - exemplo/analogia: é como fazer as malas para uma viagem de avião de baixo custo, cada quilo extra tem um custo real.

NOTAS DO PROFESSOR - enfatizar: JPEG é a escolha certa para fotografias, nunca para gráficos com texto ou linhas finas. - erro comum/pergunta: exportar um logótipo com texto em JPEG e ver o texto ficar com halos e manchas por causa da compressão. - exemplo/analogia: comprimir demasiado um JPEG é como fotocopiar uma fotocópia várias vezes, perde-se nitidez a cada geração.

NOTAS DO PROFESSOR - enfatizar: GIF é a escolha certa quando é preciso transparência simples ou animação, não para fotografias. - erro comum/pergunta: usar GIF para uma fotografia e obter um ficheiro pesado e com cores banded (bandas visíveis). - exemplo/analogia: GIF é como uma caixa de lápis de cor com só 256 cores; JPEG é como uma caixa com milhões, mas nunca perfeitamente nítida.

NOTAS DO PROFESSOR - enfatizar: este é o critério de desempenho "resolvendo problemas com a transparência de imagens animadas", trazer sempre um exemplo visual. - erro comum/pergunta: exportar um GIF transparente sem definir o matte e obter uma auréola clara à volta do objeto quando colocado sobre fundo escuro. - exemplo/analogia: é como recortar um autocolante com tesoura, se a margem branca ficar, nota-se sempre que foi recortado.

NOTAS DO PROFESSOR - enfatizar: guardar imagens para suportes audiovisuais é uma aptidão própria desta UC, distinta da exportação para web, redes sociais ou impressão. - erro comum/pergunta: aplicar as mesmas regras da web (72 ppi "pequeno") sem verificar o tamanho em pixels exigido pelo projeto de vídeo, entregando uma imagem pequena de mais para o ecrã. - exemplo/analogia: é como entregar uma fotografia em vez de um cartaz quando alguém pediu um cartaz, o tamanho em pixels tem de bater certo com o ecrã final.

NOTAS DO PROFESSOR - enfatizar: a otimização por frames de diferença é o que separa um GIF leve de um GIF pesado com o mesmo conteúdo visual. - erro comum/pergunta: esquecer de definir o loop e a animação parar ao fim de um único ciclo. - exemplo/analogia: um GIF animado é como um flipbook (livro de páginas que se folheiam rápido), cada página é um frame.

NOTAS DO PROFESSOR - enfatizar: fatiar permite otimizar cada parte da imagem com o formato mais adequado a cada uma. - erro comum/pergunta: exportar uma imagem inteira num único formato quando tem zonas muito diferentes (foto e texto plano). - exemplo/analogia: fatiar é como cortar uma pizza em pedaços para servir cada convidado com o que prefere, mas a pizza é a mesma imagem.

NOTAS DO PROFESSOR - enfatizar: o conceito de rollover (mudar de estado ao interagir) continua atual, hoje faz-se sobretudo em CSS, mas o raciocínio de "estados de um botão" é o mesmo. - erro comum/pergunta: esquecer de criar o estado "sobre" numa camada própria e o rollover não ter o que mostrar. - exemplo/analogia: um rollover é como um interruptor com luz, muda de aspeto quando se lhe toca.

NOTAS DO PROFESSOR - enfatizar: distinguir onde a decisão do clique é tomada, no browser (cliente) ou no servidor. - erro comum/pergunta: confundir mapa de imagem com fatias, são técnicas diferentes: o mapa usa uma única imagem com zonas, as fatias dividem a imagem em várias. - exemplo/analogia: um mapa de imagem é como um mapa do metro com zonas clicáveis; cada estação aponta para uma página diferente.

NOTAS DO PROFESSOR - enfatizar: automatizar tarefas repetitivas é rigor e eficiência, não preguiça, e evita erros de inconsistência entre imagens. - erro comum/pergunta: gravar a ação sobre uma imagem já alterada e ela sair diferente das restantes; gravar sempre a partir de um estado limpo. - exemplo/analogia: um droplet é como um carimbo, aplica sempre exatamente a mesma marca, sem variação manual.

NOTAS DO PROFESSOR - enfatizar: o HTML exportado é um rascunho técnico, não o código final de produção. - erro comum/pergunta: importar uma imagem em CMYK vinda de um trabalho de impressão e esquecer de a converter para RGB. - exemplo/analogia: exportar para HTML é como imprimir um esboço, serve de base, mas alguém revê antes de publicar.

NOTAS DO PROFESSOR - enfatizar: perder o ficheiro fonte com camadas é o erro mais caro nesta profissão, o exportado sozinho não se edita. - erro comum/pergunta: guardar só o JPEG final e apagar o PSD com camadas "para poupar espaço". - exemplo/analogia: o ficheiro fonte é como a receita original de um prato, o exportado é só o prato servido, sem a receita não se repete.

NOTAS DO PROFESSOR - enfatizar: estas normas são conteúdo avaliável da UC, não um extra de bem-estar. - erro comum/pergunta: perguntar à turma há quanto tempo estão sentados sem pausa durante a própria aula. - exemplo/analogia: cuidar da postura é como afinar uma ferramenta de trabalho, o corpo é o instrumento principal de quem edita imagem todos os dias.