NOTAS DO PROFESSOR 📖 RGB vs CMYK A distinção aditivo vs subtractivo é a base de tudo o que vem a seguir e costuma gerar confusão. Convém explicar fisicamente: o RGB soma luz (ecrã apagado é preto), o CMYK soma tinta (papel sem tinta é branco). O ponto prático mais importante é o gamut menor do CMYK, que explica porque certas cores vibrantes do ecrã nunca saem iguais na impressão. 🗣️ Pontos a desenvolver oralmente • Demonstrar com luz e tinta a diferença entre somar luz e somar pigmento • Mostrar uma cor saturada de ecrã que "morre" ao converter para CMYK • Reforçar a regra de converter para CMYK antes de enviar à gráfica

NOTAS DO PROFESSOR 📖 Lab e perfis ICC Este slide introduz a gestão de cor profissional: o Lab como espaço universal de referência e os perfis ICC como "tradutores" entre dispositivos. A mensagem prática mais útil é a regra simples — sRGB para web, Adobe RGB só para fluxo profissional de impressão. Convém avisar que usar Adobe RGB na web resulta em cores lavadas nos monitores comuns, um erro frequente. 🗣️ Pontos a desenvolver oralmente • Explicar o perfil ICC como descrição de como um dispositivo "vê" cor • Fixar a regra sRGB para web, Adobe RGB para impressão profissional • Mostrar o efeito de exportar Adobe RGB para a web (cores baças)

NOTAS DO PROFESSOR 📖 PPI vs DPI A confusão entre PPI e DPI é universal, mesmo entre profissionais, e este slide existe para a desfazer: PPI é do ficheiro/ecrã, DPI é da máquina de imprimir. O conceito-chave a transmitir é que o PPI só faz sentido associado a um tamanho físico — uma imagem não tem "qualidade" absoluta, tem píxeis que se distribuem por mais ou menos centímetros. Isto prepara o cálculo de resolução do slide seguinte. 🗣️ Pontos a desenvolver oralmente • Corrigir a confusão comum entre os dois termos com clareza • Explicar que o mesmo ficheiro pode ser nítido ou pixelizado consoante o tamanho • Mostrar que para ecrã o que conta são os píxeis totais, não o PPI

NOTAS DO PROFESSOR 📖 Resolução para impressão A tabela mostra que o PPI necessário depende da distância de visualização: 300 PPI para uma revista que se lê de perto, mas 72-100 PPI bastam para um outdoor visto a metros. É um princípio contraintuitivo que vale a pena destacar — mais não é sempre melhor. A fórmula cm/2,54 × PPI deve ser praticada com a turma para que saibam dimensionar qualquer trabalho. 🗣️ Pontos a desenvolver oralmente • Explicar porque um outdoor pode ter menos PPI do que uma revista • Resolver o cálculo de píxeis para um trabalho concreto da turma • Avisar contra ampliar uma imagem pequena para um tamanho grande

NOTAS DO PROFESSOR 📖 Mapa de decisão de formatos Esta tabela é uma das mais úteis do curso: a escolha do formato certo resolve metade dos problemas de qualidade e peso. Os dois eixos a fixar são compressão (com ou sem perdas) e transparência, que decidem entre JPEG, PNG, WebP e SVG. Convém treinar a decisão com casos concretos: "logo com fundo transparente?", "fotografia para web?". 🗣️ Pontos a desenvolver oralmente • Fazer perguntas rápidas de "que formato usar?" para vários cenários • Destacar o WebP como substituto moderno de JPEG e PNG na web • Explicar porque um logo deve ser SVG sempre que possível

NOTAS DO PROFESSOR 📖 JPEG e compressão com perdas O JPEG é o formato mais usado do mundo e também o mais mal usado. A lição crítica é o generation loss: cada gravação degrada a imagem, por isso nunca se trabalha em JPEG — usa-se TIFF ou PSD e só se exporta para JPEG no fim. Mostrar lado a lado uma imagem a qualidade 90 e a 40 deixa os artefactos óbvios e fixa a mensagem. 🗣️ Pontos a desenvolver oralmente • Demonstrar a degradação progressiva ao guardar JPEG várias vezes • Mostrar visualmente os artefactos de blockiness em qualidade baixa • Reforçar a regra de nunca usar JPEG como formato de trabalho

NOTAS DO PROFESSOR 📖 Optimização de imagens para web As imagens são, quase sempre, o maior peso de uma página, pelo que otimizá-las é o caminho mais rápido para um site veloz. O erro mais comum dos alunos é o passo 1 — usar CSS para encolher uma imagem enorme em vez de a redimensionar de facto, carregando megabytes inúteis. Convém seguir os quatro passos por ordem como uma receita aplicável a qualquer projeto. 🗣️ Pontos a desenvolver oralmente • Mostrar o desperdício de servir uma imagem de 4000px exibida a 800px • Usar uma ferramenta como o Squoosh ao vivo para comprimir uma imagem • Ligar a otimização ao impacto direto nos Core Web Vitals

