Màn Hình Đầu Tiên Người Dùng Thấy

Khi bạn tự phân phối ứng dụng macOS, người dùng tải file .dmg và nhấp đúp vào nó. Lúc đó, một cửa sổ Finder duy nhất mở ra. Cửa sổ này là màn hình đầu tiên nơi người dùng gặp ứng dụng của bạn.

Cửa sổ .dmg được thiết kế tốt thường trông như thế này — ảnh hướng dẫn lấp đầy nền, biểu tượng ứng dụng ở bên trái, và phím tắt đến thư mục Applications ở bên phải. Người dùng hoàn tất việc cài đặt bằng cách kéo biểu tượng ứng dụng sang Applications. Luồng “kéo để cài đặt” này thực chất là trải nghiệm cài đặt tiêu chuẩn cho các ứng dụng macOS indie.

Cửa sổ này không tự xuất hiện. Bạn phải tự định nghĩa ảnh nền, kích thước cửa sổ, và vị trí cùng kích thước của từng biểu tượng. Series này đề cập đến cách thiết kế cửa sổ .dmg đó.

Series này bắt đầu từ giả định rằng bạn đã có .app đã được ký, công chứng và staple — nói cách khác, ứng dụng cách phân phối một bước. Quá trình đó đã được đề cập trong series “Tự Phân Phối Ứng Dụng macOS”. .dmg là artifact của kênh phân phối trực tiếp (Developer ID) và không liên quan đến kênh Mac App Store.

Những Gì Series Này Xây Dựng

Qua hai phần, bạn sẽ có:

  • (Phần 1, bài này) Công cụ create-dmg + thư mục staging chỉ chứa .app + ảnh nền đã chuẩn bị
  • (Phần 2) Thiết kế tọa độ của cửa sổ, biểu tượng và drop link + căn chỉnh ảnh nền với các tọa độ đó + tự động hóa

Khi kết thúc series, bạn cần có:

  • Thư mục staging cô lập và chỉ chứa .app
  • Ảnh nền tuân theo quy ước @2x Retina và có DPI được chuẩn hóa
  • Lệnh create-dmg trong đó kích thước cửa sổ và vị trí biểu tượng đều được đặt theo tọa độ
  • Dạng có thể tái sử dụng nguyên trạng cho mỗi lần phát hành

Ứng Dụng Mẫu — FocusTimer

Như trong các series trước, chúng ta sẽ dùng ứng dụng macOS giả tưởng FocusTimer (một ứng dụng đếm thời gian đơn giản để quản lý thời gian tập trung) làm ví dụ. FocusTimer, các đường dẫn, giá trị tọa độ, v.v. đều là ví dụ. Trong thực tế, hãy điều chỉnh theo ứng dụng của bạn.

DMG Là Gì?

DMG (.dmg) là file ảnh đĩa (disk image) của macOS. Hãy coi nó như một “đĩa ảo” đóng gói toàn bộ cấu trúc thư mục và file bên trong một file duy nhất. Khi người dùng nhấp đúp vào .dmg, macOS gắn kết (mount) nó như một đĩa, và nội dung của nó mở trong cửa sổ Finder.

Lý do dùng DMG để phân phối ứng dụng:

  • Ứng dụng (.app) thực ra là một thư mục. Khó đặt thư mục trực tiếp lên internet, nhưng bọc nó trong DMG biến nó thành một file duy nhất.
  • Bạn có thể đặt phím tắt đến thư mục Applications bên trong cửa sổ DMG, hướng dẫn người dùng cài đặt bằng một cú kéo duy nhất.
  • Bạn có thể thiết kế giao diện cửa sổ — nền, vị trí biểu tượng, v.v. — giúp trải nghiệm cài đặt trở nên gọn gàng.

Công Cụ — create-dmg

Tự tạo DMG bằng tay nghĩa là phải qua nhiều bước: tạo ảnh bằng hdiutil, mount nó, thao tác cửa sổ Finder bằng AppleScript để đặt các biểu tượng, rồi unmount lại. Đây là việc tẻ nhạt và dễ sai.

create-dmg là công cụ mã nguồn mở gói gọn toàn bộ quá trình này thành một lệnh duy nhất. Truyền vào ảnh nền, kích thước cửa sổ và tọa độ biểu tượng dưới dạng tùy chọn, và nó tạo ra .dmg hoàn chỉnh cho bạn.

Bạn đã cài nó hồi thiết lập các công cụ tiên quyết trong Phần 1 của series “Tự Phân Phối Ứng Dụng macOS”. Nếu chưa, hãy cài bằng Homebrew:

brew install create-dmg

Có hai dự án tên create-dmg. Dự án được dùng trong bài viết này là công cụ dòng lệnh được cài bằng Homebrew (create-dmg/create-dmg). Đừng nhầm với dự án riêng biệt có tên tùy chọn khác.

Bước 1 — Thư Mục Staging Chỉ Chứa .app

DMG nên chứa chỉ một biểu tượng ứng dụng, gọn gàng. Nhưng khi bạn build và xuất ứng dụng, thư mục kết quả chứa không chỉ .app mà còn các file phụ như DistributionSummary.plist và log đóng gói. Nếu bạn biến thư mục đó trực tiếp thành DMG, những file phụ đó cũng bị lộ trong cửa sổ.

Vì vậy bạn chỉ sao chép .app vào thư mục trống để cô lập nó, rồi dùng thư mục đó làm nguyên liệu cho DMG. Thư mục cô lập này thường được gọi là thư mục staging.

# Sao chép chỉ .app vào thư mục trống để không bị trộn với file phụ
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

