O que você vai aprender

  • Criar botões web com múltiplas camadas de estilo
  • Desenhar ícones em múltiplos tamanhos
  • Projetar banners e headers responsivos
  • Exportar assets otimizados para web

Design de Interfaces Web🔗

O GIMP é excelente para criar assets de interface web modernos.

Botões Web🔗

Anatomia de um botão:

  • Background layer (gradiente ou cor sólida)
  • Border (contorno)
  • Text layer
  • Shadow/glow effects (opcional)

Especificações comuns:

  • Altura: 40-50px (touch-friendly)
  • Padding: 12-20px horizontal
  • Border-radius: 4-8px

Workflow:

  1. Crie documento do tamanho exato do botão
  2. Use ferramentas de seleção e preenchimento
  3. Adicione texto centralizado
  4. Exporte em PNG com transparência

Ícones🔗

Princípios:

  • Grid consistent (ex: 24x24, 48x48)
  • Formas simples e reconhecíveis
  • Cores limitadas (1-3 cores)

Exportar em múltiplos tamanhos:

  1. Desenhe no maior tamanho (ex: 512x512)
  2. Exporte em PNG em vários tamanhos: 512, 256, 128, 64, 32, 16

Banners e Headers🔗

Tamanhos comuns:

  • Full-width: 1920x400px (hero)
  • Sidebar: 300x250px (medium rectangle)
  • Header: 1920x1080px

Para retina (@2x):

  • Duplique a resolução e reduza opacity das texturas
  • Use fontes maiores (ex: 32px em vez de 16px)

Otimização para Web🔗

Ferramentas:

Dica: Sempre exporte em PNG primeiro, depois comprima para formatos de entrega.

Erros comuns

  • Textos muito pequenos em botões são ilegíveis em mobile. Mantenha fonte mínima de 14px equivalente e toque áreas de pelo menos 44x44px.

Você aprendeu

  • Design web no GIMP usa guias e grades para alinhamento consistente
  • Exporte em PNG para elementos com transparência, JPEG para fotos
  • Sempre valide a legibilidade em diferentes tamanhos de tela antes de finalizar

Referências🔗