Anúncios incomodam? Ir Sem anúncios Hoje 

Canvas de Arte em Pixels & Exportação CSS

CorDesenvolvedorImagem

ANUNCIADO Remover?

ENTRADA

Processo Automático

Configurações da tela

Tamanho da grade

Mudar o tamanho da grade limpa a tela.

Paleta

Predefinição

Cor atual

Opções de exportação

Tamanho do pixel (px)

Tamanho de cada pixel no resultado exportado em PNG/SVG/CSS.

Formatar

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Canvas de Arte em Pixel e Exportação em CSS

Canvas de Arte em Pixels & Exportação CSS

Pinte sprites em estilo 8-bit com precisão diretamente no seu navegador e exporte-os como arte em CSS com box-shadow, SVG escalável, PNG rasterizado ou JSON portátil. A tela varia de 8×8 até 64×64, vem com paletas clássicas (NES, Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16) e oferece ferramentas de pintura, borracha, preenchimento e pincel com desfazer e refazer ilimitados.

Como usar

Escolha o tamanho da grade entre 8×8 e 64×64. Gráficos maiores oferecem mais detalhe, mas reduzem a velocidade de pintura.
Escolha uma paleta pré-definida ou insira qualquer cor hexadecimal no seletor de cores.
Clique no botão de pintura, borracha, preenchimento ou pincel na barra de ferramentas da tela — ou pressione P, E, F, I.
Clique e arraste na tela para pintar. Use Ctrl+Z e Ctrl+Y para desfazer e refazer.
Escolha um formato de exportação (CSS com box-shadow, SVG, PNG com URI, ou JSON), defina o tamanho do pixel, depois copie o código ou baixe o arquivo.

Características

Seis tamanhos de grade – 8×8, 16×16, 24×24, 32×32, 48×48 e 64×64, para qualquer coisa desde ícones pequenos até folhas completas de sprites.
Sete paletas pré-definidas – NES (54 cores), Game Boy, PICO-8, CGA, Commodore 64, Sweetie 16 e uma escala de cinza.
Quatro ferramentas de desenho – pintura, borracha, preenchimento (preenchimento de área) e pincel com atalhos de teclado único.
Desenho suave com arrastar – a interpolação de linha de Bresenham mantém os traços contínuos mesmo em telas pequenas.
Desfazer e refazer ilimitados – histórico de 60 passos com atalhos de teclado Ctrl+Z e Ctrl+Y.
Quatro formatos de exportação – CSS box-shadow, SVG, URI PNG e dados de grade em JSON, cada um com uma prévia em tempo real.
Suporte para toque – funciona em tablets e celulares com toque nativo e eventos de ponteiro.
Células transparentes – pixels vazios permanecem transparentes em todos os formatos de exportação, não são pintados de branco.

 Perguntas frequentes

O que é um pixel na imagem digital?

Um pixel (abreviação de picture element) é a unidade mais pequena e acessível de uma imagem raster. Cada pixel armazena informações de cor — normalmente valores de canais vermelho, verde e azul entre 0 e 255 — e juntos, uma grade de pixels forma uma imagem completa.
Como o CSS box-shadow renderiza arte em pixel?

O CSS box-shadow aceita múltiplas declarações de sombra, cada uma com deslocamento horizontal e vertical, raio de desfoque, raio de expansão e cor. Definindo o desfoque e a expansão como zero e posicionando cada sombra em uma grade, é possível pintar retângulos coloridos individuais a partir de um único elemento 1x1 — produzindo uma imagem de pixel pura em CSS sem dados rasterizados.
O que é uma paleta limitada de cores e por que é usada?

Uma paleta limitada restringe uma obra a um pequeno conjunto fixo de cores, muitas vezes alinhado às limitações de hardware de consoles retro, como o NES, Game Boy ou Commodore 64. Trabalhar dentro de uma paleta cria coesão visual, evoca uma época reconhecível e exige escolhas de cores deliberadas, em vez de arbitrárias.
O que é o algoritmo de preenchimento de área?

O algoritmo de preenchimento de área é um algoritmo de gráficos que começa em uma célula alvo e se espalha para todas as células vizinhas que compartilham a mesma cor, substituindo cada uma por uma nova cor. A maioria das ferramentas de preenchimento usa um preenchimento de área em quatro direções (cima, baixo, esquerda, direita), implementado com uma pilha ou fila para evitar recursão profunda.
Por que a arte em pixel rasterizada e vetorial é diferente?

A arte em pixel rasterizada é armazenada como uma grade de células coloridas (PNG, URI). A arte em pixel vetorial representa cada célula como uma forma matemática (SVG ou CSS box-shadow) que escala infinitamente sem perder clareza. O formato vetorial é ideal para interfaces web, onde a opção shape-rendering: crispEdges preserva o aspecto em blocos em qualquer nível de zoom.