Formatador de Imagem Steam

Sobre os avatares Steam

Os avatares da Steam são quadrados: 184×184px no perfil e 32×32px no chat e nas listas. O redimensionamento aqui aplica smoothing de alta qualidade, justamente para não perder detalhe nas versões pequenas.

Você recebe um PNG sem perdas. Mande direto para o perfil Steam, que ele aceita a imagem sem reprocessar nada.

Todo o processamento fica no seu computador.

O ecossistema visual da Steam: storefront, biblioteca, comunidade e Workshop

A Steam deixou de ser uma loja com uma lista de jogos há muito tempo. Nos últimos dez anos a Valve foi empilhando camadas visuais umas sobre as outras: a loja clássica com seus capsules giratórios, a biblioteca redesenhada com hero art em parallax e logos animados, o perfil da comunidade com showcases e avatares animados, e o Workshop onde modders e criadores publicam thumbnails para cada mod, coleção e guia. Cada uma dessas superfícies tem uma grade própria, uma densidade de pixels diferente e regras de arte específicas — e a mesma imagem-fonte muitas vezes precisa ser recortada quatro ou cinco vezes para ficar correta em todos os contextos.

Para devs e publishers, os capsules da storefront são a face mais pública do jogo. Um small capsule de 460×215 aparece em resultados de busca, widgets de recomendação, carrosséis de "quem comprou também levou" e nas listas de mais vendidos. O main capsule de 616×353 só aparece no carrossel da home, e somente para títulos com destaque pago ou editorial. O vertical capsule de 374×448 fica reservado para eventos de venda, banners sazonais e o grid da promoção diária. Se qualquer um desses capsules subir com a proporção errada, a Steam estica ou coloca tarja preta — e uma logo distorcida na home da loja é o tipo de detalhe que derruba conversão.

A experiência da biblioteca adicionou um segundo nível de assets em 2019, quando a Valve relançou o cliente. O library capsule de 600×900 substitui o capsule horizontal pequeno quando o usuário já possui o jogo; o library hero de 3840×1240 é o background em parallax da página de detalhes do jogo; e o library logo de 1280×720 flutua sobre esse hero e se move independentemente conforme o usuário scrolla. Juntos eles dão à biblioteca uma sensação de storefront de console — mas só se as três peças forem projetadas como um sistema, com um PNG transparente para a logo, um hero sem texto que sangra além da safe área, e um capsule que reaproveita a mesma key art sem copiar tudo literalmente.

Já do lado da comunidade, a camada visual é dirigida pelos jogadores, não pela editora. Avatares são enviados em 184×184 e reduzidos para 64×64 e 32×32 na lista de amigos e no chat. Os profile backgrounds, em geral recompensa de trading cards, ficam em 1920×620 com uma variante de detalhe em 1438×810. Showcases de artwork e screenshot no perfil usam caixas de aproximadamente 506×506 (ou 266×266 para slots compactos), e usuários mais avançados recortam essas caixas a partir de um background maior para criar o efeito "stitched showcase" tão comum em perfis customizados. Os thumbnails do Workshop, por fim, seguem a convenção quadrada de 268×268 — pequena o suficiente para que qualquer ruído visual destrua a legibilidade no grid.

Assets para devs e publishers

A documentação do Steamworks lista seis assets obrigatórios de loja-e-biblioteca para todo título pago, mais alguns opcionais. O conjunto completo é mais ou menos este:

• Header capsule 460×215 (a Valve aceita também a versão retina moderna em 920×430): capsule mais usado em busca, trilhos de recomendação e na UI de wishlist.
• Main capsule 616×353 (ou 1232×706 em retina): o slot do carrossel da home, exibido só para jogos com destaque.
• Vertical capsule 374×448 (ou 748×896 retina): grids de promoção, deals do dia, eventos sazonais.
• Small capsule 231×87 (ou 462×174 retina): lista de mais vendidos e micro-thumbnails.
• Library capsule 600×900: o cartão em retrato que o dono do jogo vê na biblioteca.
• Library hero 3840×1240: o background largo em parallax, com uma safe área crítica de 860×380 onde a logo será sobreposta.
• Library logo 1280×720 PNG transparente: o wordmark posto por cima do hero.
• Page background 1438×810: wallpaper opcional da página de loja, gerado automaticamente a partir de um screenshot se não for enviado.
• Bundle header 707×232: obrigatório apenas se o jogo for vendido em bundle.

