UC02208 · Editar imagens vetoriais
Aulify · Componente Tecnológica

Editar imagens vetoriais

Princípios da imagem vetorial, curvas de Bézier, composição, ferramentas digitais e exportação
UC02208 · 50 horas · 4,5 pontos crédito Nível 4 · Curso Técnico/a de Multimédia Ref. SNQ · 213RA104
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Resultados de aprendizagem

No final desta unidade, o/a aluno/a será capaz de:

  1. Criar imagens vetoriais a partir de bitmaps
  2. Trabalhar e gerir pranchetas (artboards)
  3. Criar layouts vetoriais
  4. Exportar e imprimir imagens nos formatos adequados
Critérios oficiais de desempenho Definir a narrativa visual · Selecionar soluções visuais adequadas · Aplicar técnicas de representação · Utilizar ferramentas adequadas
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Plano e avaliação

Bloco Conteúdo Aulas
1 Ilustração: contexto, tipologias, princípios 3
2 Bitmap vs vetor · curvas de Bézier · cor 5
3 Ferramentas Inkscape · objectos, camadas 6
4 Composição e layout vetorial 6
5 Exportação · impressão · projecto 5

**Avaliação · ** Modelo CP: Conhecimentos e Capacidades (80%) + Atitudes e Valores (20%)

Componentes esperadas: 1 ficha escrita · 2 trabalhos práticos · 1 projeto final · observação contínua

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 1 · Fundamentos

Ilustração e imagem vetorial

Contexto histórico, tipologias e relevância profissional.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

O que é ilustração — contextualização

A ilustração é toda a imagem produzida com intenção comunicativa, complementando, esclarecendo ou substituindo um discurso textual.

Da pintura rupestre aos memes da internet, a humanidade comunica visualmente há mais de 40.000 anos. A ilustração digital é apenas o último capítulo de uma tradição contínua.

Marcos históricos:

  • Iluminuras medievais — manuscritos religiosos
  • Gravura de Gutenberg — séc. XV, reprodução em massa
  • Cartazes de Toulouse-Lautrec — final séc. XIX
  • Cómics e mass-media — séc. XX
  • Adobe Illustrator 1.0 — 1987, nascimento do vetor digital
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Tipologias de ilustração

Tipologia Aplicação Características técnicas
Editorial Revistas, jornais, livros Composição conceptual, narrativa visual forte
Científica / técnica Manuais, anatomia, engenharia Rigor, legibilidade, precisão dimensional
Infantil Livros, álbuns ilustrados Cores saturadas, formas simplificadas
Publicitária Cartazes, embalagens, branding Impacto imediato, hierarquia
Cartográfica Mapas, sinalética, infografia Convenções padronizadas
Ícones / UI Apps, sítios web, dashboards Escala variável (16px a 1024px), consistência
Animação Frames de motion graphics Decomposição em camadas
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 1 · Fundamentos

Bitmap vs Vetor

A distinção mais importante de toda a edição digital — e o tema mais mal compreendido pelos iniciantes.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Bitmap (raster) vs Vetor

Bitmap (raster)

Imagem composta por uma grelha de pixels com cor individual.

  • Formatos: JPG, PNG, GIF, TIFF, BMP, WEBP
  • Software: Photoshop, GIMP, Krita
  • Resolução fixa (largura × altura em pixels)
  • Perde qualidade ao ampliar (pixelização)
  • Ideal para: fotografia, pinturas digitais, texturas

Vetor

Imagem composta por objectos matemáticos (linhas, curvas, formas).

  • Formatos: SVG, AI, EPS, PDF, CDR
  • Software: Illustrator, Inkscape, Affinity Designer
  • Escalável sem perda de qualidade
  • Ficheiro tipicamente mais leve
  • Ideal para: logótipos, ícones, ilustração técnica, tipografia
Bitmap · grelha de pixels 10×4 pixels · 40 bytes de dados Vetor · forma matemática <circle cx="100" cy="40" r="40"/> ~40 caracteres · escala infinita
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Quando usar cada um

