Recursos gráficos de promoción en la tienda (documentación de Steamworks)

Documentación de Steamworks

Recursos gráficos de promoción en la tienda

Documentación de Steamworks > Presencia en la tienda > Recursos gráficos - Descripción general > Recursos gráficos de promoción en la tienda

Si estás buscando las especificaciones de todos los recursos gráficos de Steam, consulta este resumen.

Muchos de los principales eventos de Steam, incluidas las promociones moderadas habituales, presentan tamaños de imagen que son específicos para esos espacios promocionales.

Puedes acceder a todas las plantillas de Photoshop y a los detalles aquí: PLANTILLAS ACTUALES
(utiliza la nueva plantilla y elimina las versiones anteriores).

Muchos de estos recursos los puedes crear tú mismo con tu propio equipo de diseño. Por favor, envíalos a Valve con al menos una semana de antelación para que podamos ofrecerte nuestros comentarios y para darle tiempo a nuestro equipo de localización. Siempre traducimos los banners de Steam a más de 26 idiomas.

NOTA: Con cada recurso que envíes, debes incluir:

**Todos los recursos deben ocupar menos de 5 MB**

QUÉ ENVIAR
Archivos de capas de Photoshop (PSD).
- La ilustración principal del juego/personaje en la mayor resolución posible (preferiblemente objeto inteligente). Esto nos permitirá reutilizar estos recursos para crear otras imágenes promocionales de Steam cuando sea necesario.
- El logotipo separado de la ilustración (preferiblemente objeto inteligente).
- Todos los textos han de poder editarse y deben ir en una carpeta «text» separada dentro del documento PSD para que nuestro equipo pueda traducirlos fácilmente.
Todas las fuentes utilizadas (especialmente las personalizadas).

Recursos animados

En el caso de los recursos animados, proporciona también una secuencia MP4 y PNG en bucle continuo sin el texto ni el logotipo. No añadas animaciones a los textos para que nuestro equipo pueda traducirlos fácilmente.
Intenta que las animaciones sean de 3 a 5 segundos de duración. Esto ayuda a mantener el tamaño final adecuado para su presentación en Steam. Todos los archivos finales exportados deben tener un tamaño inferior a 5 MB.
Intenta que tu animación sea lenta y que no haga daño a la vista. La animación debe tener un aspecto natural.
Intenta conseguir un bucle continuo con tu animación. Ten en cuenta que Steam está configurado para mostrar tu animación en bucle de todas maneras, y esta función no puede desactivarse. No es necesario un bucle continuo, pero lo recomendamos para obtener los mejores resultados visuales.
Todos los mensajes de marketing animados se exportarán como archivos WebM y MP4.
Todos los textos (a excepción de los logos de juegos o desarrolladores) que comuniquen un mensaje a los usuarios (por ejemplo, «Ya disponible» o «Recién actualizado») deben ser editables para que puedan traducirse:
El texto no puede ser animado y tampoco se pueden añadir efectos animados en la parte superior del texto.
No acoples texto al fondo ni a la animación.
Cuando exportes secuencias PNG o archivos MP4, asegúrate de desactivar todas las capas de texto para que el texto no se acople al fondo.
Toda la información esencial debe caber en la zona verde segura que se indica en la plantilla, ya que todo lo que haya fuera de esta área se verá cortado en pantallas más pequeñas.

QUÉ ENVIAR
Los archivos de Photoshop configurados con una línea de tiempo de vídeo que contenga tu material gráfico, mensajes y la secuencia de animación PNG.
Una carpeta con todas las secuencias completas de animación PNG.
Si no puedes proporcionar una secuencia PNG, también aceptamos un archivo MP4 de la animación.
Todas las fuentes únicas que hayas usado, especialmente aquellas que sean personalizadas.

