Capturas panorámicas para el App Store: cómo diseñar un set continuo

Las capturas de pantalla panorámicas para el App Store son un set diseñado como una sola imagen ancha y dividido en capturas separadas, de modo que un fondo, una forma o un dispositivo parece continuar de una captura a la siguiente cuando la gente desliza. Funcionan cuando cada fragmento sigue sosteniéndose como captura por sí solo, porque el App Store muestra huecos entre las capturas y muchas veces las enseña de una en una o de pocas en pocas. Preparar el archivo es sencillo: un lienzo que mide exactamente N capturas de ancho, dividido en anchos de píxeles exactos.

En este post veremos cómo aparece realmente un set continuo en los resultados de búsqueda y en la página de producto, cómo diseñar alrededor de los cortes, cómo montar y dividir el archivo, y cuándo no vale la pena hacer una panorámica.

Cómo se ven las capturas panorámicas en el App Store

El mismo set aparece en tres contextos distintos, y una panorámica se comporta de forma diferente en cada uno.

La guía de Apple sobre la página de producto dice que de una a tres capturas aparecen en los resultados de búsqueda cuando no hay vista previa de la app, según la orientación. Un set horizontal muestra una sola captura en la búsqueda, así que una panorámica horizontal nunca se ve como panorámica en la búsqueda. Explicamos el diseño de los resultados de búsqueda con más detalle en qué poner en tu primera captura del App Store.

Diseñar alrededor del corte

El corte es el borde donde termina una captura y empieza la siguiente. En la página de producto ahí hay un hueco visible, así que todo lo que cruza un corte se muestra con un trozo de menos en el medio. Diseña pensando en ese hueco en lugar de hacer como si no existiera.

Qué puede cruzar un corte

• Fondos y áreas de color, como un degradado que cambia de tono a lo largo del set o una línea de horizonte.
• Formas y líneas sencillas: una cinta, una onda, un camino, un círculo grande. El ojo completa el hueco sin esfuerzo.
• Elementos secundarios de la interfaz, como una tarjeta flotante o la línea de un gráfico que lleva hacia la captura siguiente.
• Un dispositivo inclinado, pero solo si la parte que queda a cada lado sigue pareciendo intencionada. Un teléfono partido limpiamente por la mitad casi nunca lo parece.

Qué nunca debería cruzar un corte

• Los textos. Una frase partida entre dos capturas es ilegible en la vista a pantalla completa y en las versiones localizadas.
• Caras, logotipos y la interfaz clave que quieres que la gente lea.
• Cualquier cosa que tenga que verse dentro del 5 % exterior de un fragmento, más o menos. Deja un margen de seguridad a ambos lados de cada corte, porque las esquinas son redondeadas y el hueco oculta el borde.

Que cada fragmento se sostenga solo

Una buena prueba: exporta el set y mira cada captura por separado, a tamaño completo. Cada una debería tener un texto, una parte clara de interfaz real de la app y una composición que se vea terminada aunque los elementos continuos queden cortados en los bordes. La directriz 2.3.3 de Apple sigue aplicándose a cada fragmento: las capturas «deben mostrar la app en uso», así que un fragmento que solo es la continuación de un gráfico de fondo es débil y además un riesgo de rechazo. Enumeramos las demás directrices que tumban capturas en por qué Apple rechaza capturas del App Store.

Dale ritmo a la panorámica

Los sets continuos funcionan mejor cuando la continuidad es discreta y el contenido es lo que destaca. Un patrón que suele leerse bien: las capturas 1 a 3 comparten un elemento de conexión fuerte (un solo barrido de color o un dispositivo que ocupa la 1 y la 2), y de la captura 4 en adelante se mantiene el mismo sistema de fondo con conexiones más ligeras. Así la tira de la búsqueda se ve deliberada y las capturas posteriores siguen siendo fáciles de cambiar.

Preparar el archivo: un lienzo ancho dividido en marcos exactos

1. Elige el tamaño de exportación y la cantidad

El ancho del lienzo es el ancho de la captura multiplicado por el número de capturas de la panorámica. La altura es la altura de la captura. Los tamaños en píxeles tienen que coincidir exactamente con un tamaño aceptado; consulta nuestra referencia de tamaños de capturas y las especificaciones de capturas de pantalla de Apple.

Los sets de iPhone, iPad y Google Play tienen relaciones de aspecto distintas, así que cada uno necesita su propia panorámica. Escalar un lienzo ancho a otra altura desplaza todos los cortes.

