La primera pantalla que ve el usuario

Cuando distribuyes una app de macOS por tu cuenta, el usuario descarga el archivo .dmg y hace doble clic en él. En ese instante se abre una ventana del Finder. Esa ventana es la primera pantalla en la que el usuario se encuentra con tu app.

Una ventana .dmg bien hecha suele tener este aspecto: una imagen de fondo con instrucciones, el icono de la app a la izquierda y un acceso directo a la carpeta Applications a la derecha. El usuario arrastra y suelta el icono de la app sobre Applications para completar la instalación. Esta “instalación por arrastre” es, de facto, la experiencia de instalación estándar de las apps indie de macOS.

Esa ventana no aparece sola. Tienes que definir tú mismo la imagen de fondo, el tamaño de la ventana y la posición y el tamaño de los iconos. Esta serie trata sobre cómo diseñar esa ventana .dmg.

Esta serie parte de la premisa de que ya tienes en la mano un .app firmado, notarizado y con el staple aplicado. Es decir, una app en la fase justo anterior a la distribución. Ese proceso lo cubrimos en la serie “Distribuir una app de macOS por tu cuenta”. El .dmg es el producto del canal de distribución directa (Developer ID) y no tiene relación con el canal de la Mac App Store.

Lo que vamos a construir en esta serie

A lo largo de dos partes obtendrás lo siguiente.

• (Parte 1, este artículo) La herramienta create-dmg + una carpeta de staging que contiene únicamente el .app + la preparación de la imagen de fondo
• (Parte 2) El diseño de las coordenadas de la ventana, los iconos y el enlace a Applications + el ajuste de la imagen de fondo con las coordenadas + la automatización

Al terminar la serie deberías tener listo lo siguiente.

• Una carpeta de staging que aísla y contiene únicamente el .app
• Una imagen de fondo que cumple la convención @2x Retina y con el DPI normalizado
• Un comando create-dmg con el tamaño de la ventana y la posición de los iconos definidos en coordenadas
• Todo en una forma reutilizable tal cual en cada release

App de ejemplo — FocusTimer

Igual que en las series anteriores, tomamos como ejemplo una app de macOS ficticia llamada FocusTimer (una sencilla app de temporizador para gestionar el tiempo de concentración). FocusTimer, las rutas, los valores de coordenadas, etc. son todos ejemplos. En la práctica, cámbialos según tu propia app.

Qué es un DMG

Un DMG (.dmg) es un archivo de imagen de disco (disk image) de macOS. Puedes pensarlo como un “disco virtual” que contiene toda una estructura de carpetas y archivos dentro de un único archivo. Cuando el usuario hace doble clic en el .dmg, macOS lo monta como si fuera un disco y su contenido se abre en una ventana del Finder.

Las razones para usar un DMG en la distribución de apps son estas.

• Una app (.app) es, en realidad, una carpeta. Subir una carpeta tal cual a internet es difícil, pero si la envuelves en un DMG se convierte en un solo archivo.
• Puedes incluir dentro de la ventana del DMG un acceso directo a la carpeta Applications para guiar al usuario a que instale con un solo arrastre.
• Puedes diseñar el aspecto de la ventana —fondo, posición de los iconos, etc.—, lo que permite ofrecer una experiencia de instalación pulida.

La herramienta — create-dmg

Para crear un DMG a mano hay que pasar por varios pasos: crear la imagen con hdiutil, montarla, manipular la ventana del Finder con AppleScript para colocar los iconos, volver a desmontarla, etc. Es engorroso y fácil de equivocarse.

create-dmg es una herramienta de código abierto que agrupa todo ese proceso en un solo comando. Si le pasas como opciones la imagen de fondo, el tamaño de la ventana y las coordenadas de los iconos, te genera un .dmg terminado.

Ya la instalamos cuando preparamos las herramientas previas en la Parte 1 de la serie “Distribuir una app de macOS por tu cuenta”. Si todavía no la tienes, instálala con Homebrew.

brew install create-dmg

Existen dos proyectos con el nombre create-dmg. El que usamos en este artículo es la herramienta de línea de comandos que se instala con Homebrew (create-dmg/create-dmg). No la confundas con el otro proyecto distinto, que tiene nombres de opciones diferentes.

Paso 1 — Una carpeta de staging que contiene únicamente el .app

Dentro del DMG solo debe entrar, de forma limpia, un único icono de app. Sin embargo, cuando compilas y exportas la app, en la carpeta resultante quedan, además del .app, archivos residuales como DistributionSummary.plist o registros de empaquetado. Si conviertes esa carpeta tal cual en un DMG, esos residuos también quedarán expuestos en la ventana.

Por eso copiamos únicamente el .app a una carpeta vacía para aislarlo y luego usamos esa carpeta como material del DMG. A esa carpeta de aislamiento se la suele llamar carpeta de staging.

# Copiar solo el .app a una carpeta vacía para que no se mezcle con residuos
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