Nombre del recurso	Tamaño	Tipo	Notas
Mensajes emergentes de marketing	570 × 600 píxeles	JPG, PNG. MP4 y WebM si están animados.	Material gráfico de la actualización o del juego con el logotipo del juego. Breve llamada a la acción. Ver detalles
Banner de destacados	306 × 260 píxeles	JPG	Material gráfico del juego con logo. El texto se colocará en la parte inferior automáticamente. Ver detalles
Banner superior	1850 × 450 píxeles	JPG, PNG. MP4 y WebM si están animados.	Material gráfico de la actualización o del juego con el logotipo del juego. Breve llamada a la acción. Ver detalles
Banner superior para dispositivos móviles	500 × 350 píxeles	JPG, PNG. MP4 y WebM si están animados.	Versión más pequeña del banner superior. Obligatorio si se utiliza un banner superior. Ver detalles
Banner inferior	940 × 150 píxeles	JPG, PNG. MP4 y WebM si están animados.	Material gráfico del juego o de la actualización con el logotipo del juego. Breve llamada a la acción. Ver detalles
Banner inferior para dispositivos móviles	500 × 160 píxeles	JPG, PNG. MP4 y WebM si están animados.	Material gráfico del juego o de la actualización con el logotipo del juego. Breve llamada a la acción. Ver detalles
Fondo de la página de ofertas	Ver plantilla para tamaño y recorte.	JPG, PNG	Imagen que aparece en la parte superior y en el fondo de la página de ofertas. Obligatoria si hay una página de inicio de ofertas personalizada. Ver detalles
Banner de la página de la tienda	1100 × 160 píxeles	JPG, PNG	Banner dedicado al evento de ofertas. Obligatorio si hay una página de inicio de ofertas personalizada. Ver detalles
Banner de la página de la tienda para dispositivos móviles	500 × 160 píxeles	JPG, PNG	Versión más pequeña del banner de la página de la tienda. Obligatorio si hay una página de inicio de ofertas personalizada. Ver detalles

Las plantillas de los recursos anteriores están disponibles aquí: PLANTILLAS ACTUALES

Mensajes emergentes de marketing

Uso: en la ventana emergente de mensajes de Steam y en la página principal de Steam.

Ejemplos de ubicaciones en Steam:

Diseño: para conseguir el mejor resultado, asegúrate de que el logotipo se lee bien e incluye solamente un letrero para indicar qué tipo de promoción es (oferta de entre semana, oferta del fin de semana, reserva, ya disponible, nueva actualización, etc.) sin el porcentaje de descuento ni las fechas del evento. El precio y el botón de llamada a la acción aparecerán de forma automática debajo de la imagen. Si hay algún logotipo regional que deba utilizarse para regiones específicas, inclúyelo en el archivo PSD.

Tamaño: 570 × 600 píxeles, JPEG.
Tamaño del vídeo: 570 × 600 píxeles, MP4 y WebM.

Ejemplos:

Ya disponible	Oferta del fin de semana	Nuevo DLC disponible


Oferta de entre semana	Recién actualizado


Precómpralo ahora	Precárgarlo ahora


Fin de semana gratis

Banner de destacados

Uso: los banners de destacados para promociones específicas, como ofertas de entre semana y ofertas del fin de semana, aparecen cerca de la parte superior de la página de inicio de Steam. También aparecen en los lugares correspondientes de la tienda, como las páginas de géneros o de etiquetas.

Diseño: este banner debe centrarse solo en el arte y el logotipo del juego. Los banners de destacados tendrán automáticamente una sección debajo de la imagen con texto describiendo el tipo de promoción (como por ejemplo «Oferta del fin de semana») y las fechas del fin de la misma.

Tamaño: 306 × 260 píxeles, JPEG.

Ubicación de ejemplo en Steam:

Banner superior

Uso: el banner superior de Steam solo se utiliza para los lanzamientos de juegos más importantes y ofertas del editor específicas. Este banner aparece en la parte superior de la página principal de la tienda de Steam.

