Arte de Cartas para Jogo: Moldura, Ilustração e Leitura

Arte de cartas para jogo precisa comunicar custo, tipo e efeito em cerca de um segundo, com a carta pequena na mão do jogador. Por isso, o trabalho começa pelo template, não pela ilustração: você define a hierarquia (custo, nome, ilustração, efeito), monta a moldura com camadas separadas no Inkscape ou no Krita e testa a leitura com a carta reduzida ao tamanho real da mão na tela. É nesse teste que a maioria dos templates falha, porque foi desenhada e aprovada em zoom.

Aqui você monta o template de um deck builder do zero, decide molduras por raridade sem poluir, enquadra a ilustração para ler pequena e exporta arte e texto separados para a engine.

Arte de cartas para jogo: o que a carta precisa comunicar em 1 segundo

Num deck builder, o jogador olha a mão a cada turno e decide rápido. A carta precisa responder três perguntas, nesta ordem:

1. Consigo jogar? O custo, normalmente num ícone grande no canto superior.
2. O que é? Tipo (ataque, defesa, habilidade), lido pela cor ou forma da moldura, antes do texto.
3. O que faz? O efeito, no texto, que só é lido quando a carta já chamou atenção.

Nome e ilustração ajudam a lembrar da carta ("aquela da espada de gelo"), mas raramente são o que decide a jogada. O desenho do template tem que refletir isso. Se você ainda está definindo o que cada carta faz, os posts sobre como fazer um jogo deck builder e sobre mecânicas de jogos de cartas ajudam a fechar o sistema antes da arte.

Hierarquia da carta: custo, nome, ilustração, efeito

Distribuição que funciona para um template retrato (vertical):

• Custo: círculo ou gema no canto superior esquerdo, sobrepondo a moldura. Número grande, com contorno, contraste máximo.
• Nome: faixa logo abaixo do topo, fonte legível, sem script decorativo.
• Ilustração: cerca de metade da altura da carta, logo abaixo do nome.
• Tipo: uma pequena faixa ou ícone entre a ilustração e o texto, reforçando o que a cor da moldura já diz.
• Efeito: caixa de texto no terço inferior, fundo claro e liso, sem textura atrás das letras.

Um teste rápido de hierarquia: desfoque a carta inteira (no Krita, uma Filter Layer com Gaussian Blur por cima). O que continua visível borrado é o que o jogador vê primeiro. Deve ser o custo e a cor do tipo.

Moldura por raridade e tipo sem poluir

Molduras têm duas funções: dizer o tipo e dizer a raridade. O erro é usar o mesmo recurso para as duas e acabar com 12 molduras diferentes que ninguém distingue.

Separe os canais:

• Tipo pela cor do corpo da moldura. Três ou quatro cores com matizes bem distantes: vermelho para ataque, azul para defesa, verde para habilidade. Confira se continuam distintas para quem tem daltonismo, adicionando também um ícone de tipo.
• Raridade pelo acabamento de um detalhe: a cor da gema do custo ou a borda interna. Comum em cinza, incomum em prata, rara em dourado. Só o detalhe muda, o corpo da moldura não.

Mantenha a moldura com valor médio e pouca textura. Moldura muito detalhada compete com a ilustração e com o texto, e numa mão de 7 cartas vira ruído.

Ilustração da carta: enquadramento e silhueta

A ilustração vai aparecer em uma área de umas poucas centenas de pixels. Regras que salvam:

• Um assunto por carta. Uma espada, um monstro, um feitiço. Cena com três personagens vira mancha.
• Silhueta forte. Preencha o assunto de preto sobre fundo branco. Se você reconhece o que é, a carta lê.
• Fundo simples e de valor contrastante. Assunto escuro em fundo claro ou o contrário. Fundo detalhado se resolve com gradiente e duas ou três formas.
• Enquadramento fechado. Corte o assunto perto, deixando ele ocupar 60% a 80% da área.
• Margem de segurança. Pinte a ilustração maior do que a janela da moldura, para poder reenquadrar depois sem repintar.

No Krita, pinte a ilustração em 1000 x 800 px (sobra para recorte) e use M (Mirror View) para conferir a composição espelhada.

Montando o template no Inkscape ou Krita com camadas separadas

No Inkscape (os menus e atalhos abaixo valem para a série 1.4; baixe a versão estável atual no site oficial):

1. File > Document Properties (Ctrl+Shift+D). Tamanho 750 x 1050 px. Essa proporção é praticamente a mesma de uma carta física de 63 x 88 mm, útil se um dia você imprimir protótipos.
2. Abra o painel Layers and Objects (Ctrl+Shift+L) e crie as camadas: fundo, janela_ilustracao, moldura, gema_custo, faixa_nome, caixa_texto, icone_tipo.
3. Desenhe a moldura com a Rectangle Tool (R), cantos arredondados pelo controle de raio. Duplique (Ctrl+D) e mude a cor para cada tipo.
4. Para a gema de custo, use a Ellipse Tool (E) e a Star and Polygon Tool para formas facetadas.
5. Os textos de exemplo ficam numa camada texto_guia, só para medir espaço. Eles não serão exportados.
6. Exporte cada camada ou objeto pelo diálogo Export (Ctrl+Shift+E), em PNG com transparência.

