Melengkapi Tata Letak DMG dengan Koordinat

Di Bagian 1, kita memperkenalkan alat create-dmg dan menyiapkan folder staging yang hanya berisi .app beserta gambar latar belakang.

Sekarang untuk bagian terakhir, tata letak. Seberapa besar jendela DMG terbuka, dan di mana menempatkan ikon aplikasi dan pintasan Applications — semua ini ditentukan oleh koordinat yang Anda berikan ke create-dmg. Dalam artikel ini, kita akan mendesain koordinat-koordinat tersebut satu per satu.

Seperti di Bagian 1, FocusTimer, nilai koordinat, dan sebagainya semuanya adalah contoh.

Perintah create-dmg Lengkap

Pertama, mari lihat perintah lengkap secara keseluruhan. Ini adalah perintah yang membangun DMG untuk aplikasi contoh 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/"

Dua baris terakhir adalah output dan input:

• build/FocusTimer-1.0.dmg — jalur file DMG yang akan dibuat
• build/dmg-stage/ — folder staging yang hanya berisi .app dari Bagian 1

Baris di atasnya yang dimulai dengan -- adalah opsi yang mendesain jendela dan ikon. Mari kita bahas satu per satu.

Memahami Sistem Koordinat

Sebelum kita melihat opsi-opsinya, mari kita pahami cara koordinat bekerja.

Semua koordinat posisi create-dmg adalah koordinat di dalam jendela DMG. Satuannya adalah titik (point) yang dijelaskan di Bagian 1.

• Titik asal (0, 0) adalah pojok kiri atas jendela.
• X bertambah saat Anda bergerak ke kanan, dan Y bertambah saat Anda bergerak ke bawah. (Perhatikan bahwa, tidak seperti grafik matematika, Y bertambah ke bawah.)
• Jika Anda menetapkan ukuran jendela ke 600 400, koordinat bergerak dalam kisaran 0–600 secara horizontal dan 0–400 secara vertikal.

Koordinat posisi ikon menunjuk ke pusat ikon tersebut — bukan pojok kiri atasnya, melainkan tepat di tengahnya.

Opsi Satu per Satu

Beberapa di antaranya patut disebut secara terpisah.

--window-pos vs. --window-size — keduanya mudah tertukar. --window-pos adalah di mana di layar (desktop) jendela muncul saat pengguna membuka DMG, sedangkan --window-size adalah ukuran jendela itu sendiri. Yang penting untuk desain koordinat adalah --window-size.

--icon-size 100 — ikon di dalam jendela digambar dengan ukuran 100 titik. Anda perlu mengetahui nilai ini juga saat mendesain gambar latar belakang, karena ruang 100 titik yang ditempati setiap ikon (= 200 piksel dalam gambar latar belakang) harus dibiarkan kosong di latar belakang.

--icon dan --app-drop-link — keduanya adalah bintang kiri dan kanan jendela. --icon adalah ikon aplikasi yang harus diseret pengguna, dan --app-drop-link adalah pintasan folder Applications yang berfungsi sebagai tujuan seret. Dengan --app-drop-link, tidak perlu membuat symbolic link secara terpisah — create-dmg membuat dan menempatkan pintasan Applications untuk Anda.

--hide-extension — tanpa ini, ikon menampilkan FocusTimer.app lengkap dengan ekstensinya di bawah. Menyembunyikannya membuatnya terlihat bersih hanya sebagai FocusTimer.

--no-internet-enable — “internet-enable” adalah fitur lama yang dengannya Safari lama secara otomatis memproses DMG yang diunduh; fitur ini sudah tidak digunakan saat ini. Melewatkan opsi ini membuat create-dmg melewati langkah pemrosesan itu dan peringatan terkait.

Desain Koordinat — Menempatkan Dua Ikon

Sekarang inti dari semuanya. Kita menetapkan ukuran jendela ke 600 400, jadi di dalamnya kita memutuskan di mana menempatkan ikon aplikasi dan pintasan Applications.

Dalam perintah contoh, kita menetapkannya seperti ini:

• Ikon aplikasi: --icon "FocusTimer.app" 175 190
• Pintasan Applications: --app-drop-link 425 190

Inilah arti angka-angka ini:

Sumbu X (horizontal) — 175 dan 425

Lebar jendela adalah 600 titik, dan pusatnya adalah 300. Menempatkan dua ikon di 175 dan 425 menempatkan masing-masing 125 ke kiri dan 125 ke kanan dari pusat. Dengan kata lain, dua ikon ditempatkan secara simetris tentang pusat. Dengan ikon aplikasi di sebelah kiri dan Applications di sebelah kanan, ini menciptakan arah alami “seret dari kiri ke kanan.”

Sumbu Y (vertikal) — keduanya di 190

Tinggi jendela adalah 400 titik, dan pusatnya adalah 200. Menempatkan kedua ikon pada 190 yang sama menempatkan keduanya berdampingan pada ketinggian yang sama, sedikit di atas pusat tepat (200). Karena label ikon dilampirkan di bawah ikon, sedikit dinaikkan membuatnya secara visual terpusat setelah label disertakan.

Tidak ada jawaban tunggal yang benar untuk koordinat. Nilai di atas hanyalah satu contoh seimbang dari menempatkan “dua ikon 100 titik berdampingan dan secara simetris dalam jendela 600×400.” Jangan ragu untuk menyesuaikannya sesuai dengan desain latar belakang Anda sendiri.