Diseño: las imágenes del banner superior de Steam deben ser simples y llamativas. Suelen ser la ilustración clave que representa tu marca y el logotipo de tu producto. Pueden llevar los bordes difuminados o hacer una transición a un color sólido distinto si el color principal contrasta demasiado con el azul estándar de la tienda de Steam.

Tamaño: 1850 × 450 píxeles, PNG.
Tamaño del vídeo: 1850 × 450 píxeles, MP4 y WebM.

Banner superior para dispositivos móviles

Uso: esta es una versión para dispositivos móviles del banner superior de Steam. Aparecerá en navegadores de menos de 500 píxeles de ancho.

Diseño: debe coincidir con el diseño del banner superior, pero debe ser más pequeño. Utiliza el tamaño completo y llena el espacio con el logotipo y la llamada a la acción.

Tamaño: 500 × 350 píxeles, PNG.
Tamaño del vídeo: 500 × 350 píxeles, MP4 y WebM.

Banner inferior

Uso: el banner inferior de Steam solo se utiliza para algunos de los lanzamientos de juegos más importantes y ofertas del editor específicas. Este banner aparece cerca de la parte superior de la página principal de la tienda de Steam, pero justo debajo del carrusel de la cápsula principal.

Diseño: las imágenes del banner inferior de Steam deben ser simples y llamativas. Suelen ser la ilustración clave que representa tu marca y el logotipo de tu producto. Se mostrará como un banner en la página, por lo que puedes utilizar las dimensiones completas del recurso (sin bordes difuminados).

Tamaño: 940 × 150 píxeles, PNG.
Tamaño del vídeo: 940 × 150 píxeles, MP4 y WebM.

Banner inferior para dispositivos móviles

Uso: esta es una versión para dispositivos móviles del banner inferior de Steam. Aparecerá en navegadores de menos de 500 píxeles de ancho.

Diseño: debe coincidir con el diseño del banner inferior, pero debe ser más pequeño. Utiliza el tamaño completo y llena el espacio con el logotipo y la llamada a la acción.

Tamaño: 500 × 160 píxeles, PNG.
Tamaño del vídeo: 500 × 160 píxeles, MP4 y WebM.

Fondo de la página de ofertas

Uso: esta es la imagen que aparece en la parte superior y en el fondo de tu página de ofertas.

Diseño: el contenido crítico debe colocarse dentro del área segura de la plantilla, indicada por el recuadro verde lima de 940 píxeles de ancho. La ilustración puede extenderse hacia los lados y hacia abajo de la página como se desee. Por ejemplo, puedes utilizar el material gráfico del fondo con un ancho de 1789 píxeles y un degradado difuminado a un color sólido en los lados y en la parte inferior, y configurar el color de fondo de la página en Steamworks para que coincida con ese color.

Banner de la página de la tienda

Uso: el banner de la página de la tienda se puede configurar para que aparezca en la parte superior de la página de la tienda de todos los juegos que formen parte de tu evento. Solo puedes usar los banners de la página de la tienda si los creadores de todos los juegos incluidos en tu página de ofertas están al corriente y los aprueban. Dicho de otro modo, ningún desarrollador debería sorprenderse de que tu banner aparezca en la parte superior de la página de la tienda de su juego.

Diseño: las imágenes del banner de la página de la tienda deben ser simples y llamativas. Normalmente, la principal ilustración que representa el evento de ofertas.

Tamaño: 1100 × 160 píxeles, PNG.

Banner de la página de la tienda para dispositivos móviles

Uso: esta es una versión para dispositivos móviles del banner de la página de la tienda. Aparecerá en navegadores de menos de 500 píxeles de ancho.

Diseño: debe coincidir con el diseño del banner de la página de la tienda, pero debe ser más pequeño. Utiliza el tamaño completo y llena el espacio con el logotipo y la llamada a la acción.

Tamaño: 500 × 160 píxeles, PNG.