Para la versión 1.1 de mi diario Lanternly necesitaba una imagen para dos sitios nuevos de App Store Connect: la cabecera de la página de producto y los resultados de búsqueda. No tenía un diseño nuevo para ella, y volver a hacer capturas de la app tampoco me apetecía. Lo que sí tenía eran las capturas de iPhone publicadas en inglés y en ruso. Con ellas monté un único archivo de 5244 × 2950 que sirve para los dos sitios.
Los tamaños, formatos y reglas de Apple ya los repasé en el artículo sobre Creative Assets, así que aquí no los repito. Este artículo va del montaje y de un error que encontré en mi propia portada cuando ya la había subido.
Por qué a partir de las capturas#
Las capturas ya pasaron la revisión y muestran con exactitud lo que hay en la app. Si saco las pantallas de ahí, la portada no promete nada de más. Y no hace falta dibujarla aparte para cada idioma: las pantallas ya están localizadas, solo queda traducir el título y una línea debajo.
La composición es sencilla: título y subtítulo arriba en el centro, debajo tres teléfonos («Hoy» en el centro, el chat con Luna y el calendario a los lados) y, sobre el teléfono central, la mascota Luna. En el encuadre no hay nada más que iPhone, y eso es una cuestión de principio.
Hay una historia detrás. La primera versión del mismo script también generaba imágenes para iPhone Duo: cogía las capturas de iPad y las recortaba al tamaño de Duo. Eso no se puede hacer. En el hueco de un dispositivo tiene que ir una captura hecha en ese dispositivo; si no, la imagen muestra algo distinto de lo que la persona va a recibir. Borré esos conjuntos de App Store Connect. El hueco de Duo está vacío hasta que pueda sacar capturas en el simulador de Duo.
Cómo se monta el archivo#
Un script en Python hace tres pasos.
Recorta los teléfonos de las capturas. En el artboard del App Store, el teléfono está dentro de un marco oscuro sobre un fondo claro. El script busca la primera fila con una cantidad notable de píxeles oscuros: es el borde superior del marco. A partir de esa fila encuentra los bordes izquierdo y derecho y recorta el teléfono hasta el final del artboard. Las esquinas redondeadas las tapa con una máscara de radio igual al 12,5 % del ancho, para que detrás quede un fondo transparente y no un trozo del artboard antiguo.
Genera una página HTML. Fondo, una mancha de luz suave, tres teléfonos con sombra y un giro de ±6°, el título en Lora y la línea en Inter, las mismas fuentes que en la app. Luna es un SVG vectorial sacado de los originales de los stickers.
La renderiza en Chrome headless. La página está maquetada a 2622 × 1475 píxeles CSS y se captura con un factor de 2:
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
--headless=new --hide-scrollbars --allow-file-access-from-files \
--virtual-time-budget=3000 --force-device-scale-factor=2 \
--window-size=2622,1475 --screenshot=header-en.png \
file:///path/to/_header-en.htmlEl resultado mide exactamente 5244 × 2950. --virtual-time-budget da tiempo a que se carguen las fuentes y el SVG antes de la captura; si no, en la imagen sale la fuente de reserva.
Un detalle importante: el PNG tiene que ir sin canal alfa, porque Apple no acepta transparencia. La captura de Chrome no lleva alfa si el fondo de la página es opaco, pero después de cualquier posprocesado vuelvo a guardar el archivo en RGB.
El error que encontré después de subirla#
Sobre el recorte, Apple solo habla en términos generales:
Be sure your focal point artwork is within the center of your composition to prevent any unwanted clipping.
No hay una geometría exacta. Si se parte de que el recurso universal 16:9 se recorta por el centro, sale esto:
| Dónde | Proporción | Qué queda de 5244 × 2950 | Qué se recorta |
|---|---|---|---|
| Cabecera | 21:9 | todo el ancho, 2247 px de alto | 351 px arriba y 351 abajo |
| Búsqueda | 3:2 | todo el alto, 4425 px de ancho | 410 px a la izquierda y 410 a la derecha |
Superpuse esos dos marcos sobre mi portada y vi que el título empezaba en el píxel 240 desde arriba. En la cabecera 21:9, el límite superior pasa por el 351. Si el recorte es central, el título «A journal that stays yours» queda cortado por la mitad.
La primera versión ya la había subido a App Store Connect antes de comprobarlo. A revisión no llegó: la versión 1.1 todavía no se ha enviado.
Ahora hago la comprobación antes de subir nada. Este es el script que dibuja los dos marcos sobre la portada y guarda una vista previa reducida:
#!/usr/bin/env python3
"""Marcos de recorte 21:9 y 3:2 sobre un recurso 16:9: python3 crop_check.py header.png preview.png"""
import sys
from PIL import Image, ImageDraw
src, preview = sys.argv[1], sys.argv[2]
im = Image.open(src).convert("RGB")
W, H = im.size
d = ImageDraw.Draw(im)
h21 = round(W * 9 / 21) # cabecera: todo el ancho
top = (H - h21) // 2
d.rectangle((0, top, W - 1, top + h21), outline=(255, 0, 0), width=14)
w32 = round(H * 3 / 2) # búsqueda: todo el alto
left = (W - w32) // 2
d.rectangle((left, 0, left + w32, H - 1), outline=(0, 0, 255), width=14)
im.resize((W // 4, H // 4)).save(preview)
print(f"21:9 y {top}..{top + h21}, 3:2 x {left}..{left + w32}")El marco rojo es la cabecera y el azul, la búsqueda. Todo lo que tenga que leerse debe quedar dentro de la intersección de los dos.
Cómo lo arreglé sin volver a montarla#
Para entonces ya había borrado los artboards originales, así que no tenía con qué montar la portada de nuevo. Me salvó que la parte de arriba de la composición es fondo vacío. Bajé toda la imagen 260 píxeles y rellené la franja que quedó libre arriba con las 260 primeras filas originales de ese mismo fondo:
from PIL import Image
im = Image.open("header-en.png").convert("RGB")
W, H = im.size
D = 260
out = Image.new("RGB", (W, H))
out.paste(im.crop((0, 0, W, D)), (0, 0)) # franja de fondo arriba
out.paste(im.crop((0, 0, W, H - D)), (0, D)) # toda la composición D más abajo
out.save("header-en-v2.png", optimize=True)Ahora el título empieza en el píxel 500, dentro de los dos marcos. Por abajo se pierden 260 píxeles de la parte inferior de los teléfonos, pero las pantallas ya continuaban más allá del borde del encuadre, así que no se rompe nada. La costura en la fila 260 no se nota: ahí hay un degradado suave sin detalles.
Este truco solo funciona si el borde desde el que desplazas tiene un fondo uniforme. Si arriba hubiera un patrón o una foto, habría tenido que montarla de nuevo.
Lo que no sé#
- Cómo recorta Apple exactamente el recurso. El recorte central es una suposición mía, apoyada en la frase sobre el «center of your composition». La imagen exacta solo la da la «Vista previa» de App Store Connect, y hay que revisarla en cada idioma: la longitud del título cambia de un idioma a otro.
- Cómo se ve el recurso en iPad, Mac y Vision. La vista previa muestra iPhone y iPad. En el resto de dispositivos no lo he visto.
- Si la portada funcionará mejor que las capturas en los resultados. Eso solo lo dirán las estadísticas cuando salga la versión.
Si vas a hacer una portada parecida, superpón los marcos 21:9 y 3:2 antes de la primera subida. Lleva un minuto, y a mí me habría ahorrado una vuelta de más. Cómo traduje el resto de campos de la ficha a 39 idiomas lo cuento en otro artículo.