2. Marca los cortes antes de diseñar

Añade guías en cada múltiplo del ancho de la captura (1290, 2580, 3870 y 5160 en el primer ejemplo) y un margen de seguridad a cada lado. En Figma, lo más sencillo es una fila de marcos con el tamaño de exportación, pegados borde con borde sin hueco, con el arte continuo en un grupo que los atraviesa; cada marco recorta su parte. Nuestro post sobre cómo hacer capturas del App Store en Figma explica los marcos y los ajustes de exportación.

3. Divide en anchos exactos

Si diseñas en un solo lienzo ancho en vez de en marcos separados, divídelo en piezas del tamaño exacto de la captura. Con ImageMagick:

magick panorama.png -crop 1290x2796 +repage +adjoin shot-%02d.png

Eso genera shot-00.png, shot-01.png y así sucesivamente, cada una de exactamente 1290 × 2796. Si el ancho del lienzo no es un múltiplo exacto, la última pieza sale más estrecha y App Store Connect la rechazará al subirla, así que comprueba antes el tamaño del lienzo. Aplana el resultado (sin transparencia) antes de subirlo; Apple no acepta imágenes con canal alfa.

4. Previsualiza con huecos

Antes de publicar, coloca los archivos exportados uno al lado de otro con un hueco entre ellos y esquinas redondeadas, más o menos al tamaño de un resultado de búsqueda. Así ves la panorámica como la va a ver la gente de verdad, que muchas veces sorprende comparada con el lienzo sin cortes en el que diseñaste.

Errores comunes con las panorámicas

• Diseñar solo en el lienzo sin cortes. El set se ve genial como una sola imagen en la herramienta de diseño y roto en la tienda, porque nunca se previsualizaron los huecos.
• Un dispositivo partido por la mitad. Medio teléfono en la captura 2 y la otra mitad en la 3 parecen dos errores de recorte cuando se abre cualquiera de las dos sola.
• Textos que dependen unos de otros. «Planifica tu semana» seguido de «...y cúmplela» solo funciona si se ven juntos, y en la vista a pantalla completa no se ven juntos.
• Demasiado fondo y muy poca app. El gráfico continuo ocupa tanto espacio que la interfaz se reduce a una miniatura dentro de una miniatura.
• Olvidarse de los otros sets. La panorámica de iPhone está terminada, y los sets de iPad y Google Play son recortes apresurados de ella con los cortes en los sitios equivocados.
• Fragmentos desfasados por unos píxeles. Un lienzo de 6448 px en vez de 6450 px deja la última pieza con un tamaño incorrecto, y App Store Connect la rechaza al subirla.

Cuándo no hacer un set panorámico

Un diseño continuo no es mejor automáticamente. Descártalo, o limítalo a las tres primeras capturas, cuando:

• Piensas probar o reordenar las capturas a menudo. Mover la captura 3 a la posición 1 para una prueba de optimización de la página de producto rompe una panorámica. Las capturas independientes son mucho más fáciles de probar.
• Usas páginas de producto personalizadas. Cada página de producto personalizada suele usar otro orden o un subconjunto distinto de capturas, algo que una sola panorámica no admite sin rediseño.
• Localizas a muchos idiomas. La longitud de los textos cambia según el idioma, y hay que revisar cada elemento continuo en cada idioma.
• Tu set es horizontal. En la búsqueda solo aparece una captura horizontal, así que el efecto solo se ve en la página de producto.
• Tu primera captura tiene que esforzarse mucho por sí sola. Si la panorámica debilita la captura 1 (interfaz más pequeña, un dispositivo cortado, un texto desplazado a un lado), la primera impresión paga el precio del efecto.
• Empiezas con una vista previa de la app. El video ocupa la primera posición, así que la tira de la búsqueda empieza con la vista previa y no con el panel que diseñaste.

En resumen

• Trata las capturas 1 a 3 como el panel que la gente ve en la búsqueda; todo lo demás es un extra
• Deja que solo los fondos, las formas y los elementos secundarios crucen los cortes
• Mantén los textos, las caras y la interfaz clave dentro de cada fragmento, con un margen de seguridad
• Revisa cada fragmento por separado a tamaño completo: texto, interfaz real, composición terminada
• Ancho del lienzo = ancho de la captura × cantidad, con lienzos separados por dispositivo y por tienda
• Divide en anchos de píxeles exactos, aplana y previsualiza con huecos antes de subir

Para el proceso completo, de la historia a la subida, consulta cómo hacer capturas de pantalla para el App Store.