Tutorial Interativo
Passo a Passo Visual

Criador Pró
Multi-Camadas

Aprende a criar estampas profissionais do zero — do primeiro clique ao PNG de alta resolução.

Introdução

Bem-vindo ao
Criador Pró LADO BE

Esta ferramenta permite criar estampas profissionais com múltiplas camadas de texto e imagem, exportadas em alta resolução para impressão.

Vais aprender 7 passos para dominar a ferramenta. Usa os botões abaixo para navegar.

💡 Guarda o ficheiro HTML e abre-o num servidor local para exportar PNGs sem erros.
Passo 1 de 7

Começar um Novo Design

Ao abrir o criador, já aparecem duas camadas de exemplo. Para começar do zero:

+ Texto — adiciona camada de texto

+ Imagem — adiciona camada de imagem

Cada camada é independente e editável separadamente.

💡 Podes ter tantas camadas quanto precisares — não há limite.
Painel de Controlo
1
Texto
LADO BE
2
Texto
estilo lado be
Passo 2 de 7

Editar Camadas de Texto

Cada card de texto tem controlos completos:

Fonte — Space Grotesk, Bebas Neue, Oswald e mais

Cor — seletor de cor livre

Tamanho — slider de 30 a 500px

Rotação — de -180° a +180°

Arrasta o texto no canvas para reposicionar.

💡 Modo de Mistura "Multiply" dá efeito de estampa real no tecido.
T
Texto
Texto
LADO BE
Fonte
Space Grotesk
Tamanho — 240
Rotação — 0°
Passo 3 de 7

Adicionar Imagens

Faz upload de qualquer imagem do teu computador e controla:

Largura — escala a imagem no canvas

Rotação — inclina a imagem

Modo Mistura — como a imagem se funde com a camiseta

Modos de Mistura:
Multiply — estampa no tecido Normal — sobreposição pura Screen — efeito luminoso
💡 PNG com fundo transparente dá resultado muito melhor que JPG.
IMG
Imagem
Escolher ficheiro...
Largura (px) — 400
Rotação — 0°
Modo de Mistura
Multiply (estampa no tecido)
Passo 4 de 7

Usar Google Fonts

Acede a milhares de fontes do Google Fonts em 4 passos:

1. Clica em 🔍 Abrir Google Fonts

2. Escolhe uma fonte (ex: Bangers, Pacifico, Lobster)

3. Copia o nome exato como aparece no site

4. Cola no campo e clica Carregar Fonte

A fonte fica disponível em todos os cards de texto.

💡 O nome tem de ser exato — "Bebas Neue" funciona, "bebas neue" não.
Secção de Fontes
1. Clique acima e escolha uma fonte
2. Copie o nome exato dela
3. Cole no campo abaixo e carregue
Nome da Fonte Google
Bangers
🌐 "Bangers" carregada com sucesso!
Passo 5 & 6 de 7

Organizar Camadas & Cor

Organizar camadas:

↑ Traz para frente   ↓ Envia para trás   × Remove

Cor da camiseta:

Clica em qualquer quadrado para simular a cor. Disponível: Branca, Preta, Navy, Roxo, Lilás, Verde, Azul, Vermelho...

Mockup:

Ocultar / Mostrar Mockup — alterna entre ver só o design ou a camiseta completa.

💡 A cor é apenas preview — o PNG exportado tem fundo transparente.
Simulação Camiseta
Organizar Camadas
1. Texto — LADO BE
Passo 7 de 7

Exportar o PNG Final

Quando o design estiver pronto, clica no botão de exportação.

O ficheiro descarrega automaticamente com resolução de 1381 × 2000 px — pronto para impressão profissional.

Nome do ficheiro: lado-be-[texto].png

💡 Abre sempre o criador via http://localhost:8080 para exportar sem erros.
1 / 7