Compléter la mise en page DMG avec des coordonnées

En Partie 1, nous avons présenté l’outil create-dmg et préparé un dossier de staging ne contenant que le .app ainsi qu’une image de fond.

Voici maintenant la dernière pièce, la mise en page. La taille d’ouverture de la fenêtre DMG, 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 cet article, nous concevrons ces coordonnées une par une.

Comme en Partie 1, FocusTimer, les valeurs de coordonnées, etc. sont tous des exemples.

La commande create-dmg complète

Commençons par regarder la commande complète dans son intégralité. Voici la commande qui construit le DMG pour l’application exemple 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/"

Les deux dernières lignes sont la sortie et l’entrée :

• build/FocusTimer-1.0.dmg — le chemin du fichier DMG à créer
• build/dmg-stage/ — le dossier de staging ne contenant que le .app de la Partie 1

Les lignes au-dessus qui commencent par -- sont les options qui conçoivent la fenêtre et les icônes. Allons-y une par une.

Comprendre le système de coordonnées

Avant de regarder les options, établissons comment fonctionnent les coordonnées.

Toutes les coordonnées de position de create-dmg sont des coordonnées à l’intérieur de la fenêtre DMG. L’unité est le point expliqué en Partie 1.

• L’origine (0, 0) est le coin supérieur gauche de la fenêtre.
• X augmente en allant vers la droite, et Y augmente en allant vers le bas. (Notez que, contrairement à un graphique mathématique, Y augmente vers le bas.)
• Si vous définissez la taille de la fenêtre à 600 400, les coordonnées se déplacent dans la plage 0-600 horizontalement et 0-400 verticalement.

La coordonnée de position d’une icône pointe vers le centre de cette icône — pas son coin supérieur gauche, mais son centre exact.

Les options, une par une

Quelques-unes méritent d’être mentionnées séparément.

--window-pos vs. --window-size — ces deux-là sont faciles à confondre. --window-pos indique où sur l’écran (le bureau) la fenêtre apparaît lorsque l’utilisateur ouvre le DMG, tandis que --window-size est la taille de la fenêtre elle-même. Celle qui compte pour la conception des coordonnées est --window-size.

--icon-size 100 — les icônes à l’intérieur de la fenêtre sont dessinées à une taille de 100 points. Vous devez connaître cette valeur lors de la conception de l’image de fond également, car l’espace de 100 points que chaque icône occupe (= 200 pixels dans l’image de fond) doit être laissé vide dans le fond.

--icon et --app-drop-link — ces deux-là sont les acteurs principaux gauche et droit de la fenêtre. --icon est l’icône de l’application que l’utilisateur doit faire glisser, et --app-drop-link est le raccourci du dossier Applications qui sert de destination de dépôt. Avec --app-drop-link, il n’est pas nécessaire de créer un lien symbolique séparément — create-dmg crée et place le raccourci Applications pour vous.

--hide-extension — sans cela, l’icône affiche le FocusTimer.app complet avec son extension en dessous. En le masquant, elle apparaît proprement comme simplement FocusTimer.

--no-internet-enable — « internet-enable » est une ancienne fonctionnalité par laquelle un ancien Safari traitait automatiquement les DMG téléchargés ; elle n’est plus utilisée aujourd’hui. Passer cette option fait ignorer à create-dmg cette étape de traitement et l’avertissement associé.

Conception des coordonnées — Placer les deux icônes

Voici l’essentiel. Nous avons défini la taille de la fenêtre à 600 400, nous décidons donc à l’intérieur où placer l’icône de l’application et le raccourci Applications.

Dans la commande exemple, nous les avons définis ainsi :

• Icône de l’application : --icon "FocusTimer.app" 175 190
• Raccourci Applications : --app-drop-link 425 190

Voici ce que signifient ces nombres :

L’axe X (horizontal) — 175 et 425

La largeur de la fenêtre est de 600 points, et son centre est à 300. Placer les deux icônes à 175 et 425 met chacune 125 vers la gauche et 125 vers la droite du centre. En d’autres termes, les deux icônes sont placées symétriquement par rapport au centre. Avec l’icône de l’application à gauche et Applications à droite, cela crée la direction naturelle « faire glisser de gauche à droite ».

L’axe Y (vertical) — les deux à 190

La hauteur de la fenêtre est de 400 points, et son centre est à 200. Placer les deux icônes au même 190 les met côte à côte à la même hauteur, légèrement au-dessus du centre exact (200). Comme l’étiquette de l’icône est attachée en dessous, la pousser légèrement vers le haut la centre visuellement une fois l’étiquette incluse.

Il n’y a pas de réponse unique correcte pour les coordonnées. Les valeurs ci-dessus ne sont qu’un exemple équilibré de « placer deux icônes de 100 points côte à côte et symétriquement dans une fenêtre 600×400 ». N’hésitez pas à les ajuster selon votre propre conception du fond.

