Gerador de grafite: seu nome em cada estilo

Crie seu nome em letras de grafite

Um gerador de grafite só serve se mostrar a sua palavra, e este faz exatamente isso: digite um nome, uma ideia de tag ou as iniciais da sua crew e cada cartão de estilo redesenha essas letras, não um «ABC» de exemplo. Você escolhe um throw-up ou uma peça em bloco pelo jeito como as suas letras de verdade se comportam, ajusta as cores de preenchimento, contorno e 3D (ou pega um dos 12 presets de tinta), empurra as letras com quique, inclinação e sobreposição, e então baixa um PNG nítido, copia um link do seu design ou imprime uma folha só de contornos para decalcar no seu black book.

Tudo é desenhado em um canvas no seu navegador, então o seu nome em grafite aparece na hora. Sem cadastro, sem marca d’água, e nada do que você digita é enviado para lugar nenhum.

De um nome digitado a uma imagem pronta

1. Digite sua palavra. Até 30 caracteres, e letras com acento como ä, ñ ou é ficam exatamente como você digitou. Os melhores resultados vêm com 3–8 letras, ou 2–5 letras para iniciais de crew.
2. Compare os estilos na sua palavra. O tamanho muda tudo: letras bubble em NOVA ficam gordinhas e simpáticas, enquanto o mesmo estilo em um nome de dez letras fica fino e apertado. Toque em um cartão para escolher aquele estilo, ou use as quatro abas de filtro para reduzir os 20 cartões.
3. Defina as cores. Comece por um dos 12 presets de tinta, mostrados como bicos de spray, e depois ajuste separadamente preenchimento, contorno, 3D ou sombra, e fundo. O fundo pode ser liso, uma parede de tijolos ou transparente.
4. Dê forma às letras. O quique sobe e desce as letras em relação à linha de base, a inclinação as gira, e a sobreposição puxa cada letra para trás, de modo que o contorno da letra seguinte fique sobre o preenchimento da anterior, como em um throw-up desenhado à mão. O quique chega a 20 % do tamanho da letra, a inclinação a 20° e a sobreposição a 30 %. Aperte «Nova variação» para jogar os dados de novo até o ritmo ficar bom.
5. Tamanho e exportação. Escolha largo, quadrado ou alto e uma escala de 1× a 4×; uma linha abaixo da imagem mostra o tamanho em pixels e o tamanho de impressão a 300 ppi. Baixe o PNG, copie a imagem ou copie um link que guarda todas as suas configurações. Ou mude para a folha de contornos e imprima.

Os estilos do gerador de grafite e como os writers os chamam

Os writers organizam as letras numa escada de esforço. Uma tag é uma assinatura estilizada de uma cor só. Um throw-up é um contorno rápido com um preenchimento, geralmente em letras bubble; tire o preenchimento e você tem um hollow. Uma peça (piece) é uma obra maior, de várias cores, com 3D, e um burner é uma peça tão bem acabada que parece saltar da parede. Os termos estão reunidos no glossário de grafite (em inglês). A ferramenta organiza seus 20 estilos em quatro abas de filtro: Throw-ups e bubbles (3), Blocos e 3D (5), Peças e efeitos (8) e Wild e escorridos (4). Veja como os estilos se encaixam na escada:

Uma palavra honesta sobre o wildstyle. O wildstyle de verdade entrelaça as letras, entorta a estrutura delas e faz crescer setas e conexões até que só os writers consigam ler. Qualquer gerador que parta de uma fonte só chega perto disso, mesmo com inclinação e sobreposição. Trate o resultado como um esqueleto e construa você mesmo as conexões. As diferenças entre as formas estão explicadas em tag, throw-up, piece e wildstyle explicados (em inglês).

Cores para letras de grafite que se leem do outro lado da rua

A regra que passo a todo iniciante: o contorno é a coisa mais escura da peça, o 3D é mais escuro que o preenchimento, e o brilho é mais claro que o preenchimento. O contraste de luminosidade importa mais que o matiz. Um preenchimento vermelho com contorno vermelho-escuro fica rico de perto e vira uma mancha do outro lado da rua; o mesmo preenchimento com contorno preto e um brilho claro continua nítido.

A ferramenta deriva os tons do 3D e do brilho a partir do seu preenchimento com duas fórmulas simples, aplicadas a cada canal RGB e arredondadas:

Se você mudar o preenchimento à mão, mantenha o fundo pelo menos tão distante do preenchimento em luminosidade quanto o contorno. Os campos hexadecimais aceitam #RGB (por exemplo #f00), #RRGGBB ou os seis dígitos sem o #; qualquer outra coisa mostra um erro ao lado do campo e mantém a sua última cor. Mais combinações, com seus tons derivados, estão em letras 3D e combinações de cores que se leem de longe (em inglês).

Tamanhos para impressão, adesivos e avatares