NOTAS DO PROFESSOR 📖 Responsive images e srcset O srcset resolve um problema real: enviar a imagem do tamanho certo para cada dispositivo, poupando dados em telemóveis e mantendo nitidez em ecrãs grandes. Convém explicar que o browser é que escolhe, com base nas pistas de sizes que o programador fornece. O loading="lazy" é o complemento perfeito — só carrega o que vai ser visto, melhorando o arranque da página. 🗣️ Pontos a desenvolver oralmente • Explicar como o browser usa srcset e sizes para escolher a imagem • Demonstrar a poupança de dados num telemóvel face a um ecrã grande • Mostrar o efeito do loading="lazy" no tempo de carregamento inicial

NOTAS DO PROFESSOR 📖 Core Web Vitals relacionados com imagens As imagens influenciam diretamente dois Web Vitals: o LCP, porque o maior elemento é muitas vezes uma imagem, e o CLS, quando imagens sem dimensões fazem o layout saltar. A solução para o CLS é simples e memorável — definir sempre width e height. Convém demonstrar uma análise no PageSpeed Insights de um site real para que vejam estes números na prática. 🗣️ Pontos a desenvolver oralmente • Mostrar o "salto" de layout causado por imagens sem dimensões • Reforçar a regra de definir sempre width e height • Correr uma análise Lighthouse ao vivo e interpretar o resultado

NOTAS DO PROFESSOR 📖 Preparação para impressão Esta checklist é a diferença entre um trabalho que sai como esperado e um desastre caro na gráfica. Cada ponto resolve um erro clássico: cor errada, baixa resolução, bordas brancas por falta de sangria, fontes em falta. Vale a pena que os alunos a guardem como protocolo a percorrer sempre antes de qualquer envio para impressão. 🗣️ Pontos a desenvolver oralmente • Percorrer a checklist ponto a ponto com um exemplo de cartaz • Explicar porque se convertem as fontes em curvas antes de entregar • Apresentar o PDF/X como o "formato seguro" exigido pelas gráficas

NOTAS DO PROFESSOR 📖 Sangria e zona de segurança Estes dois conceitos existem porque o corte do papel nunca é perfeito ao milímetro. A sangria garante que o fundo chega à borda mesmo se o corte desviar; a zona de segurança garante que nenhum texto importante é cortado por engano. Mostrar um trabalho real com marcas de corte ajuda muito a fixar a diferença entre as três linhas do diagrama. 🗣️ Pontos a desenvolver oralmente • Explicar porque o corte da gráfica tem sempre uma pequena tolerância • Mostrar a diferença entre fundo que sangra e elemento dentro da zona segura • Dar o valor prático de 3-5mm para sangria e margem de segurança

NOTAS DO PROFESSOR 📖 Aspect ratios e resoluções por plataforma Cada rede social impõe os seus formatos, e usar o errado resulta em imagens cortadas ou desfocadas — um erro que prejudica a marca. Mais do que decorar a tabela, importa que os alunos saibam onde a consultar e percebam a lógica: o vertical 9:16 domina o conteúdo de stories e mobile. A safe zone das Stories é um detalhe prático que evita texto tapado pela interface. 🗣️ Pontos a desenvolver oralmente • Mostrar o que acontece a uma imagem com o ratio errado em cada rede • Explicar a predominância do formato vertical 9:16 no consumo mobile • Alertar para a safe zone das Stories e os elementos da interface

NOTAS DO PROFESSOR 📖 Imagem para vídeo O vídeo traz exigências próprias que a imagem estática não tem: píxeis quadrados para evitar distorção e safe zones para garantir que nada importante é cortado em diferentes ecrãs. A escolha de formato de exportação é prática — PNG com alfa para grafismos sobre vídeo, sequências PNG para animação. Convém ligar este slide ao trabalho de quem produz lower thirds e grafismos para vídeo. 🗣️ Pontos a desenvolver oralmente • Explicar a distorção que píxeis não-quadrados causam no vídeo • Mostrar as action safe e title safe zones num frame de exemplo • Justificar o PNG com transparência para logos e lower thirds

NOTAS DO PROFESSOR 📖 Síntese: a imagem certa no suporte certo A frase de fecho resume a competência central da unidade: cada suporte exige decisões próprias de cor, resolução e formato, e errá-las tem custo profissional. Vale a pena usar o resumo como checklist final, pedindo aos alunos que, dado um destino (web, gráfica, Instagram), enumerem as decisões corretas. É o momento de consolidar a mentalidade de adaptar a imagem ao meio, não o contrário. 🗣️ Pontos a desenvolver oralmente • Dar um destino ao acaso e pedir as decisões de cor, resolução e formato • Rever os pares essenciais: RGB/ecrã, CMYK/impressão, sRGB/web • Recolher dúvidas antes do projeto prático de produção de imagens