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
(Nota: Utiliza esta plantilla nueva 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 anticipación para que podamos darte 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**
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 agregues 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 agregar 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 video 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 tienen animaciones	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 × 350 píxeles	JPG	Material gráfico del juego con logo. El texto se colocará en la parte inferior automáticamente. Ver detalles
Banner de takeover	1850 × 450 px	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 takeover 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 de takeover. Obligatoria si se ejecuta un takeover Ver detalles
Banner de takeunder	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 de takeunder para dispositivos móviles	500 × 160 px	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	La imagen que aparece en la parte superior y en el fondo de tu página de ofertas.Obligatoria si hay una página de inicio personalizada de la oferta Ver más información.
Logotipo de la página de ofertas	940 × 460 píxeles	JPG, PNG	Esta imagen se coloca en la parte superior de tu página, en capas sobre el fondo de la página de ofertas. Optional
Banner de la página de la tienda	1100 × 160 píxeles	JPG, PNG	Banner que destaca tu evento de ofertas. Obligatorio si hay una página de inicio personalizada de la oferta Ver más información
Banner de la página de la tienda para dispositivos móviles	500 × 160 px	JPG, PNG	Versión más paqueña del banner de la página de la tienda. Obligatoria si hay una página de inicio personalizada de la oferta Ver más información

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

Mensajes emergentes de marketing

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

Ejemplo de ubicaciones en Steam:

Diseño: para un resultado óptimo, asegúrate de que el logotipo es claramente legible y SOLO incluye una indicación del tipo de promoción que es (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 automáticamente 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 video: 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


Resérvalo 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 enfocarse 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 x 260 píxeles, JPEG.

Ejemplo de ubicación en Steam:

Banner de takeover

Uso: El takeover de Steam solo se utiliza para los lanzamientos de juegos más grandes u 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 de takeover 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 video: 1850 × 450 píxeles, MP4 y WebM

Banner de takeover para dispositivos móviles

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

Diseño: Las imágenes de takeunder en Steam deben ser simples y llamativas. Normalmente, la pieza clave y singular del material gráfico que representa tu marca y el logotipo de tu producto.

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

Banner de takeunder

Uso: El takeunder de Steam solo se utiliza para algunos de los lanzamientos de juegos más grandes u ofertas del editor específicas. Este banner aparece cerca de la parte superior de la página principal de la tienda de Steam, justo debajo del carrusel de cápsulas principales.

Diseño: Debe coincidir con el diseño de takeunder, pero más pequeño. 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, de modo que puedes utilizar las dimensiones completas del recurso (sin bordes difuminados).

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

Banner de takeunder para dispositivos móviles

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

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

Tamaño: 500 × 160 píxeles, PNG
Tamaño del video: 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. El material gráfico puede extenderse hacia los lados y hacia abajo de la página como se desee. Por ejemplo, puedes ejecutar el material gráfico del fondo a 1789 píxeles de ancho con un fundido a un color sólido en los laterales y la parte inferior y, a continuación, establecer el color de fondo de la página para que coincida con este color sólido en Steamworks.

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. En otras palabras, no debe tomar por sorpresa a ninguno de los desarrolladores que tu banner aparezca en la parte superior de la página de la tienda de sus juegos.

Diseño: las imágenes del banner de la página de la tienda deben ser simples y llamativas. Normalmente, la pieza clave y singular del material gráfico que representa el evento de ofertas.

Tamaño: 500 × 160 píxeles en formato 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 banner de la página de la tienda, pero más pequeño. Normalmente, la pieza clave y singular del material gráfico que representa tu marca y el logotipo de tu producto.

Tamaño: 500 × 160 píxeles en formato PNG