Como criar uma fonte de pixel art para telas Divoom

O que diferencia uma fonte pixel

Uma fonte pixel é uma tipografia construída inteiramente sobre uma grade fixa, na qual cada unidade representa um pixel visível. Diferentemente das fontes vetoriais, que são redimensionadas suavemente para qualquer tamanho, as fontes pixel assumem sua natureza blocada — cada curva é aproximada com quadrados discretos. Em uma tela LED Divoom, isso não é uma limitação; é esse o objetivo. Cada LED do painel é um pixel físico real, então o design da sua fonte corresponde diretamente ao hardware.

Alguns conceitos de tipografia se aplicam diretamente às grades de pixels, e conhecê-los ajuda você a tomar decisões de design intencionais em vez de adivinhar:

• Linha de base — a linha horizontal onde a maioria das letras se apoia. Em uma grade de 5×7, a linha de base geralmente é a linha 6 (a segunda a partir de baixo).
• Altura-x — a altura das letras minúsculas, como a, c, e e x. Normalmente, 3 a 4 pixels em uma fonte pequena e 4 a 5 em uma fonte média.
• Altura das maiúsculas — o topo das letras maiúsculas, geralmente alinhado ao topo da grade ou uma linha abaixo.
• Ascendentes — partes das letras que ultrapassam a altura-x, como o traço alto de b, d, h, k ou l.
• Descendentes — partes que descem abaixo da linha de base, como a cauda de g, j, p, q ou y.
• Largura dos caracteres — a maioria das fontes pixel usa caracteres com 3 a 5 pixels de largura, com pelo menos 1 pixel de espaçamento entre cada letra.

Esses termos vêm da tipografia tradicional, mas em uma grade de pixels eles se tornam medidas concretas que você pode contar. A tradição da pixel art de trabalhar dentro de restrições rígidas de grade remonta a décadas — dos primeiros monitores de computador aos gabinetes de fliperama — e a mesma disciplina se aplica atualmente ao criar designs para painéis de LED.

Pixel Overload explica o vocabulário de tipografia e dois métodos práticos para criar fontes pixeladas em uma grade.

Escolhendo o tamanho da tela

A grade de pixels do seu display Divoom determina o nível de detalhes que sua fonte pode ter. Uma grade maior oferece mais espaço para formas de letras com ascendentes, descendentes e detalhes decorativos. Uma grade menor exige designs mais simples e robustos, que continuam legíveis à distância.

Display	Pixoo-64 Painel de LED de 64×64 pixels	Times Gate 5 telas LCD de 128×128 pixels	Ditoo Pro Painel frontal de LED de 16×16 pixels
Tamanho da grade	64×64 pixels	128×128 por tela	16×16 pixels
Tamanho de fonte recomendado	5×7 ou 8×8	8×8 ou 10×14	3×5 ou 5×7
Mais indicado para	Fontes detalhadas, texto com várias linhas, mensagens em rolagem em negrito	Fontes com muitos detalhes em telas dedicadas, texto no estilo de painel	Nomes simples com rolagem, citações curtas, charme compacto
Estilo de exibição do texto	Animação estática ou com rolagem	Estático em uma tela, com rolagem em outra	Animação com rolagem (método principal)

Se você está criando sua primeira fonte pixelada, comece com uma grade de 5×7. É o ponto ideal — espaço suficiente para letras minúsculas claras, com ascendentes e descendentes, mas não tanto a ponto de iniciantes se sentirem sobrecarregados com as opções de pixels.

Escolhendo a ferramenta certa

Você não precisa comprar um software para criar uma fonte pixelada. Várias ferramentas gratuitas rodam diretamente no navegador e são baseadas no mesmo raciocínio de grade que as fontes pixeladas exigem. Veja como as principais opções se comparam:

Aseprite — melhor editor geral de pixel art

Aseprite é a ferramenta padrão do setor para criação de pixel art e também lida bem com design de fontes. Ela oferece suporte a camadas, quadros de animação e exportação de spritesheets — algo importante se você planeja criar animações de texto com rolagem mais tarde. A desvantagem é o custo: o Aseprite é uma ferramenta paga (custa cerca de US$ 20), embora você possa compilá-lo a partir do código-fonte gratuitamente se tiver conhecimento técnico. Disponível para Windows, macOS e Linux.

