Recursos gráficos de promoções (documentação do Steamworks)

Documentação do Steamworks

Recursos gráficos de promoções

Documentação do Steamworks > Presença na loja > Recursos gráficos: visão geral > Recursos gráficos de promoções

Caso esteja atrás das especificações dos recursos gráficos do Steam, consulte a documentação Recursos gráficos: visão geral.

Muitos dos grandes eventos do Steam, incluindo as promoções regulares com curadoria, contam com artes de tamanhos específicos usados exclusivamente nesses espaços promocionais.

Acesse todos os detalhes e modelos para Photoshop aqui: MODELOS ATUAIS
(Aviso: use o novo modelo e remova eventuais versões antigas)

Muitos desses recursos podem ser criados por conta própria com a ajuda da sua equipe de design. Pedimos que os envie para a Valve com, pelo menos, uma semana de antecedência para podermos oferecer comentários e para que a nossa equipe de tradução tenha um prazo adequado para traduzi-los. Todos os banners do Steam são traduzidos em 26 ou mais idiomas.

AVISO: abaixo estão os requisitos de recursos enviados:

**Nenhum arquivo deve ultrapassar 5 MB**

O QUE NOS ENVIAR
Arquivos do Photoshop (PSD) com camadas.
- A arte principal do jogo ou do personagem deve estar na maior resolução possível e, de preferência, ser um objeto inteligente (smart object). Desta forma, podemos usar os recursos gráficos para gerar outras artes promocionais do Steam quando necessário.
- O logotipo deve estar separado da arte e, de preferência, ser um objeto inteligente (smart object).
- Todos os textos devem ser editáveis e estar em uma pasta de nome "text" no documento PSD para que seja facilmente traduzido pela nossa equipe.
Todas as fontes usadas (em especial fontes personalizadas).

Recursos animados

Para recursos animados, forneça também uma sequência de ciclo sem interrupção aparente (ou seja, em que o primeiro e o último quadro sejam idênticos) e sem o texto ou o logotipo nos formatos MP4 e PNG. Nenhum texto deve ser animado para facilitar a tradução pela nossa equipe.
O ideal é que a animação dure de 3 a 5 segundos. Isso ajuda a manter o tamanho final reduzido para exibição no Steam. Todos os arquivos finais, quando exportados, devem ficar abaixo de 5 MB.
Tente usar uma animação lenta, que não seja muito chamativa. Em outros termos, a animação deve parecer natural na imagem.
Tente criar uma animação que pareça ininterrupta quando reproduzida repetidamente. Esteja ciente que o Steam reproduzirá a animação com repetição (em "loop"), e que essa função não pode ser desativada. Não é necessário criar uma animação "ininterrupta", mas é recomendado para obter os melhores resultados visualmente.
Todos os recursos animados serão exportados nos formatos Webm e MP4.
Todos os textos (que não sejam o logotipo do jogo ou desenvolvedor) que expressem uma mensagem aos usuários (como "Já disponível" e "Recém-atualizado") devem permanecer editáveis para que possam ser traduzidos:
Os textos não poderão ser animados, e nenhum efeito pode ser animado sobre o texto.
Não "achate" qualquer texto no plano de fundo ou na animação.
Ao exportar a sua sequência de PNGs ou arquivo MP4, desative todas as camadas de texto para que elas não sejam "achatadas" no plano de fundo.
Todas as informações essenciais devem encaixar na área de segurança indicada no arquivo-modelo. Tudo que estiver fora dessa área aparecerá cortado em telas menores.

O QUE NOS ENVIAR
Arquivos do Photoshop com uma linha do tempo de vídeo com a sua arte, mensagem e sequência de PNGs para animação.
Uma pasta com todos os PNGs usados na sequência de animação.
Caso não possa fornecer os PNGs, também aceitamos um arquivo MP4 da animação.
Todas as fontes usadas (em especial fontes personalizadas).

Nome do recurso	Tamanho	Tipo	Observações
Mensagem de novidade do Steam	570 x 600 px	JPG, PNG. MP4 e WebM caso seja animado.	Arte do jogo ou da atualização com o logotipo do jogo. Contém uma breve chamada para ação (CTA). Clique para detalhes
Banner de destaque	306 x 260 px	JPG	Arte do jogo com o logotipo. O texto será sobreposto na parte inferior automaticamente. Clique para detalhes
Banner do topo da página	1850 x 450 px	JPG, PNG. MP4 e WebM caso seja animado.	Arte do jogo ou da atualização com o logotipo do jogo. Contém uma breve chamada para ação (CTA). Clique para detalhes
Banner do topo da página para dispositivos móveis	500 x 350 px	JPG, PNG. MP4 e WebM caso seja animado.	Versão menor do banner na parte superior da página. Obrigatório caso a promoção apareça na parte superior da página Clique para detalhes
Banner sob o carrossel	940 x 150 px	JPG, PNG. MP4 e WebM caso seja animado.	Arte do jogo ou da atualização com o logotipo do jogo. Contém uma breve chamada para ação (CTA). Clique para detalhes
Takeunder Mobile Banner	500 x 160 px	JPG, PNG. MP4 e WebM caso seja animado.	Arte do jogo ou da atualização com o logotipo do jogo. Contém uma breve chamada para ação (CTA). Clique para detalhes
Fundo da página promocional	Consulte o modelo para verificar o tamanho e o posicionamento.	JPG, PNG	Imagem que aparece na parte superior e no fundo da sua página promocional. Obrigatório se houver uma página promocional personalizada Ver detalhes
Banner nas páginas de produtos	1100 x 160 px	JPG, PNG	Banner que destaca o seu evento promocional. Obrigatório se houver uma página promocional personalizada Ver detalhes
Banner nas páginas de produtos para dispositivos móveis	500 x 160 px	JPG, PNG	Banner nas páginas de produtos (versão menor). Obrigatório se houver uma página promocional personalizada Ver detalhes