Menyelaraskan Gambar Latar Belakang dengan Koordinat

Di sini, konvensi @2x dari Bagian 1 muncul kembali.

Koordinat ikon (175,190, 425,190) adalah koordinat titik jendela. Tetapi gambar latar belakang berukuran dua kali lipat — 1200×800 piksel. Saat Anda menggambar panah pada gambar latar belakang, Anda harus berpikir dalam koordinat piksel yang merupakan koordinat jendela dikalikan 2.

Koordinat piksel gambar latar belakang = koordinat titik jendela × 2

Mengonversi dua ikon dari contoh ke koordinat piksel gambar latar belakang menghasilkan ini:

Jadi saat Anda menggambar panah pemandu pada gambar latar belakang (1200×800), panah itu harus digambar antara piksel (350, 380) dan (850, 380) — tempat dua ikon berada. Karena ukuran ikon adalah 100 titik = 200 piksel, biarkan area 200 piksel yang ditempati setiap ikon kosong dan tempatkan panah di ruang di antara keduanya.

Menyelaraskan karya gambar latar belakang dengan koordinat ikon create-dmg terhadap referensi yang sama adalah inti dari desain DMG. Jika keduanya tidak selaras, panah melewatkan ikon atau digambar tumpang tindih dengannya.

Verifikasi dan Penyesuaian Halus

Saat Anda menjalankan perintah, build/FocusTimer-1.0.dmg dibuat. Klik dua kali DMG yang dihasilkan dan buka sendiri.

• Apakah latar belakang mengisi jendela sepenuhnya? (Jika menyusut ke pojok → itu adalah jebakan DPI dari Bagian 1. Normalisasi ke 144 dengan sips.)
• Apakah ikon aplikasi dan Applications ditempatkan dengan baik di dua ujung panah latar belakang?
• Apakah label ikon tidak terpotong atau tumpang tindih?

Koordinat biasanya tidak langsung pas dengan sempurna pada percobaan pertama. Cukup ulangi prosesnya beberapa kali: ubah sedikit angka di --icon dan --app-drop-link, jalankan perintah lagi, dan periksa dengan mata Anda. Setelah Anda menyelesaikan koordinat, Anda jarang perlu mengubahnya lagi.

Menggunakan Kembali untuk Setiap Rilis — Otomatisasi

Desain DMG secara efektif adalah tugas satu kali. Setelah Anda menyelesaikan gambar latar belakang dan koordinat, Anda menggunakan kembali pengaturan yang persis sama untuk setiap rilis berikutnya.

Jadi sebaiknya masukkan panggilan create-dmg ini sebagai salah satu langkah dalam skrip build rilis Anda. Dalam skrip, alurnya biasanya terlihat seperti ini:

1. Salin .app yang sudah ditandatangani, dinotarisasi, dan di-staple ke folder staging (Bagian 1)
2. Salin gambar latar belakang lalu normalisasi DPI-nya ke 144 dengan sips (mencegah jebakan Bagian 1)
3. Jalankan create-dmg dengan koordinat yang dirancang di atas
4. Bersihkan file sementara seperti folder staging

Hanya nomor versi yang berubah dari rilis ke rilis (angka 1.0 di --volname, dan FocusTimer-1.0.dmg di nama file output), jadi jika Anda menarik bagian itu keluar menjadi variabel skrip, Anda tidak perlu menyentuh perintah setiap kali. Pertahankan jalur gambar latar belakang dan semua koordinat sebagai nilai tetap.

Kami merekomendasikan agar skrip secara otomatis melakukan normalisasi DPI gambar latar belakang (sips) setiap kali. Dengan begitu, bahkan jika Anda lupa menormalisasi DPI saat Anda mengekspor ulang desain asli dan menggantinya, skrip selalu memperbaikinya untuk Anda.

Rangkuman Seri

Desain DMG dua bagian kini selesai. Anda sekarang memiliki:

• ✅ (Bagian 1) create-dmg + folder staging .app + gambar latar belakang dengan @2x dan DPI dinormalisasi
• ✅ (Bagian 2) Desain koordinat jendela dan ikon + menyelaraskan koordinat piksel latar belakang dengan koordinat titik jendela + otomatisasi

Untuk merangkum poin-poin utama:

• Jendela DMG berukuran 600×400 titik, dan gambar latar belakang adalah dua kali lipat itu — 1200×800 piksel (@2x).
• DPI PNG latar belakang harus dinormalisasi ke 144 — hanya dengan begitu latar belakang mengisi jendela dengan tepat.
• Koordinat ikon adalah koordinat titik di dalam jendela, dan koordinat karya latar belakang adalah koordinat piksel dua kali lipat itu — selaraskan keduanya terhadap referensi yang sama.
• Masukkan desain yang sudah Anda selesaikan ke dalam skrip build dan gunakan kembali apa adanya untuk setiap rilis.

Satu panah kecil, atau posisi ikon yang meleset beberapa titik, dapat memengaruhi kesan pertama pengguna. Karena jendela .dmg adalah tempat pertama pengguna bertemu dengan aplikasi Anda, ada baiknya mendesainnya dengan cermat, sekali.

Referensi

• create-dmg — GitHub
• sips — panduan perintah macOS