O post sobre arte vetorial no Inkscape cobre o básico de formas, nós e export do programa.

No Krita, o mesmo template sai com grupos: canvas de 750 x 1050 px, um grupo por elemento, moldura pintada ou feita com as ferramentas de forma (camada vetorial com Shift+Ins). Use o Krita se a moldura for pintada à mão, com textura. Use o Inkscape se ela for limpa, geométrica e com muitas variações.

Montar a carta é a parte visível. Fazer o template conversar com os dados do jogo, com a mão na tela, com animação de compra e descarte, e manter 80 cartas consistentes é onde quem trabalha sozinho costuma travar. É o tipo de pipeline de arte para jogos que rende muito mais quando você aprende com um processo completo.

Teste de leitura no tamanho real da mão

Esse é o teste que separa template bonito de template que funciona.

1. Descubra o tamanho real da carta na sua interface. Abra o protótipo do jogo (ou um mockup da tela em 1920 x 1080) e meça a altura da carta na mão. Se ainda não tem interface, desenhe uma tela de 1920 x 1080 com 5 a 7 cartas em leque na parte de baixo, ocupando uma faixa realista.
2. Exporte a carta montada e reduza para essa altura, com reamostragem suave.
3. Cole numa captura de tela do jogo ou no mockup e veja em 100% de zoom, sem ampliar.
4. Peça para alguém que nunca viu a carta dizer, em um segundo, qual é o custo e o tipo.

Se não der para ler o custo, aumente o número e o contorno dele. Se o tipo não for óbvio, aumente a diferença de cor das molduras. Se o texto do efeito não lê, você tem três saídas: menos texto, fonte mais pesada ou palavra-chave em ícone (como um ícone de escudo no lugar de "Ganhe 5 de bloqueio").

Muitos deck builders também mostram a carta ampliada ao passar o mouse ou tocar nela. Isso ajuda no texto do efeito, mas não resolve custo e tipo, que precisam ler na mão.

Erros comuns: texto miúdo, moldura que rouba a cena, ícones ambíguos

Texto miúdo. Template aprovado em 100% do tamanho de criação, que é três ou quatro vezes maior do que o tamanho no jogo. Sempre teste reduzido.

Fonte decorativa no efeito. Fonte medieval cheia de floreio fica bonita no nome e ilegível no texto. Use fonte sem serifa ou serifada simples no efeito.

Moldura que rouba a cena. Dourado brilhante, texturas e ornamentos em toda a borda. O olho vai para a moldura e não para o custo. Ornamento só na carta rara, e pouco.

Ícones ambíguos. Gota pode ser veneno, sangue ou água. Escolha um significado por ícone, mostre num glossário e mantenha em todas as cartas.

Ilustração sem margem. Ao mudar a moldura, a ilustração não cabe mais na nova janela. Pinte sempre com sobra.

Fontes sem licença. Use fontes sob licença que permita incorporar no jogo, como a SIL Open Font License, e guarde o arquivo de licença junto com o projeto.

Exportação para a engine: arte e texto separados

O texto da carta nunca deveria estar queimado na imagem. Balanceamento muda números o tempo todo, e tradução muda tudo. Exporte:

• moldura_ataque.png, moldura_defesa.png, moldura_habilidade.png (com janela transparente para a ilustração)
• gema_comum.png, gema_rara.png
• ilustracao_espada_gelo.png (uma por carta, no tamanho da janela com sobra)
• ícones de tipo e de palavra-chave, um PNG cada

E monte a carta na engine, a partir dos dados.

Godot: uma cena Card com um TextureRect para a ilustração, outro para a moldura por cima, Label para nome e custo e RichTextLabel para o efeito (que aceita ícones embutidos no texto). Um Resource com os dados da carta preenche tudo ao instanciar.

Unity: um prefab com componentes Image do Unity UI para ilustração e moldura e TextMeshProUGUI para nome, custo e efeito (no Unity 6, o TextMesh Pro vem dentro do pacote Unity UI). Um ScriptableObject com os dados da carta alimenta o prefab.

Nos dois casos, as imagens exportadas no tamanho final evitam desfoque, e a fonte importada na engine precisa da mesma licença que você conferiu no template.

Próximo passo

Monte o template de uma carta no Inkscape com as 7 camadas deste post, pinte uma ilustração simples no Krita e faça o teste de leitura com a carta no tamanho real de uma mão de 5 cartas. Depois, crie as 3 variações de tipo só trocando a cor da moldura, e confira se elas ainda são diferentes vistas em cinza.

Com o template validado, o próximo passo é transformar isso em sistema: leia como fazer um jogo deck builder para ligar a arte aos dados e ao loop de turno.