Ahora dentro de build/dmg-stage/ solo está FocusTimer.app. Si al crear el DMG le indicas a create-dmg que apunte a esta carpeta, en la ventana aparecerá únicamente el icono de la app, de forma limpia. (El acceso directo a la carpeta Applications lo generaremos automáticamente en la Parte 2 mediante una opción de create-dmg.)

Paso 2 — Preparar la imagen de fondo

El núcleo del diseño de la ventana del DMG es la imagen de fondo. Como es la parte donde más gente se atasca, la veremos paso a paso.

Tamaño del lienzo — por qué 1200×800

En la Parte 2 le pasaremos a create-dmg la opción --window-size 600 400 para definir el tamaño de la ventana del DMG. La unidad de 600 y 400 no son píxeles, sino puntos (point). El punto es la unidad de coordenadas lógicas que usa macOS.

En las pantallas Retina, 1 punto se dibuja como 2 píxeles. Por tanto, para llenar una ventana de 600×400 puntos sin huecos y de forma nítida, la imagen de fondo debe crearse al doble: 1200×800 píxeles. Esta es la convención @2x (resolución 2x).

En resumen: la ventana es de 600×400 puntos y la imagen de fondo de 1200×800 píxeles. Esta relación de 2x volverá a ser importante en la Parte 2 cuando definamos las coordenadas.

Qué se dibuja en el fondo

Aquí conviene aclarar un malentendido común. En la imagen de fondo no se dibuja el icono de la app ni el icono de la carpeta Applications. Esos iconos los coloca create-dmg sobre la ventana, usando los archivos reales (Parte 2).

Lo que se incluye en la imagen de fondo son únicamente elementos decorativos y de guía.

• Una flecha que va desde el icono de la app hacia la carpeta Applications — es el diseño más habitual para guiar la mirada y la mano del usuario indicándole “arrastra hacia aquí”.
• Si hace falta, un breve texto de guía como “Arrastra aquí”
• Colores de marca o un patrón de fondo tenue

Es decir, la imagen de fondo es “una ilustración que deja vacíos los lugares donde irán los iconos y solo dibuja la línea guía que los une”. Los dos lugares —izquierda y derecha— donde irán los iconos (en la Parte 2, cada uno de 100 puntos = 200 píxeles de tamaño) se dejan vacíos, y la flecha se coloca en el centro, entre ambos.

Un escollo clave — el DPI

El escollo con el que más gente tropieza en la imagen de fondo es el DPI (píxeles por pulgada).

Cuando exportas un PNG desde un editor de imágenes, el archivo guarda no solo el número de píxeles (1200×800), sino también un valor de DPI. Al dibujar el fondo del DMG, el Finder consulta ese DPI y calcula a la inversa “cuántos puntos mide esta imagen”. El cálculo es, aproximadamente, este.

tamaño en puntos = número de píxeles ÷ (DPI ÷ 72)

• Si el DPI es 144: 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 puntos. Llena exactamente la ventana (600 pt). ✅
• Sin embargo, algunos editores de imágenes (por ejemplo, Pixelmator Pro) incrustan al exportar un valor de DPI arbitrario (por ejemplo, 338). Si el DPI es 338: 1200 ÷ (338 ÷ 72) ≈ 256 puntos. Queda mucho más pequeño que la ventana (600 pt), por lo que el fondo se dibuja encogido en la esquina superior izquierda de la ventana. ❌

El número de píxeles es exactamente el mismo (1200×800), pero el fondo se rompe solo por culpa del DPI. La primera vez que te pasa, encontrar la causa es realmente difícil.

La solución es forzar la unificación del DPI del PNG exportado a 144. Con el comando sips, integrado de serie en macOS, basta una sola línea.

sips -s dpiWidth 144 -s dpiHeight 144 dmg-background.png

Tras pasar por esta única línea, sea cual sea el DPI que haya incrustado el editor, queda fijado a 144 y los 1200×800 píxeles se interpretan exactamente como 600×400 puntos.

Punto clave — la imagen de fondo se ① crea a 1200×800 píxeles y ② tras exportarla, se normaliza el DPI a 144 con sips. Si respetas estas dos cosas, evitarás el escollo del DPI.

Resumen de la Parte 1

Si has seguido hasta aquí, ahora tienes lo siguiente.

• ✅ La herramienta create-dmg instalada + comprendido su papel
• ✅ Una carpeta de staging que aísla y contiene únicamente el .app (build/dmg-stage/)
• ✅ Una imagen de fondo creada a 1200×800 píxeles y con el DPI normalizado a 144

Los materiales están listos. Pero todavía no tienes la ventana en la que mostrar la imagen de fondo y colocar los iconos. Cómo de grande abrir la ventana, 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 la siguiente parte diseñaremos esas coordenadas una a una, veremos cómo hacer coincidir las coordenadas en píxeles del fondo con las coordenadas en puntos de la ventana para que la flecha de la imagen de fondo quede exactamente entre los dos iconos, y cómo automatizar este proceso para reutilizarlo en cada release.