Tipo de imagem Bitmap Vetor
Fotografia ✓ ✗
Logótipo ✗ ✓
Ícone para app ✗ ✓
Pintura digital realista ✓ ✗
Ilustração editorial ✓ ou ✓ ✓ ou ✓
Mapa / infografia ✗ ✓
Sinalética / outdoor ✗ ✓
Tipografia (texto) ✗ ✓
Textura para 3D ✓ ✗
Banner para web depende depende

Regra prática: se vai ser escalado (impressão grande, ampliado, redimensionado) → vetor. Se for detalhe fotográfico → bitmap.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Da bitmap ao vetor · raster tracing

Converter uma imagem bitmap em vetor — útil para digitalizar esboços a lápis, recuperar logos antigos, vectorizar fotos para estilização.

Métodos:

  1. Tracing automático — Caminho → Vetorizar Bitmap no Inkscape (Image Trace no Illustrator)
  2. Redesenho manual — usar o bitmap como referência e desenhar por cima com a ferramenta Caneta (Bézier)
Cuidado · vectorizar nem sempre é ideal Uma fotografia vectorizada perde detalhe. Use vectorização apenas quando o objectivo é simplificação visual ou ilustração estilizada.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 2 · Geometria

Curvas de Bézier

A linguagem matemática de todo o desenho vetorial.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Bézier · origem e geometria

Inventadas por Pierre Bézier (1962, engenheiro Renault) e Paul de Casteljau (Citroën, em paralelo) para desenhar carrocerias. Hoje suportam toda a tipografia e ilustração digital.

Uma curva de Bézier cúbica é definida por 4 pontos:

  • 2 nós (extremidades) — P0 e P3
  • 2 alças (pontos de controlo) — P1 e P2
P₀ nó P₃ nó P₁ alça P₂ alça

Em SVG: <path d="M 80 200 C 80 60, 480 60, 600 200" />

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Tipos de nó

Cada nó pode ter dois comportamentos das suas alças:

Simétrico

Ambas as alças com o mesmo comprimento e ângulo. Curva muito suave.

Assimétrico (suave)

Mesma direcção (ângulo) mas comprimentos diferentes. Suave mas mais "puxada" para um lado.

Vértice (cusp)

Alças independentes — podem apontar em ângulos diferentes. Cria canto ou ponta.

Simétrico Suave Vértice (cusp)
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Como desenhar com Bézier · workflow

  1. Definir os pontos âncora (nós) onde a curva muda significativamente
  2. Para cada nó, decidir o tipo (cusp / suave / simétrico)
  3. Ajustar as alças para esculpir a curva entre nós
  4. Refinar com a ferramenta Nó (N no Inkscape, A no Illustrator)
Regra dos poucos nós Quanto menos nós, mais limpa a curva. Um círculo precisa de só 4 nós. Uma curva em "S" precisa de 3. Se estás com mais de 10 nós num desenho simples, simplifica.
Atalhos vitais (Inkscape) B ferramenta Caneta · N ferramenta Nó · Ctrl+click adicionar nó · Delete remover · Shift+drag mover sem mudar tipo
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 2 · Cor

Cor e gradientes

Modelos cromáticos, gradientes e a função emocional da cor no design.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Modelos de cor

Modelo Domínio Quando usar
RGB (Red, Green, Blue) Ecrãs · 0-255 ou 0%-100% Tudo o que aparece em ecrã: web, redes sociais, vídeo
CMYK (Cyan, Magenta, Yellow, Key/Black) Impressão · 0%-100% Tudo o que vai para impressora ou prelo: cartazes, livros, embalagens
HSL (Hue, Saturation, Lightness) Conceptual · circular Ajuste intuitivo de cor (escolher tom, depois intensidade)
Pantone Sistema universal de tintas Branding crítico (logos onde a cor exacta é vital)
Hex Representação RGB · #6366f1 Web design, código CSS
Cuidado · RGB ≠ CMYK Uma cor RGB vibrante (ex: azul eléctrico) pode parecer baça quando impressa em CMYK. Sempre preparar o ficheiro no modelo certo antes da exportação final.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Gradientes

Transição contínua entre duas ou mais cores. Três tipos principais:

Linear

Cor varia ao longo de uma direcção (vertical, horizontal, diagonal).



Radial

Cor varia a partir de um centro para fora.



Malha (mesh)

Múltiplos pontos de cor em grelha — quase pintura digital em vetor.