Aligner l’image de fond avec les coordonnées

Ici, la convention @2x de la Partie 1 réapparaît.

Les coordonnées des icônes (175,190, 425,190) sont les coordonnées en points de la fenêtre. Mais l’image de fond fait le double — 1200×800 pixels. Lorsque vous dessinez la flèche sur l’image de fond, vous devez penser en termes de coordonnées en pixels qui sont les coordonnées de la fenêtre multipliées par 2.

Coordonnées en pixels de l'image de fond = coordonnées en points de la fenêtre × 2

La conversion des deux icônes de l’exemple en coordonnées en pixels de l’image de fond donne ceci :

Donc lorsque vous dessinez la flèche de guidage sur l’image de fond (1200×800), elle doit être dessinée entre les pixels (350, 380) et (850, 380) — les emplacements des deux icônes. Comme la taille des icônes est de 100 points = 200 pixels, laissez vide la zone de 200 pixels que chaque icône occupe et placez la flèche dans l’espace entre elles.

Aligner l’illustration de l’image de fond avec les coordonnées des icônes de create-dmg selon la même référence est le cœur de la conception DMG. Si les deux sont décalés, la flèche rate les icônes ou se dessine par-dessus elles.

Vérification et ajustement fin

Lorsque vous exécutez la commande, build/FocusTimer-1.0.dmg est créé. Double-cliquez sur le DMG résultant et ouvrez-le vous-même.

• Le fond remplit-il complètement la fenêtre ? (S’il est recroquevillé dans un coin → c’est le piège du DPI de la Partie 1. Normalisez-le à 144 avec sips.)
• L’icône de l’application et Applications sont-elles bien placées aux deux extrémités de la flèche du fond ?
• Les étiquettes des icônes sont-elles découpées ou se chevauchent-elles ?

Les coordonnées ne s’alignent généralement pas parfaitement du premier coup. Répétez simplement le processus quelques fois : ajustez légèrement les nombres dans --icon et --app-drop-link, exécutez à nouveau la commande et vérifiez visuellement. Une fois que vous avez finalisé les coordonnées, vous aurez rarement besoin de les changer à nouveau.

Réutilisation pour chaque publication — Automatisation

La conception DMG est effectivement une tâche unique. Une fois que vous avez finalisé l’image de fond et les coordonnées, vous réutilisez exactement les mêmes paramètres pour chaque publication suivante.

Il est donc judicieux d’intégrer cet appel create-dmg comme l’une des étapes de votre script de build de publication. Dans un script, le flux ressemble généralement à ceci :

1. Copier le .app signé, notarisé et agrafé dans le dossier de staging (Partie 1)
2. Copier l’image de fond puis normaliser son DPI à 144 avec sips (prévention du piège de la Partie 1)
3. Exécuter create-dmg avec les coordonnées conçues ci-dessus
4. Nettoyer les fichiers temporaires tels que le dossier de staging

Seul le numéro de version change d’une publication à l’autre (le 1.0 dans --volname, et FocusTimer-1.0.dmg dans le nom du fichier de sortie), donc si vous en extrayez simplement cette partie dans une variable de script, vous n’aurez pas besoin de toucher la commande à chaque fois. Gardez le chemin de l’image de fond et toutes les coordonnées comme valeurs fixes.

Nous recommandons de faire exécuter automatiquement par le script la normalisation du DPI de l’image de fond (sips) à chaque fois. Ainsi, même si vous oubliez de normaliser le DPI lorsque vous re-exportez l’original du design et le remplacez, le script le corrige toujours pour vous.

Récapitulatif de la série

La conception DMG en deux parties est terminée. Vous disposez maintenant des éléments suivants :

• ✅ (Partie 1) create-dmg + un dossier de staging .app + une image de fond avec @2x et DPI normalisé
• ✅ (Partie 2) Conception des coordonnées de la fenêtre et des icônes + alignement des coordonnées en pixels du fond avec les coordonnées en points de la fenêtre + automatisation

Pour récapituler les points clés :

• La fenêtre DMG fait 600×400 points, et l’image de fond fait le double — 1200×800 pixels (@2x).
• Le DPI du PNG de fond doit être normalisé à 144 — c’est seulement ainsi que le fond remplit exactement la fenêtre.
• Les coordonnées des icônes sont des coordonnées en points dans la fenêtre, et les coordonnées de l’illustration du fond sont des coordonnées en pixels deux fois plus grandes — alignez les deux selon la même référence.
• Intégrez le design que vous avez finalisé dans votre script de build et réutilisez-le tel quel pour chaque publication.

Une petite flèche, ou une position d’icône décalée de quelques points, peut influencer la première impression d’un utilisateur. Comme la fenêtre .dmg est l’endroit même où un utilisateur rencontre votre application pour la première fois, il vaut la peine de la concevoir soigneusement, une fois.

Références

• create-dmg — GitHub
• sips — manuel de commande macOS