Pular para conteúdo

Projeto 03: Vetorização e Criação de Ícones com Operações Booleanas ✏️

Escopo do Projeto

Objetivo: Criar uma biblioteca de ícones vetoriais consistentes utilizando a Pen Tool e operações booleanas (Union, Subtract, Intersect, Exclude) sobre um grid de 24x24px.

🎯 1. Contexto & Desafio Prático

Ícones são elementos atômicos da linguagem visual de um aplicativo. Você desenhará um pacote de 6 ícones corporativos vetoriais do zero (Home, Busca, Notificação, Carrinho, Usuário e Configurações) garantindo precisão de pixels no grid.

📋 2. Requisitos Técnicos Obrigatórios

  • R1 (Grid de Ícones): Desenhar todos os ícones dentro de frames de exatamente 24x24px com padding de segurança de 2px.
  • R2 (Operações Booleanas): Construir os ícones combinando formas geométricas básicas com Union Selection, Subtract Selection e Flatten Selection.
  • R3 (Stroke Consistente): Espessura de traço uniforme de 2px (stroke: 2px) e cantos arredondados (round joins e round caps).
  • R4 (Exportação Vetorial): Exportar cada ícone como SVG limpo com stroke="currentColor" e viewBox="0 0 24 24".

📐 3. Diagrama Conceitual & Fluxo Visual

graph LR
    Circle["Círculo (Shape)"] --> Sub["Subtract Selection"]
    Rect["Retângulo (Shape)"] --> Sub
    Sub --> Flatten["Flatten (Cmd/Ctrl + E)"]
    Flatten --> SVG["Ícone SVG Otimizado (24x24)"]
    style Circle fill:#e1f5fe,stroke:#01579b
    style Rect fill:#fff3e0,stroke:#e65100
    style Sub fill:#f3e5f5,stroke:#7b1fa2
    style SVG fill:#e8f5e9,stroke:#2e7d32

💻 4. Especificação Técnica & Código de Referência

// icon_sample.svg (Código SVG Exportado do Ícone)
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M3 9.5L12 3L21 9.5V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.5Z" 
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M9 21V12H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

📦 5. Critérios de Avaliação e Entrega

  1. Pacote com os 6 ícones em grid 24x24px perfeitamente alinhados.
  2. Traços regulares sem distorção em 1x e 2x.
  3. Código SVG exportado limpo e validado.