Le premier écran que voit un utilisateur

Lorsque vous distribuez vous-même une application macOS, l’utilisateur télécharge un fichier .dmg et double-clique dessus. À ce moment-là, une seule fenêtre Finder s’ouvre. Cette fenêtre est le premier écran où l’utilisateur rencontre votre application.

Une fenêtre .dmg bien conçue ressemble généralement à ceci — une image de guide remplit le fond, l’icône de l’application se trouve à gauche, et un raccourci vers le dossier Applications se trouve à droite. L’utilisateur termine l’installation en faisant glisser l’icône de l’application vers Applications. Ce flux « glisser pour installer » est effectivement l’expérience d’installation standard pour les applications macOS indépendantes.

Cette fenêtre n’apparaît pas d’elle-même. Vous devez définir vous-même l’image de fond, la taille de la fenêtre, et la position et la taille de chaque icône. Cette série couvre la façon de concevoir cette fenêtre .dmg.

Cette série part du principe que vous avez déjà un .app qui a été signé, notarisé et agrafé (stapled) — en d’autres termes, une application à une étape de la distribution. Ce processus a été couvert dans la série « Distribuer soi-même une application macOS ». Un .dmg est un artefact du canal de distribution directe (Developer ID) et n’a rien à voir avec le canal Mac App Store.

Ce que cette série construit

En deux parties, vous obtiendrez les éléments suivants :

• (Partie 1, cet article) L’outil create-dmg + un dossier de staging ne contenant que le .app + une image de fond préparée
• (Partie 2) Conception des coordonnées de la fenêtre, des icônes et du lien de dépôt + alignement de l’image de fond avec ces coordonnées + automatisation

À la fin de la série, vous devriez avoir :

• Un dossier de staging qui isole et ne contient que le .app
• Une image de fond qui respecte la convention @2x Retina et dont le DPI est normalisé
• Une commande create-dmg dans laquelle la taille de la fenêtre et les positions des icônes sont toutes définies par des coordonnées
• Une forme que vous pouvez réutiliser telle quelle pour chaque publication

L’application exemple — FocusTimer

Comme dans les séries précédentes, nous utiliserons une application macOS fictive, FocusTimer (une simple application de minuterie pour gérer le temps de concentration), comme exemple. FocusTimer, les chemins, les valeurs de coordonnées, etc. sont tous des exemples. En pratique, adaptez-les à votre propre application.

Qu’est-ce qu’un DMG ?

Un DMG (.dmg) est un fichier d’image disque (disk image) macOS. Considérez-le comme un « disque virtuel » qui emballe toute une structure de dossiers et fichiers dans un seul fichier. Lorsque l’utilisateur double-clique sur un .dmg, macOS le monte comme un disque, et son contenu s’ouvre dans une fenêtre Finder.

Voici pourquoi les DMG sont utilisés pour la distribution d’applications :

• Une application (.app) est en réalité un dossier. Il est difficile de mettre un dossier directement sur Internet, mais l’envelopper dans un DMG le transforme en un seul fichier.
• Vous pouvez inclure un raccourci vers le dossier Applications dans la fenêtre DMG, guidant l’utilisateur pour installer en un seul glissement.
• Vous pouvez concevoir l’apparence de la fenêtre — son fond, les positions des icônes, etc. — rendant l’expérience d’installation soignée.

L’outil — create-dmg

Construire un DMG à la main nécessite plusieurs étapes : créer une image avec hdiutil, la monter, manipuler la fenêtre Finder avec AppleScript pour placer les icônes, puis la démonter. C’est fastidieux et sujet aux erreurs.

create-dmg est un outil open source qui regroupe tout ce processus en une seule commande. Passez-lui l’image de fond, la taille de la fenêtre et les coordonnées des icônes comme options, et il produit un .dmg fini pour vous.

Vous l’avez déjà installé lors de la configuration des outils prérequis en Partie 1 de la série « Distribuer soi-même une application macOS ». Si ce n’est pas encore le cas, installez-le avec Homebrew :

brew install create-dmg

Il existe deux projets nommés create-dmg. Celui utilisé dans cet article est l’outil en ligne de commande installé par Homebrew (create-dmg/create-dmg). Ne le confondez pas avec le projet distinct, qui a des noms d’options différents.

Étape 1 — Un dossier de staging ne contenant que le .app

Le DMG doit contenir une seule icône d’application, proprement. Mais lorsque vous buildez et exportez votre application, le dossier résultant contient non seulement le .app mais aussi des fichiers sous-produits tels que DistributionSummary.plist et des journaux de packaging. Si vous transformez directement ce dossier en DMG, ces sous-produits se retrouveront également exposés dans la fenêtre.

Vous copiez donc uniquement le .app dans un dossier vide pour l’isoler, puis vous utilisez ce dossier comme matériau brut pour le DMG. Ce dossier d’isolation est communément appelé dossier de staging.

# Copier uniquement le .app dans un dossier vide pour qu'il ne soit pas mélangé aux sous-produits
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