Escolha o Aseprite se você planeja criar tanto pixel art quanto fontes, ou se quer ter suporte a animações integrado ao seu fluxo de trabalho.

Piskel — editor de pixel art gratuito no navegador

O Piskel funciona inteiramente no navegador, sem necessidade de instalação. Ele oferece uma interface limpa, com ajuste à grade, linha do tempo de animação e exportação em PNG ou GIF. É mais simples que o Aseprite, mas essa simplicidade é uma vantagem quando você está aprendendo. Crie cada letra em um quadro separado e depois exporte o conjunto como arquivos PNG individuais ou uma folha de sprites.

Escolha o Piskel se quiser custo zero de configuração e uma ferramenta que possa abrir em qualquer aba.

FontStruct — criado especificamente para criar fontes em grade

O FontStruct adota uma abordagem diferente. Em vez de desenhar pixel art, você posiciona “blocos” em uma grade para construir cada glifo — e a ferramenta exporta seu design como um arquivo de fonte TrueType (.ttf) de verdade, que pode ser instalado em qualquer computador. É gratuito, funciona no navegador e foi criado especificamente para esse tipo de design tipográfico limitado à grade.

Escolha o FontStruct se quiser uma fonte realmente instalável além de imagens de pixel art ou se preferir um fluxo de trabalho de arrastar e soltar em vez de desenhar à mão livre.

Aplicativo Divoom — editor de pixel art integrado

O aplicativo gratuito Divoom Smart (disponível no iOS e no Android) inclui um editor básico de pixel art. Você pode desenhar designs de texto simples e enviá-los diretamente para o seu dispositivo, sem etapas de exportação ou importação. Ele é limitado para criar um alfabeto completo, mas é ótimo para mensagens rápidas e únicas ou para testar como um conceito de fonte fica na sua tela.

Comece apenas com seu nome ou uma frase curta antes de criar um alfabeto completo. Uma palavra de 5 letras permite testar o espaçamento, a legibilidade e o estilo sem se comprometer com 26 caracteres mais a pontuação.

Três maneiras de criar sua primeira letra

Há três abordagens comuns para criar formas de letras em uma grade de pixels. Cada uma produz uma característica visual diferente, e a melhor escolha depende do tamanho da sua grade e do estilo que você busca.

Método das linhas

Desenhe cada caractere linha por linha na grade, como na caligrafia, mas limitado a traços horizontais, verticais e de 45 graus. Isso produz formas de letras finas e limpas, com uma aparência precisa e moderna. Funciona bem em tamanhos de 5×7 ou maiores. A principal consideração é que as fontes baseadas em linhas tendem a parecer leves — em tamanhos muito pequenos, os traços finos podem ficar difíceis de ler contra um fundo brilhante de LED.

Método das caixas

Comece com formas retangulares preenchidas para cada letra e depois recorte o espaço negativo para definir o caractere. Isso produz formas de letras mais fortes e espessas, que continuam legíveis mesmo no tamanho 3×5. O método das caixas é a abordagem mais tolerante para iniciantes que trabalham com grades menores, como o painel de 16×16 do Ditoo Pro, onde cada pixel tem grande peso visual.

Pixel a pixel

Posicione os pixels individualmente, um de cada vez, construindo cada letra do zero. Essa é a abordagem mais precisa, mas também a mais lenta. Ela se destaca em grades de 8×8 ou maiores, onde há espaço suficiente para adicionar detalhes sutis — uma leve curva em um S, uma serifa pontiaguda em um T ou uma curva arredondada em um B. Em um Pixoo-64 com sua grade de 64×64, trabalhar pixel a pixel oferece espaço para aperfeiçoar cada caractere.

Como tornar sua fonte legível

A legibilidade é decisiva para uma fonte de pixel. Em um display LED, onde os pixels são pontos físicos de luz, pequenos problemas de legibilidade ficam mais visíveis do que em um monitor. Algumas regras melhoram consistentemente a legibilidade:

