El diseño del DMG, completado con coordenadas
En la Parte 1 presentamos la herramienta create-dmg y preparamos la carpeta de staging que contiene únicamente el .app y la imagen de fondo.
Ahora llega la última pieza, el layout. Cómo de grande abrir la ventana del DMG, dónde colocar el icono de la app y el acceso directo a Applications — todo eso se decide mediante las coordenadas que se le pasan a create-dmg. En este artículo diseñaremos esas coordenadas una a una.
Igual que en la Parte 1,
FocusTimer, los valores de coordenadas, etc. son todos ejemplos.
El comando create-dmg completo
Veamos primero el aspecto completo del comando terminado. Es el comando para crear el DMG de la app de ejemplo FocusTimer 1.0.
create-dmg \
--volname "FocusTimer 1.0" \
--background build/dmg-background.png \
--window-pos 200 120 \
--window-size 600 400 \
--icon-size 100 \
--icon "FocusTimer.app" 175 190 \
--hide-extension "FocusTimer.app" \
--app-drop-link 425 190 \
--no-internet-enable \
"build/FocusTimer-1.0.dmg" \
"build/dmg-stage/"
Las dos últimas líneas son el producto y el material.
build/FocusTimer-1.0.dmg— la ruta del archivo DMG que se va a crearbuild/dmg-stage/— la carpeta de staging en la que, en la Parte 1, dejamos únicamente el.app
Las líneas que empiezan por -- que están encima son las opciones que diseñan la ventana y los iconos. Las veremos una a una.
Entender el sistema de coordenadas
Antes de ver las opciones, fijemos cómo funcionan las coordenadas.
Las coordenadas de posición de create-dmg son todas coordenadas internas de la ventana del DMG. La unidad son los puntos (point) que explicamos en la Parte 1.
- El origen
(0, 0)es la esquina superior izquierda de la ventana. - La X crece hacia la derecha y la Y crece hacia abajo. (Atención: a diferencia de un gráfico matemático, la Y aumenta hacia abajo.)
- Si has fijado el tamaño de la ventana en
600 400, las coordenadas se mueven dentro del rango0~600en horizontal y0~400en vertical.
Las coordenadas de posición de un icono apuntan al punto central de ese icono. No a su esquina superior izquierda, sino justo a su centro.
Las opciones, una a una
| Opción | Valor (ejemplo) | Significado |
|---|---|---|
--volname | "FocusTimer 1.0" | El nombre del volumen que se muestra cuando el DMG está montado |
--background | build/dmg-background.png | La imagen de fondo de la ventana (la preparada en la Parte 1) |
--window-pos | 200 120 | La posición en la pantalla donde se abre la ventana (X, Y) |
--window-size | 600 400 | El tamaño de la ventana (ancho, alto — en puntos) |
--icon-size | 100 | El tamaño de los iconos dentro de la ventana (en puntos) |
--icon "FocusTimer.app" | 175 190 | La posición del icono de la app (X, Y dentro de la ventana) |
--hide-extension "FocusTimer.app" | — | Oculta la extensión .app del nombre del icono |
--app-drop-link | 425 190 | La posición del acceso directo a la carpeta Applications (X, Y dentro de la ventana) |
--no-internet-enable | — | Desactiva la función “internet-enable”, ya en desuso |
Algunas merecen un comentario aparte.
--window-pos vs --window-size — es fácil confundirlas. --window-pos es en qué lugar de la pantalla (el escritorio) aparece la ventana cuando el usuario abre el DMG, y --window-size es el tamaño de la ventana en sí. Lo importante para el diseño de coordenadas es --window-size.
--icon-size 100 — los iconos dentro de la ventana se dibujan con un tamaño de 100 puntos. Necesitas conocer este valor también al diseñar la imagen de fondo, porque el espacio de 100 puntos (= 200 píxeles en la imagen de fondo) que ocuparán los iconos debe dejarse vacío en el fondo.
--icon y --app-drop-link — estos dos son los protagonistas izquierdo y derecho de la ventana. --icon es el icono de la app que el usuario debe arrastrar, y --app-drop-link es el destino al que arrastrarlo: el acceso directo a la carpeta Applications. Con --app-drop-link no necesitas crear ningún enlace simbólico por separado; create-dmg se encarga por sí mismo de crear y colocar el acceso directo a Applications.
--hide-extension — sin esto, debajo del icono se muestra FocusTimer.app, con la extensión incluida. Si la ocultas, se ve de forma limpia solo como FocusTimer.
--no-internet-enable — el “internet-enable” era una antigua función con la que Safari procesaba automáticamente los DMG descargados, y hoy ya no se usa. Si pasas esta opción, create-dmg se salta ese paso de procesamiento y la advertencia asociada.
Diseño de coordenadas — colocar los dos iconos
Ahora llega el núcleo. Como hemos fijado el tamaño de la ventana en 600 400, vamos a decidir dónde colocar dentro de ella el icono de la app y el acceso directo a Applications.
En el comando de ejemplo los fijamos así.
- Icono de la app:
--icon "FocusTimer.app" 175 190 - Acceso directo a
Applications:--app-drop-link 425 190
Si desglosamos el significado de estos números, es lo siguiente.
Eje X (horizontal) — 175 y 425
El ancho de la ventana es de 600 puntos y su centro es 300. Si colocas los dos iconos en 175 y 425, cada uno queda a una distancia de 125 a la izquierda y 125 a la derecha del centro. Es decir, los dos iconos quedan dispuestos de forma simétrica respecto al centro. Como el icono de la app está a la izquierda y Applications a la derecha, se crea la dirección natural de “arrastrar de izquierda a derecha”.
Eje Y (vertical) — ambos en 190
El alto de la ventana es de 400 puntos y su centro es 200. Si colocas los dos iconos en el mismo valor 190, quedan alineados a la misma altura y se sitúan ligeramente por encima del centro exacto (200). Como la etiqueta con el nombre se pega debajo del icono, al subirlo un poco el conjunto —incluida la etiqueta— queda visualmente centrado.
No existe una respuesta correcta única para las coordenadas. Los valores anteriores no son más que un ejemplo equilibrado de cómo colocar “dos iconos de 100 puntos alineados de forma simétrica en una ventana de 600×400”. Ajústalos libremente según tu propio diseño de fondo.
Hacer coincidir la imagen de fondo con las coordenadas
Aquí vuelve a aparecer la convención @2x de la Parte 1.
Las coordenadas de los iconos (175,190, 425,190) son coordenadas en puntos de la ventana. Sin embargo, la imagen de fondo es el doble: 1200×800 píxeles. Al dibujar la flecha en la imagen de fondo, hay que pensar en las coordenadas en píxeles multiplicando por 2 las coordenadas de la ventana.
coordenada en píxeles de la imagen de fondo = coordenada en puntos de la ventana × 2
Si convertimos los dos iconos del ejemplo a coordenadas en píxeles de la imagen de fondo, queda así.
| Elemento | Coordenada de la ventana (puntos) | Coordenada de la imagen de fondo (píxeles) |
|---|---|---|
| Centro del icono de la app | (175, 190) | (350, 380) |
Centro de Applications | (425, 190) | (850, 380) |
Por tanto, al dibujar la flecha guía en la imagen de fondo (1200×800), hay que dibujarla entre los píxeles (350, 380) y (850, 380), que son los lugares de los dos iconos. Como el tamaño de los iconos es de 100 puntos = 200 píxeles, deja vacía la zona de 200 píxeles que ocupa cada icono y coloca la flecha en el espacio intermedio.
Hacer coincidir bajo el mismo criterio la ilustración de la imagen de fondo y las coordenadas de los iconos de create-dmg es precisamente el núcleo del diseño del DMG. Si ambas no concuerdan, la flecha pasará de largo junto a los iconos o se dibujará superpuesta sobre ellos.
Verificación y ajuste fino
Al ejecutar el comando se crea build/FocusTimer-1.0.dmg. Haz doble clic en el DMG generado y ábrelo tú mismo.
- ¿El fondo llena la ventana sin huecos? (Si está encogido en una esquina → es el escollo del DPI de la Parte 1. Normaliza a 144 con
sips.) - ¿El icono de la app y
Applicationsestán bien colocados en los dos extremos de la flecha del fondo? - ¿Las etiquetas con los nombres de los iconos no quedan cortadas ni superpuestas?
Lo normal es que las coordenadas no encajen perfectas a la primera. Basta con cambiar poco a poco los números de --icon y --app-drop-link, volver a ejecutar el comando y comprobarlo a ojo, repitiendo ese proceso unas cuantas veces. Una vez que fijas las coordenadas, ya casi nunca tendrás que volver a cambiarlas.
Reutilizar en cada release — automatización
El diseño del DMG es, en la práctica, un trabajo que se hace una sola vez. Una vez que fijas la imagen de fondo y las coordenadas, reutilizas la misma configuración en todos los releases posteriores.
Por eso conviene incluir esta llamada a create-dmg como un paso del script de compilación de releases. En el script el flujo suele ser este.
- Copiar a la carpeta de staging el
.appfirmado, notarizado y con el staple aplicado (Parte 1) - Copiar la imagen de fondo y luego normalizar el DPI a 144 con
sips(para prevenir el escollo de la Parte 1) - Ejecutar
create-dmgcon las coordenadas diseñadas arriba - Limpiar los archivos temporales, como la carpeta de staging
Como solo cambia en cada release el número de versión (el 1.0 de --volname y el FocusTimer-1.0.dmg del nombre del archivo resultante), si extraes únicamente esa parte a una variable del script, no tendrás que retocar el comando cada vez. La ruta de la imagen de fondo y todas las coordenadas se dejan como valores fijos.
Se recomienda dejar que el script realice automáticamente la normalización del DPI de la imagen de fondo (
sips) en cada ejecución. Así, aunque al volver a exportar y reemplazar el original de diseño te olvides de normalizar el DPI, el script siempre lo corregirá.
Resumen de la serie
Hemos terminado el diseño del DMG repartido en dos partes. Ahora tienes lo siguiente.
- ✅ (Parte 1)
create-dmg+ carpeta de staging del.app+ imagen de fondo @2x con el DPI normalizado - ✅ (Parte 2) Diseño de las coordenadas de la ventana y los iconos + ajuste de las coordenadas en píxeles del fondo con las coordenadas en puntos de la ventana + automatización
Si resumimos de nuevo lo esencial, es esto.
- La ventana del DMG es de 600×400 puntos y la imagen de fondo el doble: 1200×800 píxeles (@2x).
- El DPI del PNG de fondo debe normalizarse siempre a 144 — solo así el fondo llena exactamente la ventana.
- Las coordenadas de los iconos son coordenadas en puntos del interior de la ventana y las coordenadas de la ilustración de fondo son el doble, coordenadas en píxeles — haz que ambas coincidan bajo el mismo criterio.
- El diseño que has fijado una vez se incluye en el script de compilación para reutilizarlo tal cual en cada release.
Una pequeña flecha, unos pocos puntos en la posición de un icono determinan la primera impresión del usuario. Dado que la ventana .dmg es el lugar donde el usuario se encuentra por primera vez con tu app, merece la pena diseñarla con esmero una vez.