Maintenant build/dmg-stage/ ne contient que FocusTimer.app. Lorsque vous buildez le DMG, pointez create-dmg sur ce dossier, et la fenêtre affichera uniquement l’icône de l’application, proprement. (Le raccourci vers le dossier Applications est généré automatiquement via une option create-dmg en Partie 2.)

Étape 2 — Préparer l’image de fond

Le cœur de la conception de la fenêtre DMG est l’image de fond. C’est là que les gens bloquent le plus souvent, alors allons-y étape par étape.

Taille du canevas — Pourquoi 1200×800 ?

En Partie 2, vous définirez la taille de la fenêtre DMG en passant --window-size 600 400 à create-dmg. Ici, l’unité de 600 et 400 n’est pas les pixels mais les points. Les points sont l’unité de coordonnées logiques utilisée par macOS.

Sur un écran Retina, 1 point est dessiné comme 2 pixels. Pour remplir une fenêtre de 600×400 points complètement et nettement, l’image de fond doit donc faire le double — 1200×800 pixels. C’est la convention @2x (double résolution).

Pour résumer — la fenêtre fait 600×400 points, et l’image de fond fait 1200×800 pixels. Cette relation ×2 reviendra comme facteur important lorsque vous configurez les coordonnées en Partie 2.

Que dessiner sur le fond

Voici une idée reçue courante à aborder. Ne dessinez pas l’icône de l’application ni l’icône du dossier Applications dans l’image de fond. Ces icônes sont placées sur la fenêtre comme des fichiers réels par create-dmg (Partie 2).

Ce qui va dans l’image de fond, ce sont uniquement des éléments de décoration et de guidage :

• Une flèche pointant de l’icône de l’application vers le dossier Applications — le design le plus courant pour guider l’œil et la main de l’utilisateur vers « faire glisser de ce côté ».
• Si nécessaire, une courte phrase d’instruction telle que « Faites glisser ici »
• Une couleur de marque ou un motif de fond subtil

En d’autres termes, l’image de fond est « une image qui laisse vides les emplacements où seront placées les icônes, et ne dessine que la ligne de guidage qui les relie. » Vous laissez vides les deux emplacements des icônes — gauche et droite, chacun de 100 points = 200 pixels (en Partie 2) — et placez la flèche dans l’espace entre eux.

Un piège courant — Le DPI

Le piège dans lequel les gens tombent le plus souvent avec l’image de fond est le DPI (pixels par pouce).

Lorsque vous exportez un PNG depuis un éditeur d’images, le fichier stocke non seulement le nombre de pixels (1200×800) mais aussi une valeur DPI. Lorsque Finder dessine le fond DMG, il regarde ce DPI pour calculer en sens inverse « combien de points fait cette image ». Le calcul se fait environ comme suit :

Taille en points = nombre de pixels ÷ (DPI ÷ 72)

• Si le DPI est 144 : 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 points. Il remplit exactement la fenêtre (600pt). ✅
• Mais certains éditeurs d’images (par ex., Pixelmator Pro) insèrent une valeur DPI arbitraire (par ex., 338) à l’exportation. Si le DPI est 338 : 1200 ÷ (338 ÷ 72) ≈ 256 points. C’est bien plus petit que la fenêtre (600pt), donc le fond est dessiné recroquevillé dans le coin supérieur gauche de la fenêtre. ❌

Le nombre de pixels est le même 1200×800 dans les deux cas, pourtant le fond se casse à cause d’une seule valeur DPI. La première fois que vous rencontrez ce problème, la cause est genuinement difficile à identifier.

La solution consiste à forcer le DPI du PNG exporté à un uniforme 144. Une ligne avec la commande sips, intégrée par défaut dans macOS, suffit :

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

Une fois que vous exécutez cette ligne, quelle que soit la valeur DPI que l’éditeur a inscrite, elle est réglée à 144, et 1200×800 pixels est interprété comme exactement 600×400 points.

Le point à retenir — ① créez l’image de fond en 1200×800 pixels, et ② après l’exportation, normalisez le DPI à 144 avec sips. Suivez ces deux règles et vous éviterez le piège du DPI.

Récapitulatif de la Partie 1

Si vous avez suivi jusqu’ici, vous disposez maintenant des éléments suivants :

• ✅ L’outil create-dmg installé + une compréhension de son rôle
• ✅ Un dossier de staging qui isole et ne contient que le .app (build/dmg-stage/)
• ✅ Une image de fond créée à 1200×800 pixels avec le DPI normalisé à 144

Les matériaux sont prêts. Mais vous n’avez pas encore de fenêtre pour afficher l’image de fond et placer les icônes. La taille d’ouverture de la fenêtre, et où placer l’icône de l’application et le raccourci Applications — tout cela est décidé par les coordonnées que vous passez à create-dmg.

Dans la prochaine partie, nous concevrons ces coordonnées une par une, nous expliquerons comment aligner les coordonnées en pixels de l’image de fond avec les coordonnées en points de la fenêtre pour que la flèche de l’image de fond tombe exactement entre les deux icônes, et nous montrerons comment automatiser ce processus pour qu’il puisse être réutilisé pour chaque publication.