Os modelos para os recursos acima estão disponíveis aqui: MODELOS ATUAIS

Mensagem de novidade do Steam

Uso: exibida na janela de novidades do Steam e na página inicial da Loja Steam.

Exemplos de locais no Steam:

Design: para um melhor resultado, confirme que o logotipo é legível e inclui APENAS o tipo de promoção (oferta do meio da semana, oferta do fim de semana, pré-venda, lançamento, em breve etc.). Não inclua porcentagem de desconto ou datas do evento. O preço e o botão de chamada para ação (CTA) serão automaticamente exibidos embaixo da imagem. Caso exista algum logotipo regional que precisa ser usado para locais específicos, inclua-o no arquivo PSD.

Tamanho: 570 x 600 px, JPEG.
Tamanho do vídeo: 570 x 600 px, MP4 e WebM.

Exemplos:

Já disponível	Oferta do fim de semana	Novo conteúdo adicional disponível


Oferta do meio da semana	Nova atualização


Compre já na pré-venda	Pré-carregue agora


Fim de semana gratuito

Banner de destaque

Uso: exibido próximo à parte superior da página inicial da Loja Steam em promoções específicas, como ofertas do meio da semana ou do fim de semana. Também aparece em centrais de conteúdo relevantes, como as páginas de gêneros ou de marcadores.

Design: o foco principal desse banner deve ser a arte e o logotipo do jogo. O banner de destaque terá uma seção abaixo da imagem, com texto descrevendo o tipo de promoção (ex.: "Promoção do fim de semana") e a data de fim.

Tamanho: 306 x 260 px, JPEG.

Exemplo de local no Steam:

Banner na parte superior da página

Uso: usado apenas nos lançamentos mais importantes ou em promoções específicas de distribuidoras. Exibido na parte superior da página inicial da Loja Steam.

Design: a imagem deve ser simples e chamativa. Normalmente, é usada a arte que melhor representa a marca junto ao logotipo do produto. A imagem pode ter bordas com desvanecimento ou com transição para uma cor sólida diferente caso a cor primária contraste demais com a cor azul usada pela Loja Steam.

Tamanho: 1850 x 450 px, PNG.
Tamanho do vídeo: 1850 x 450 px, MP4 e WebM.

Banner na parte superior da página para dispositivos móveis

Uso: versão do banner na parte superior da página da Loja Steam para dispositivos móveis. Exibido em navegadores com menos de 500 pixels de largura.

Design: deve ser igual ao do banner normal, mas menor. Use a imagem toda e preencha o espaço com o logotipo e a chamada para ação (CTA).

Tamanho: 500 x 350 px, PNG.
Tamanho do vídeo: 500 x 350 px, MP4 e WebM.

Banner sob o carrossel

Uso: usado apenas em alguns dos lançamentos mais importantes ou em promoções específicas de distribuidoras. Exibido próximo da parte superior da página inicial da Loja Steam, logo abaixo do carrossel principal.

Design: a imagem deve ser simples e chamativa. Normalmente, é usada a arte que melhor representa a marca junto ao logotipo do produto. Será exibida como um banner na página, então não há problema em usar todo o espaço disponível sem adicionar desvanecimento nas bordas.

Tamanho: 940 x 150 px, PNG.
Tamanho do vídeo: 940 x 150 px, MP4 e WebM.

Banner sob o carrossel para dispositivos móveis

Uso: versão do banner sob o carrossel da Loja Steam para dispositivos móveis. Exibido em navegadores com menos de 500 px de largura.

Design: deve ser igual ao do banner normal, mas menor. Use a imagem toda e preencha o espaço com o logotipo e a chamada para ação (CTA).

Tamanho: 500 x 160 px, PNG.
Tamanho do vídeo: 500 x 160 px, MP4 e WebM.

Fundo da página promocional

Uso: esta imagem é exibida na parte superior e no fundo da página promocional.

Design: o conteúdo mais importante deve ser posicionado dentro da área de segurança do modelo, indicada pela caixa verde de 940 px de largura. A arte pode exceder os limites laterais e inferior da página. Por exemplo, você pode criar uma imagem de fundo com 1780 px de largura com um efeito de desvanecimento gradual para uma cor sólida nas laterais e na parte inferior. Depois, defina esta mesma cor no Steamworks como a cor de fundo da página.

Banner nas páginas de produtos

Uso: é possível configurar este banner para ser exibido na parte superior da página na loja de todos os jogos participantes do evento. Você só poderá usar esses banners se os criadores de cada jogo incluso na sua página promocional estiverem cientes e aprovarem o seu uso. Em outras palavras, nenhum desenvolvedor deve se surpreender ao ver o seu banner na página da loja de um jogo.

Design: a imagem deve ser simples e chamativa. Normalmente, a parte principal da arte deve representar o evento promocional.

Tamanho: 1100 x 160 px, PNG.

Banner nas páginas de produtos para dispositivos móveis

Uso: versão para dispositivos móveis do banner da página da loja. Exibido em navegadores com menos de 500 px de largura.

Design: deve ser igual ao do banner nas páginas de produtos, mas menor. Use todo o espaço e preencha-o com o logotipo e a chamada para ação (CTA).

Tamanho: 500 x 160 px, PNG.