Estilo moderno Gradientes coloridos voltaram em força no design de 2020-2026 (Instagram, Stripe, Linear). Conhecer bem é diferenciador.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 3 · Software

Inkscape · ambiente de trabalho

Software open-source para edição vetorial — alternativa profissional ao Illustrator.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Interface principal

┌─────────────────────────────────────────────────────────────────┐
│ Menu (Arquivo, Editar, Objecto, Caminho, Texto, Filtros, ...)  │
├──┬──────────────────────────────────────────────────────────┬───┤
│  │ ◢◣ Régua superior                                        │   │
│F │ ┌──────────────────────────────────────────────────┐    │ P │
│e │ │                                                  │    │ a │
│r │ │                                                  │    │ i │
│r │ │                                                  │    │ n │
│a │ │           PRANCHETA / DOCUMENTO                  │    │ é │
│m │ │           ( área de trabalho )                   │    │ i │
│e │ │                                                  │    │ s │
│n │ │                                                  │    │   │
│t │ │                                                  │    │ ( │
│a │ │                                                  │    │ c │
│s │ └──────────────────────────────────────────────────┘    │ a │
│  │ ◢◣ Régua lateral                                        │ m │
├──┴──────────────────────────────────────────────────────────┴───┤
│ Barra de estado · zoom, coordenadas, camada actual              │
└─────────────────────────────────────────────────────────────────┘
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Ferramentas essenciais

Atalho Ferramenta Para quê
S Selector Seleccionar, mover, redimensionar objectos
N Editar nós Manipular caminhos (Bézier)
R Rectângulo Desenhar rectângulos
E Elipse Desenhar círculos/elipses
* Estrela / polígono Formas regulares
B Caneta (Bézier) Desenhar caminhos livres
P Lápis Desenho à mão livre (raster-style)
C Caligrafia Traços com largura variável
T Texto Adicionar texto
G Gradiente Aplicar/editar gradientes
D Conta-gotas Capturar cor
Z Zoom Ampliar
Space Pan Arrastar vista
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Pranchetas · artboards

Múltiplas zonas de trabalho dentro de um só ficheiro. Útil para:

  • Mockups multi-formato: banner web + cartaz A3 + post Instagram, todos no mesmo ficheiro
  • Variantes de logo: versão horizontal / vertical / monocromática
  • Manuais de identidade visual: páginas múltiplas
  • Storyboards: sequência de quadros
Inkscape vs Illustrator Em Inkscape, as pranchetas chamam-se "páginas" (a partir da v1.2). Para criar: Arquivo → Propriedades do Documento → Páginas → Adicionar. No Illustrator é o painel Artboards.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 4 · Composição

Layout e composição vetorial

Princípios visuais e operações sobre objectos.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Princípios de composição visual

1 · Equilíbrio

Distribuição visual do peso. Simétrico ou assimétrico (mais dinâmico).

2 · Hierarquia

O olho deve saber onde olhar primeiro. Tamanho + cor + posição.

3 · Ritmo

Repetição com variação. Listas, padrões, sequências.

4 · Proporção

Relação de tamanhos. Regra dos terços, razão áurea (1:1,618).

5 · Foco visual

Um único ponto que captura primeiro a atenção. Não dispersar.

6 · Espaço negativo

O "vazio" é tão importante quanto o "cheio". Respiração visual.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Operações booleanas

Combinar formas para criar novas formas — operação fundamental do design vetorial.

União A ∪ B Diferença A − B Intersecção A ∩ B Exclusão A ⊕ B

Inkscape: Caminho → União (Ctrl++), Diferença (Ctrl+−), Intersecção (Ctrl+*), Exclusão (Ctrl+^).

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Texto vetorial

O texto em vetor mantém-se editável e escalável.

  • Texto simples — caixa de texto livre
  • Texto em caminho — texto que segue uma curva (efeito tipográfico clássico)
  • Texto convertido em caminho — texto vira forma (perde editabilidade mas garante que abre em qualquer máquina, mesmo sem a fonte)
Antes de entregar · converter ou enviar fontes Se enviares um SVG/AI/PDF com texto editável para outra pessoa que não tenha a fonte instalada, o texto aparecerá numa fonte de substituição (geralmente Arial). Sempre converter em caminho (Caminho → Objecto a Caminho) antes de entregar o ficheiro final.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Bloco 5 · Entrega

Exportação e impressão

Preparar o ficheiro para o destino final.

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Formatos de saída

Formato Tipo Quando usar
SVG Vetor · web nativo Web, ícones, ilustrações para CSS
PDF Vetor + bitmap Documentos, impressão, partilha universal
EPS Vetor · standard impressão Gráficas, trabalhos corporativos antigos
AI Proprietário Adobe Quando o cliente exige (raramente necessário)
PNG Bitmap com transparência Web, redes sociais (rasterização do vetor)
JPG Bitmap sem transparência Fotografia, fundos
WEBP Bitmap moderno · web Web moderna (mais leve que PNG/JPG)
SVG é o futuro web Para sites e apps modernas, SVG é hoje o formato preferido para ícones e ilustrações simples — mais leve, escalável, indexável por motores de busca, programável via CSS/JavaScript.
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Preparação para impressão

Para impressão profissional (offset, digital), há regras adicionais:

  1. CMYK — converter cores de RGB antes da exportação
  2. Bleed (sangria) — adicionar 3-5 mm de margem extra para corte
  3. Marcas de corte — guias para o impressor saber onde cortar
  4. Resolução de bitmaps incluídos — mínimo 300 DPI
  5. Fontes convertidas em caminho — para não depender da máquina do impressor
  6. PDF/X-1a ou PDF/X-4 — padrão de troca para impressão
linha de sangria linha de corte Conteúdo seguro área que nunca vai ser cortada Sangria (+ 3-5 mm) Linha de corte real Área segura (- 3-5 mm) Marcas de corte
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Consolidação

Mapa concetual da UC

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

O que aprendemos · mapa concetual

Editar imagens vetoriais Fundamentos história · tipologias bitmap vs vetor Bézier & Cor nós · alças · tipos RGB · CMYK · gradientes Software · Inkscape interface · atalhos pranchetas · camadas Layout vetorial composição · boolean · texto Exportar & imprimir formatos · CMYK · bleed PDF/X · web (SVG)
Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais

Próximas UCs e recursos

Esta UC fornece a base para:

  • UC02236 · Captar e tratar imagens digitais (complementar bitmap)
  • UC02140 · Editar imagens bitmap (continua a linha de imagem)
  • UC02258 · Implementar princípios do design de comunicação
  • UC02249 · Conceber e executar layouts para aplicações multimédia interactivas
  • UC02285 · Conceber o design para páginas web (usar vetores em web)

Recursos recomendados

Aulify · Componente Tecnológica · Cursos Profissionais
UC02208 · Editar imagens vetoriais
Aulify · UC02208 · Fim

Bom desenho.

Dúvidas? Sugestões? Trabalhos para mostrar?
📧 geral@aulify.pt 🌐 aulify.pt Material de uso pedagógico · Adaptável pelo professor
Aulify · Componente Tecnológica · Cursos Profissionais

NOTAS DO PROFESSOR 📖 Apresentação inicial Esta unidade pertence à componente tecnológica obrigatória do curso de Técnico de Multimédia (213RA104). Tem 50 horas e 4,5 pontos de crédito — está entre as unidades mais substanciais do referencial. 🗣️ Pontos a desenvolver oralmente • Posicionar a UC: vem depois de UCs de fotografia/bitmap e prepara o caminho para Web Design e Animação • Sublinhar que a edição vetorial é a base do design de identidade visual, ilustração editorial, ícones digitais, sinalética e cartografia • Linguagem técnica de software será Inkscape (gratuito, open-source) com referências paralelas ao Illustrator ❓ Perguntas para a turma • "Sabem o que distingue uma imagem PNG de um logótipo SVG quando ampliam a 1000%?" • "Qual a primeira coisa que farão se a vossa professora vos pedir um logo da escola em vetor?" • "Já usaram Inkscape, Illustrator ou Affinity Designer?" 💡 Sugestões pedagógicas A primeira aula deve incluir uma demonstração ao vivo: ampliar um PNG e um SVG lado-a-lado para tornar visceral a diferença vector/bitmap. Recomenda-se ter Inkscape instalado nos PCs antes da aula. ⏱️ Tempo estimado: 5-7 minutos

NOTAS DO PROFESSOR 📖 Resultados oficiais As 4 realizações do referencial cobrem o ciclo completo: importação (R1), organização (R2), composição (R3), entrega (R4). Cada uma é objecto de avaliação separada. 🗣️ Pontos a desenvolver oralmente • R1 "Criar a partir de bitmaps" inclui tracing (vectorização automática) e redesenho manual • R2 "Pranchetas" é um conceito específico de Illustrator/Inkscape — múltiplas zonas de trabalho num só ficheiro • R3 é a maior componente — onde se desenha de raiz • R4 cobre RGB vs CMYK, formatos web vs impressão ❓ Perguntas para a turma • "Qual destas 4 realizações vos parece mais útil para um trabalho futuro?" • "Qual seria mais complicada se nunca tivessem usado software vetorial?" ⏱️ Tempo estimado: 5 minutos

NOTAS DO PROFESSOR 📖 Distribuição temporal 25 aulas de 90 min ≈ 37,5 horas + 12,5 horas trabalho autónomo = 50h. Adaptar ao calendário. 🗣️ Pontos a desenvolver oralmente • Maioria da avaliação é PRÁTICA — não escrita. Trabalhos com Inkscape contam para 80% da nota dos Conhecimentos. • A componente Atitudes/Valores ganha peso especial nesta UC (sentido criativo, sentido crítico, cooperação) • Mostrar a grelha de instrumento Aulify (conteudos/grelhas/UC02208-instrumento.html) ⏱️ Tempo estimado: 5 minutos

NOTAS DO PROFESSOR 📖 Enquadramento Antes da técnica, a cultura. Os alunos precisam de saber em que ombros estão a pisar. ⏱️ 2 min de transição

NOTAS DO PROFESSOR 📖 Conceito-chave: Ilustração Distinção importante: ilustração ≠ "arte". A ilustração é funcional — serve um propósito comunicativo. A arte pode ser puramente expressiva. Esta distinção orienta as escolhas técnicas. 🗣️ Pontos orais • Mostrar exemplos rápidos: iluminura medieval (livros religiosos), cartaz Art Nouveau (Mucha), ilustração editorial moderna (cover NYT magazine) • A ilustração vetorial é nova em termos históricos (Illustrator é dos anos 80) mas resgata princípios milenares de simplificação visual ❓ Perguntas • "Que diferença há entre um quadro pendurado num museu e um cartaz de cinema?" • "Qual é o ilustrador profissional que mais admiram?" 💡 Pedagógica Trazer livros ilustrados ou capas de revistas físicas para a aula. O contacto físico com bom design impresso é insubstituível. ⏱️ 8 min

NOTAS DO PROFESSOR 📖 Conceito-chave: Tipologia condiciona técnica A escolha da tipologia DEFINE as escolhas técnicas (cor, complexidade, formato). Não há ilustração genérica — toda boa ilustração responde a um contexto. 🗣️ Pontos orais • Editorial dá liberdade conceptual, técnica é constrita a precisão • UI/ícones são onde mais alunos vão trabalhar profissionalmente nos primeiros anos • Cartografia e infografia são áreas em crescimento (jornalismo de dados) ❓ Perguntas • "Que tipologia escolheriam para ilustrar uma campanha de prevenção da COVID-19?" • "E para a capa de um livro infantil sobre dinossauros?" • "Para um sítio web de uma clínica dentária?" 💡 Pedagógica Criar pasta partilhada onde a turma colecciona, ao longo da UC, um exemplo de cada tipologia que encontre na vida. Constrói biblioteca visual da turma. ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Enquadramento Slide-âncora da UC. Se os alunos não dominarem esta distinção, todo o resto perde fundamento. ⏱️ 2 min de transição

NOTAS DO PROFESSOR 📖 Conceito-chave: as duas paradigmas digitais A grelha SVG mostra visivelmente a diferença. Bitmap = guardar a cor de cada célula da grelha. Vetor = guardar uma fórmula matemática que descreve a forma. 🗣️ Pontos orais • Demonstrar AO VIVO: abrir um PNG de um logo e ampliar 1000%. Depois abrir o mesmo logo em SVG e ampliar. A diferença é viscerale memorável. • Vetor não é "melhor" — é diferente. Para uma fotografia, vetor seria inviável (milhões de objectos). Para um logo, bitmap é desperdício. ❓ Perguntas • "O ficheiro de uma fotografia tirada com o telemóvel: é bitmap ou vetor?" • "Quando o logo da Apple aparece em outdoor de 10 metros, está em bitmap ou vetor?" • "Que ficheiro pesa mais: SVG de 1 círculo ou PNG do mesmo círculo a 4K?" 💡 Pedagógica Exercício prático imediato: abrir o mesmo logo (Apple, Nike, qualquer) em PNG 200px e em SVG, ampliar nas duas versões. Imprimir e comparar. ⏱️ 12 min

NOTAS DO PROFESSOR 📖 Quadro de decisão A regra prática do final é o que os alunos devem memorizar. Use-a sempre que tiverem dúvida. 🗣️ Pontos orais • Comentar a ambiguidade da ilustração editorial — pode ser feita em qualquer dos paradigmas; muitas vezes mistura-se ambas (vetor para formas, bitmap para texturas) • Banner web: depende do conteúdo. Foto de produto → JPG. Logo + texto → SVG ❓ Perguntas • "Vão fazer um livro de receitas. Que paradigma escolhem para: capa, ícones de utensílios, fotos dos pratos?" ⏱️ 6 min

NOTAS DO PROFESSOR 📖 R1 do referencial Esta é a primeira realização oficial — criar imagens vetoriais a partir de bitmaps. Domina-se na prática. 🗣️ Pontos orais • Tracing automático tem parâmetros: nº de cores, suavização, tolerância. Demonstrar AO VIVO. • Redesenho manual é mais demorado mas dá controlo total — é como os profissionais trabalham para logos finais • Mostrar exemplo: um logo antigo numa foto antiga → trace + clean-up → versão moderna ❓ Perguntas • "Quando faz mais sentido cada método?" • "E se trace dá resultado mau, como corrigem?" 💡 Pedagógica Trazer um esboço a lápis físico, fotografar com telemóvel, importar no Inkscape, vectorizar AO VIVO. Demonstração de 10 minutos que vale por uma aula inteira. ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Enquadramento Núcleo técnico da UC. A maior parte dos alunos detesta no início (frustrante) e adora no fim (poderosa). Investir tempo aqui paga em todas as outras secções. ⏱️ 1 min de transição

NOTAS DO PROFESSOR 📖 Conceito-chave: definição paramétrica A curva é gerada por interpolação cúbica entre os 4 pontos. Mexer numa alça redefine a curvatura. Mexer nos nós desloca o início/fim. 🗣️ Pontos orais • Origem industrial é fascinante: a curva foi inventada para carrocerias, não para gráficos • Tipos: linear (2 pontos), quadrática (3 pontos), cúbica (4 pontos — a mais comum) • Inkscape e Illustrator usam exclusivamente Bézier cúbicas para desenhar caminhos ❓ Perguntas • "Quantos pontos definem uma curva Bézier cúbica?" • "Se as alças apontarem para fora (em sentidos opostos do nó), que tipo de curva criam?" 💡 Pedagógica Demonstração ao vivo no Inkscape: criar um path com a ferramenta caneta, depois com a ferramenta nó (N), mexer nas alças e ver a curva re-formar-se em tempo real. Este momento "aha" é vital. ⏱️ 12 min

NOTAS DO PROFESSOR 📖 Conceito-chave: tipos de nó condicionam o desenho Saber identificar quando uma forma precisa de cusp (esquinas, dentes de uma estrela) versus simétrico (curvas orgânicas, partes do corpo, gotas) é a marca distintiva entre iniciante e profissional. 🗣️ Pontos orais • No Inkscape: ferramenta N, depois clicar num nó e usar os botões da barra superior para alternar entre tipos • Em Illustrator: tecla Alt + arrastar alça quebra a simetria → cria cusp ❓ Perguntas • "Para desenhar uma estrela de 5 pontas, que tipo de nó usariam nas pontas?" • "E para desenhar um coração, que tipo nos cantos inferiores?" • "E para um círculo perfeito?" 💡 Pedagógica Exercício rápido (15 min): pedir à turma para desenhar (à mão alçada com mouse/trackpad) um coração simples no Inkscape, atribuindo conscientemente os tipos de nó. Discussão dos resultados. ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Workflow profissional A regra dos poucos nós é fundamental — alunos iniciantes tendem a clicar dezenas de vezes a tentar "agarrar" a forma. Profissionais usam 4-8 nós para a maioria das formas e ajustam alças. 🗣️ Pontos orais • Estilo "logo" usa muito poucos nós • Estilo "ilustração orgânica" pode usar mais, mas sempre com critério • Demonstrar conversão de um caminho mal feito (50 nós) num caminho limpo (8 nós) usando "Simplificar" ❓ Perguntas • "Qual o número mínimo de nós para desenhar a letra C?" • "E para um quadrado com cantos arredondados?" ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Enquadramento A cor é onde se ganha ou perde uma ilustração. Mesmo desenho com cor errada → falha. Mesmo desenho com cor certa → sucesso. ⏱️ 1 min

NOTAS DO PROFESSOR 📖 Conceito-chave: gamut Cada modelo de cor tem um gamut (gama de cores representáveis). RGB tem maior gamut que CMYK — daí as surpresas na impressão. 🗣️ Pontos orais • RGB é aditivo (somar luzes), CMYK é subtractivo (somar tintas) • Pantone é o único sistema fiável internacionalmente para garantir a cor exacta • Mostrar website pantone.com com cor do ano ❓ Perguntas • "O ecrã do telemóvel funciona em que modelo?" • "Se vou imprimir um livro, em que modelo preparo as imagens?" • "Para um sítio web, basta usar RGB. Verdadeiro ou Falso?" 💡 Pedagógica Demo: pôr a mesma cor lado-a-lado em RGB (no ecrã) e impressa em CMYK. Ver a diferença pode chocar — boa lição para a vida toda. ⏱️ 12 min

NOTAS DO PROFESSOR 📖 Conceito-chave: gradiente é animação congelada Cada gradiente é uma transição cromática que sugere movimento, profundidade, atmosfera. Bem usado, transforma uma ilustração plana em algo vivo. 🗣️ Pontos orais • Linear é o mais usado (sky fundo, botões, fundos de cartaz) • Radial é típico de efeitos de iluminação, glows • Mesh é avançado, raramente necessário ❓ Perguntas • "Que tipo de gradiente usariam para simular o nascer do sol?" • "E para um botão moderno arredondado?" ⏱️ 8 min

NOTAS DO PROFESSOR 📖 Enquadramento Inkscape é gratuito, multiplataforma, exporta SVG nativamente. Usado profissionalmente em estúdios pequenos e por designers freelance. Não tem certas funcionalidades avançadas do Illustrator mas para 95% dos casos é suficiente. ⏱️ 1 min

NOTAS DO PROFESSOR 📖 Anatomia da interface Praticamente todos os software vetoriais seguem este layout. Quem aprende Inkscape adapta-se facilmente ao Illustrator e vice-versa. 🗣️ Pontos orais • Barra de ferramentas à esquerda (atalhos com 1 tecla) • Painéis à direita (cor, camadas, alinhar, transformar...) • Réguas opcionais (View → Rulers) • Mostrar AO VIVO o layout no software ⏱️ 5 min

NOTAS DO PROFESSOR 📖 Atalhos = velocidade Profissionais usam atalhos ALL THE TIME. Forçar atalhos desde a primeira aula compensa exponencialmente. Demorar 2 segundos com clique vs <1s com atalho × 10000 vezes = horas a mais. 🗣️ Pontos orais • Os primeiros 6 atalhos (S, N, R, E, *, B) cobrem 80% do uso diário • Imprimir um cheat-sheet e ter ao lado do PC 💡 Pedagógica Exercício de aquecimento de 10 min no início de cada aula: pedir aos alunos para criarem objectos usando apenas atalhos. Funciona como ritual. ⏱️ 12 min

NOTAS DO PROFESSOR 📖 R2 do referencial — pranchetas Esta é a segunda realização oficial. Demonstrar com um caso prático: criar um manual de identidade visual (3-4 páginas, A4 cada). ⏱️ 7 min

NOTAS DO PROFESSOR 📖 Enquadramento Núcleo da realização R3. Aqui combinam-se princípios estéticos (composição) com técnica (operações boolean, alinhamento, transformações). ⏱️ 1 min

NOTAS DO PROFESSOR 📖 Conceito-chave: princípios universais Estes 6 princípios atravessam toda a história da arte (Renascimento, Bauhaus, Swiss Style, design contemporâneo). 🗣️ Pontos orais • Mostrar exemplos: capa de revista (hierarquia), poster Bauhaus (equilíbrio assimétrico), logo Apple (espaço negativo perfeito) • Apple "Think Different" — exemplo de hierarquia + foco • "Less is more" (Mies van der Rohe) — regra de ouro ⏱️ 12 min

NOTAS DO PROFESSOR 📖 Conceito-chave: design por subtracção Muitos logos famosos são feitos por subtracção: WWF (panda = rect preto - formas brancas), Toblerone (montanha + urso escondido), FedEx (seta escondida entre E e x). 🗣️ Pontos orais • Mostrar logos famosos com operações boolean evidentes • Operações são não-destrutivas em algumas versões (preservam originais) • Combinação com camadas: organizar bem antes de subtrair ❓ Perguntas • "Como criariam o símbolo recycling (3 setas em loop) usando operações boolean?" ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Conceito-chave: tipografia como ilustração Em design vetorial, o texto é mais um objecto gráfico — pode receber gradientes, ser deformado, ter máscaras aplicadas. 🗣️ Pontos orais • Atalho útil Inkscape: T para texto, depois clicar e digitar • Texto em caminho: criar uma curva, seleccionar texto + curva, Texto → Colocar no Caminho • Sites de fontes gratuitas: Google Fonts, Fontesquirrel, Befonts ⏱️ 8 min

NOTAS DO PROFESSOR 📖 R4 do referencial Quarta e última realização: exportar/imprimir. Pequena em conteúdo mas vital — um trabalho mal exportado é um trabalho que não conta. ⏱️ 1 min

NOTAS DO PROFESSOR 📖 Conceito-chave: escolher formato = pensar no destino A primeira pergunta: "Onde vai este ficheiro acabar?". Web → SVG/PNG/WEBP. Impressão → PDF/EPS. Ambos → exportar várias versões. 🗣️ Pontos orais • SVG pode ser incluído directamente em HTML, manipulado por CSS, animado por JavaScript — muito poderoso • PNG vs WEBP: WEBP é mais leve mas ainda há browsers antigos. Modernos: usar ambos com `<picture>` • PDF é universal mas pode ficar pesado ❓ Perguntas • "Vou fazer um cartaz A2 para imprimir. Que formato exporto?" • "E ícones para uma app mobile?" • "E uma capa de Instagram?" ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Conceito-chave: o impressor é um colaborador Um designer profissional fala com o impressor antes de entregar — pergunta especificações exactas, papel, máquina. Cada gráfica tem nuances. 🗣️ Pontos orais • Bleed é vital: sem ele, ao cortar fica uma franja branca no canto • Conteúdo importante (logo, texto principal) deve estar dentro da área segura • PDF/X é o standard para envio profissional ❓ Perguntas • "Se o meu cartaz tem 297×420 mm (A3), com 3mm de bleed, exporto que dimensões?" (resposta: 303×426 mm) ⏱️ 10 min

NOTAS DO PROFESSOR 📖 Última transição ⏱️ 1 min

NOTAS DO PROFESSOR 📖 Síntese Os 5 nós cobrem as 4 realizações: fundamentos (R1 conversão bitmap→vetor), Software (R2 pranchetas), Layout (R3 layouts vetoriais), Exportar (R4). ⏱️ 8 min

NOTAS DO PROFESSOR 📖 Continuação curricular Esta UC é fundamental para muitas seguintes — investir bem aqui paga em todo o resto do curso de Multimédia. 🗣️ Pontos orais • Recomendar fortemente Behance e Dribbble (subscrever feeds, ver pelo menos 5 trabalhos por semana) • Encorajar criação de portefólio pessoal desde a UC02208 — cada exercício vira material para mostrar ⏱️ 8 min

NOTAS DO PROFESSOR 📖 Final Reservar tempo para Q&A e mostragem de trabalhos. Esta UC é especialmente recompensadora — alunos chegam com produtos para mostrar à família. ⏱️ 5-10 min