Bây giờ build/dmg-stage/ chỉ chứa FocusTimer.app. Khi bạn build DMG, trỏ create-dmg vào thư mục này, và cửa sổ sẽ chỉ hiển thị biểu tượng ứng dụng, gọn gàng. (Phím tắt thư mục Applications được tạo tự động qua tùy chọn create-dmg ở Phần 2.)

Bước 2 — Chuẩn Bị Ảnh Nền

Trái tim của thiết kế cửa sổ DMG là ảnh nền. Đây là nơi mọi người thường bị mắc kẹt nhất, vì vậy hãy xem xét từng bước.

Kích Thước Canvas — Tại Sao 1200×800?

Ở Phần 2, bạn sẽ đặt kích thước cửa sổ DMG bằng cách truyền --window-size 600 400 vào create-dmg. Ở đây, đơn vị của 600 và 400 không phải pixel mà là điểm (point). Điểm là đơn vị tọa độ logic mà macOS sử dụng.

Trên màn hình Retina, 1 điểm được vẽ bằng 2 pixel. Vì vậy để lấp đầy cửa sổ 600×400 điểm hoàn toàn và sắc nét, ảnh nền phải có kích thước gấp đôi — 1200×800 pixel. Đây là quy ước @2x (độ phân giải gấp đôi).

Tóm lại — cửa sổ là 600×400 điểm, và ảnh nền là 1200×800 pixel. Mối quan hệ 2× này trở lại là yếu tố quan trọng khi bạn thiết lập tọa độ ở Phần 2.

Vẽ Gì Trên Nền?

Đây là một quan niệm sai lầm phổ biến đáng đề cập. Đừng vẽ biểu tượng ứng dụng hay biểu tượng thư mục Applications vào ảnh nền. Các biểu tượng đó được create-dmg đặt lên cửa sổ dưới dạng file thực tế (Phần 2).

Những gì được đưa vào ảnh nền chỉ là các yếu tố trang trí và hướng dẫn:

  • Mũi tên trỏ từ biểu tượng ứng dụng về phía thư mục Applications — thiết kế phổ biến nhất để hướng mắt và tay người dùng đến “kéo về phía này”.
  • Nếu cần, một cụm từ hướng dẫn ngắn như “Kéo vào đây”
  • Màu thương hiệu hoặc họa tiết nền tinh tế

Nói cách khác, ảnh nền là “bức tranh để trống những chỗ biểu tượng sẽ ngồi, và chỉ vẽ đường hướng dẫn nối chúng lại”. Bạn để trống hai vị trí biểu tượng trái và phải — mỗi cái 100 điểm = 200 pixel (ở Phần 2) — và đặt mũi tên ở giữa chúng.

Bẫy Quan Trọng — DPI

Bẫy mà mọi người hay gặp nhất với ảnh nền là DPI (pixel trên mỗi inch).

Khi bạn xuất PNG từ trình chỉnh sửa ảnh, file lưu trữ không chỉ số pixel (1200×800) mà còn giá trị DPI. Khi Finder vẽ nền DMG, nó nhìn vào DPI này để tính ngược “ảnh này có bao nhiêu điểm”. Phép tính xấp xỉ như sau:

Kích thước điểm = số pixel ÷ (DPI ÷ 72)
  • Nếu DPI là 144: 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 điểm. Nó lấp đầy cửa sổ (600pt) chính xác. ✅
  • Nhưng một số trình chỉnh sửa ảnh (ví dụ: Pixelmator Pro) đóng dấu giá trị DPI tùy ý (ví dụ: 338) khi xuất. Nếu DPI là 338: 1200 ÷ (338 ÷ 72) ≈ 256 điểm. Điều đó nhỏ hơn nhiều so với cửa sổ (600pt), vì vậy nền được vẽ co cụm vào góc trên trái của cửa sổ. ❌

Số pixel trong cả hai trường hợp đều là 1200×800, nhưng nền bị hỏng vì một giá trị DPI. Lần đầu tiên bạn gặp điều này, nguyên nhân thực sự khó tìm.

Giải pháp là buộc DPI của PNG đã xuất về 144. Một dòng với lệnh sips, được tích hợp mặc định trong macOS, là đủ:

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

Sau khi chạy một dòng này, dù trình chỉnh sửa đã đóng dấu DPI gì, nó được đặt về 144, và 1200×800 pixel được hiểu là chính xác 600×400 điểm.

Điểm mấu chốt — ① tạo ảnh nền với 1200×800 pixel, và ② sau khi xuất, chuẩn hóa DPI về 144 bằng sips. Tuân theo hai quy tắc này và bạn sẽ tránh được bẫy DPI.

Tổng Kết Phần 1

Nếu bạn đã làm theo đến đây, bây giờ bạn có:

  • ✅ Công cụ create-dmg đã cài đặt + hiểu vai trò của nó
  • ✅ Thư mục staging cô lập và chỉ chứa .app (build/dmg-stage/)
  • ✅ Ảnh nền được tạo với 1200×800 pixel và DPI đã được chuẩn hóa về 144

Các nguyên liệu đã sẵn sàng. Nhưng bạn vẫn chưa có cửa sổ để hiển thị ảnh nền và đặt các biểu tượng. Mở cửa sổ lớn bao nhiêu, và đặt biểu tượng ứng dụng và phím tắt Applications ở đâu — tất cả điều này được quyết định bởi tọa độ bạn truyền cho create-dmg.

Ở phần tiếp theo, chúng ta sẽ thiết kế những tọa độ đó từng cái một, đề cập cách căn chỉnh tọa độ pixel của ảnh nền với tọa độ điểm của cửa sổ để mũi tên trong ảnh nền nằm chính xác giữa hai biểu tượng, và cách tự động hóa quá trình này để có thể tái sử dụng cho mỗi lần phát hành.