O formato largo começa em 800 × 400 px, o quadrado em 540 × 540 e o alto em 450 × 800; a escala multiplica os dois lados, e cada lado é limitado a 4096 px. Pixels só viram centímetros quando você escolhe uma densidade de impressão; 300 ppi é a meta habitual para impressão nítida, e o arquivo PNG vem marcado com 300 ppi. A leitura abaixo da imagem faz essa conta para você, por exemplo «3200 × 1600 px · 27,1 × 13,5 cm (10,7 × 5,3 in) a 300 ppi»:

Exemplo resolvido: você quer ZEST na largura de uma folha A4 na horizontal, que tem 29,7 cm de largura. Preencher de ponta a ponta a 300 ppi exigiria 29,7 ÷ 2,54 × 300 ≈ 3508 px. A exportação em 4× dá 3200 px, que imprimem 27,1 cm de largura e deixam cerca de 1,3 cm de cada lado, mais ou menos a margem de que a maioria das impressoras domésticas precisa de qualquer jeito.

Para adesivos e fotos de perfil, use o formato quadrado: em 2× são 1080 × 1080 px, que imprimem 1080 ÷ 300 × 2,54 ≈ 9,1 cm, de sobra para um adesivo de notebook. O formato alto serve para papéis de parede de celular; em 4× são 1800 × 3200 px, ou 15,2 × 27,1 cm. Escolha «Transparente» como fundo para obter um PNG transparente, e confira se a prévia mostra um tabuleiro xadrez atrás das letras antes de baixar.

Da tela para o black book

A imagem é uma referência, não o seu estilo. A folha de contornos é feita de linhas pretas sobre branco, com linhas opcionais para o bloco 3D, e imprime em A4 ou Letter; você também pode salvá-la como PNG. O que digo aos iniciantes: imprima a folha de contornos, decalque uma vez a lápis para sentir as formas, depois decalque de novo e comece a mudar as coisas — alargue uma letra, encurte outra, mude o ponto em que se tocam, acrescente uma seta sua. Da terceira ou quarta folha em diante, desenhe à mão livre.

Duas regras da cultura importam aqui. Copiar o nome, as letras ou as cores de outro writer é biting, e ninguém respeita isso; invente o seu próprio nome e fique com ele. E pinte só onde você tem permissão: papel, tela, uma tábua no seu quarto ou um muro liberado. Trabalhar em propriedade alheia sem permissão é ilegal na maioria dos lugares. Para a técnica de desenho, comece por como desenhar letras bubble de grafite, passo a passo (em inglês).

Por trás das letras: camadas, contas e verificações

Cada estilo desenha cada letra como uma pilha de camadas, de baixo para cima, de modo que uma camada posterior sempre cobre uma anterior:

• Bloco 3D: cópias da letra deslocadas 1,4 px cada uma ao longo da diagonal, em darken(fill, 0.55). Mais profundidade significa mais passos.
• Contorno do throw-up: traço externo = espessura do contorno + 12 px, traço interno = espessura do contorno + 6 px em lighten(outline, 0.35), que é o que dá a borda dupla.
• Letras: cada letra é posicionada sozinha e centralizada na altura das maiúsculas. O vão entre duas letras é o espaçamento menos a sobreposição em % × tamanho da fonte; por isso o espaçamento 0 e 1 são desenhados do mesmo jeito, e 1 acrescenta exatamente 1 px por vão.
• Ajuste automático: a ferramenta escolhe o maior tamanho de letra, até o seu controle «Tamanho máx. da letra» (40–200 px, padrão 120), em que as letras cabem na imagem menos uma margem de 12 px. Contorno, 3D, sombra, escorridos, coroa, setas, quique e inclinação entram na conta. O mínimo é 18 px.
• Exportação: tamanho da imagem = tamanho do canvas × escala, com cada lado limitado a 4096 px. «Copiar imagem» coloca na área de transferência a mesma imagem que o download salva, não a pequena prévia. Sombras e brilhos do canvas ignoram a escala de desenho (MDN sobre shadowBlur, padrão HTML sobre sombras do canvas), então a ferramenta multiplica ela mesma o desfoque e os deslocamentos pela escala; senão um PNG em 4× ficaria mais chapado que a prévia. As linhas de varredura de Listras retrô e Glitch cyber são pintadas só dentro das letras, de modo que um fundo transparente continua transparente.
• Variações: um gerador aleatório com semente (mulberry32) controla quique, inclinação e detalhes aleatórios como escorridos e brilhos. A semente padrão é 42, «Nova variação» escolhe outra, e a mesma semente sempre reproduz as mesmas letras.
• Link para compartilhar: «Copiar link deste design» grava cada configuração depois de um #gg& no link. Ao abrir um link assim, cada valor é verificado de forma rigorosa (cores, números e nomes de estilo), e o link nunca é enviado para lugar nenhum.