Assets para usuários: avatar, background, showcases

Para o usuário final a matemática é mais simples, mas as superfícies são mais variadas. O avatar é quadrado em 184×184; enviar algo maior funciona porque a Steam redimensiona para 64 e 32 pixels, mas o source ainda deve ser projetado legível em 32×32 — esse é o tamanho em que seu nome aparece no chat de voz e nas mensagens de grupo. Os profile backgrounds vêm em dois sabores: o clássico estático de 1920×620 e o novo mini-profile background animado. As caixas de showcase aceitam imagens quadradas de 506×506 (grande) e 266×266 (compacto), e o famoso truque do "background showcase" envolve fatiar uma única imagem de 1920×620 em vários quadrados de showcase para que sejam lidos como uma arte contínua.

Thumbnails do Workshop

Itens do Workshop — mods, guias, coleções, submissões de artwork — são apresentados como um grid denso de thumbnails quadrados. O tamanho recomendado pela Valve é 268×268 pixels em PNG ou JPG, abaixo de 1 MB. Como o grid envolve cada tile com cerca de 12 pixels de padding e uma drop shadow sutil, designs que dependem de detalhe edge-to-edge ficam embolados; o padrão mais seguro é um ícone ou wordmark centralizado sobre fundo chapado ou gradiente, com pelo menos 20 pixels de respiro nas bordas.

Por que o tamanho exato importa

A storefront da Steam é composta dinamicamente pelo cliente. Um capsule não é renderizado como imagem isolada — ele é posto em cima de uma cor de fundo, frequentemente empilhado ao lado de outros capsules com densidades de pixel diferentes, e em monitores Retina ou 4K ele é upscaled ou substituído pelo irmão "@2x". Quando o asset chega na resolução errada a Steam cai para escalonamento bilinear, o que gera blur visível em fontes e logos. Pior: os retângulos de crop que a Valve usa para derivar o small capsule do main capsule, ou o @1x do @2x, só batem se a imagem-fonte seguir exatamente a proporção documentada. Uma imagem de 462×175 (um pixel fora do spec) será cortada, não escalonada, e uma faixa fina da arte simplesmente some da storefront.

Performance é a segunda razão. O cliente da Steam pré-carrega milhares de capsules quando o usuário abre a loja; servir um hero de 4 MB onde um PNG otimizado de 200 KB faria o serviço significa biblioteca mais lenta e, para quem está em conexão ruim, tiles que não carregam. Pipelines profissionais exportam capsules no tamanho exato e passam por pngquant ou tinypng antes do upload.

Boas práticas de design

• Nos capsules, mantenha texto restrito à logo do jogo — o time de review da Valve rejeita capsules com marketing copy, citações de review ou overlays de "Em Breve".
• Não coloque texto algum no library hero; a logo é uma camada separada e a Steam compõe as duas em runtime.
• Teste seu capsule contra o fundo cinza da storefront (#1b2838) e contra o fundo mais claro da biblioteca; evite bordas brancas ou pretas que se fundem com a chrome.
• Garanta que a safe área legível do library hero (os 860×380 centrais) não contenha nada crítico — o efeito parallax corta as bordas em janelas menores.
• Exporte nas dimensões exatas que a Valve especifica. Não deixe a Steam escalar sua arte.
• Use sRGB; a Steam ignora perfis ICC embutidos.
• Para thumbnails do Workshop, desenhe em 268×268 mas verifique legibilidade em 134×134 — esse é o tamanho usado no diálogo de subscrição in-game.

Ferramentas alternativas

Para um avatar avulso ou um thumbnail de Workshop, um cropper in-browser como este aqui é o caminho mais rápido. Para pacotes completos de storefront, a maioria dos estúdios mantém templates em Photoshop ou Figma com smart objects dimensionados em cada spec da Valve — a própria Valve distribui uma pasta no Dropbox com templates PSD/AI para parceiros. O GIMP também funciona e tem um template de capsule Steam comunitário gratuito. Para redimensionar a mesma imagem-fonte em batch para um conjunto completo de capsules, ImageMagick ou um script Node curto usando sharp são difíceis de bater: convert input.png -resize 460x215^ -gravity center -extent 460x215 header.png e equivalentes para cada spec.