• Mantenha um espaçamento mínimo de 1 pixel entre os caracteres. Letras que se tocam viram manchas, especialmente em painéis de LED, onde a luz se espalha ligeiramente entre pixels adjacentes.
• Mantenha as larguras dos caracteres consistentes. Se o seu A tem 5 pixels de largura, a maioria das outras letras maiúsculas também deve ter de 4 a 5 pixels de largura. Variações excessivas fazem o texto parecer irregular durante a rolagem.
• Teste no tamanho real do display desde o início. Diminua o zoom até que cada pixel tenha aproximadamente o tamanho de um LED no seu dispositivo. Se as letras se tornarem indistinguíveis, será necessário retrabalhá-las.
• Cuidado com pares facilmente confundidos. O I maiúsculo e o l minúsculo, o O maiúsculo e o zero, o rn minúsculo e a letra m — em tamanhos pequenos de pixel, eles assumem formas idênticas, a menos que você crie diferenças deliberadas.
• Evite serifas abaixo de 5×7. As serifas consomem pixels necessários ao corpo da letra. Em 3×5, um design sem serifa limpo sempre terá um desempenho melhor que um com serifas.

Do design ao seu display Divoom

Depois de criar sua fonte, o passo final é colocá-la no seu dispositivo. O fluxo de trabalho varia dependendo de você querer texto estático ou rolagem animada.

Texto estático

1. Na sua ferramenta de design, componha a mensagem completa usando as letras da sua fonte personalizada.
2. Exporte o resultado como um único PNG com as dimensões exatas em pixels da sua tela (por exemplo, 64×64 para o Pixoo-64).
3. Abra o aplicativo Divoom, selecione seu dispositivo e envie o PNG como arte de pixel personalizada.
4. Envie-o para sua tela e ajuste o brilho de acordo com sua preferência.

Texto em rolagem ou animado

1. Crie cada letra como um bloco ou quadro separado.
2. Crie uma sequência de animação em que o texto se desloque 1–2 pixels para a esquerda a cada quadro.
3. Exporte a animação como um GIF — o aplicativo Divoom é compatível com o envio e a reprodução de GIFs.
4. Envie o GIF pelo aplicativo, defina a velocidade do loop e escolha o modo de exibição.

Para exibir texto em rolagem no Times Gate, você pode dedicar uma das cinco telas à sua animação personalizada enquanto as outras continuam mostrando relógios, previsão do tempo ou widgets de dados. Assim, é possível ter texto personalizado em rolagem junto com informações ao vivo — uma combinação que nenhum modelo da galeria da comunidade consegue reproduzir.

Qual tela Divoom exibe fontes da melhor forma

Cada tela Divoom oferece algo diferente para a tipografia personalizada. A escolha certa depende do nível de detalhamento que você deseja para suas fontes e de onde a tela ficará.

O Pixoo-64 é a melhor tela para trabalhar com fontes. Com 64×64 pixels, você pode exibir várias linhas de texto, mostrar mensagens maiores em uma única linha com espaço para detalhes decorativos ou criar banners animados com rolagem suave. É a escolha natural se o design de fontes for um dos principais motivos para comprar uma tela de pixels. A conexão Wi-Fi de banda dupla também mantém suas animações personalizadas conectadas de forma confiável para uma exibição contínua. Confira a página do produto Pixoo-64 para consultar preços e disponibilidade atuais.

Times Gate oferece uma vantagem única para os entusiastas de texto: cinco telas independentes de 128×128. Você pode dedicar uma tela à exibição de uma fonte personalizada, outra a mensagens em rolagem e deixar as três restantes para relógios, previsão do tempo e widgets de dados. A resolução de 128×128 por tela proporciona o maior nível de detalhamento de fontes da linha Divoom. Se você quer um painel de controle para desktop que inclua tipografia personalizada como um dos elementos, o Times Gate oferece a maior flexibilidade.

O Ditoo Pro adota uma abordagem diferente. O painel frontal de 16×16 é pequeno, mas essa limitação pode ser uma vantagem criativa. Nomes simples em rolagem, citações curtas ou mensagens mínimas em pixels têm um charme especial neste alto-falante de estilo retrô. As teclas do teclado mecânico e o joystick acrescentam uma interação tátil que os outros displays não oferecem. Se você quer um companheiro compacto para a mesa que reproduza música e exiba seu texto personalizado, o Ditoo Pro o torna ainda mais pessoal.

Para obter instruções de configuração do dispositivo e detalhes sobre o emparelhamento, a página do manual de produtos Divoom explica as etapas de conexão por Wi-Fi e Bluetooth para os três displays.

Perguntas frequentes