Enrico Gastaldelli Designer

Projeto 05 · Ferramenta · Creative code

Grid Stretch

Uma ferramenta para transformar qualquer imagem em composição tipográfica: a grade recorta, rotula e estica a imagem, e o resultado sai pronto para o feed.

Abrir a ferramenta

Cliente
Projeto autoral
Ano
2026
Função
Design e desenvolvimento
Serviços
Design de interface
Creative code
Ferramenta web
Ferramentas
HTML
CSS
JavaScript
Canvas
Interface da ferramenta Grid Stretch: painel de controles à esquerda e, à direita, a ilustração de uma árvore verde recortada em blocos esticados, com rótulos em caixa-alta.
01

A ferramenta

A imagem é dividida por uma grade irregular. Cada bloco recebe um rótulo e é esticado na horizontal ou na vertical, o que cria uma composição gráfica a partir de qualquer fotografia ou ilustração. Funciona melhor com PNG de fundo transparente.

Tela completa da ferramenta Grid Stretch com o exemplo carregado: painel com operações da imagem, formato de saída, modo de anotação, parâmetros da grade e opções de esticamento.
A interface: tudo em um painel, com a visualização ao lado.
02

Controles

Imagem
Carregar, arrastar, colar (⌘/Ctrl+V) ou usar o exemplo; girar 90°
Formato
Original, Feed 4:5, Feed 1:1, Feed paisagem 1,91:1 e Stories 9:16
Fundo
Branco, preto ou transparente (PNG)
Rótulos
Análise local por cor e textura, texto personalizado ou só números; português, inglês e chinês
Grade
Complexidade, cobertura e geração de novas grades
Esticamento
Intensidade e equilíbrio entre horizontal e vertical
Exportação
PNG ou JPG nas dimensões exatas do formato escolhido
Exemplo de saída da ferramenta: ilustração em verde dividida em blocos esticados, com os rótulos BADERNISMO e COURO em caixa-alta e a palavra couro em caracteres chineses, cada um com numeração.
Exemplo de saída com rótulos personalizados: BADERNISMO, COURO e “couro” em chinês (皮 e 革).
03

Privacidade

Tudo acontece no navegador. A imagem não é enviada a nenhum servidor e o site não guarda nada.