Making Mac Disk Images Pretty

This is how to add that “curb appeal” to your Macintosh disk images.

Important update:  Be sure to read Disk Images Revisited, the quick synopsis of which is that this method does not work properly on Snow Leopard due to a Mac OS X bug.  (Building disk images under Tiger or Leopard works fine.)

In a previous posting, I explained the basics of making Macintosh Disk Images for software distribution. By following that method, using free tools from Apple, you can create a basic disk image (.dmg) file that is suitable for downloading. The only problem is that, when mounted, it appears simply as a plain window with the bundle (and any additional files) in it. Utilitarian, at best.

We wanted something more like this:

Pretty Good Solitaire Mac Edition 2.0

This gives a much better initial experience, being not only more visually appealing, but also providing some initial instructions (text in green). Note that the ‘Pretty Good Solitaire’ and ‘Readme’ icons are live, while the rest of the window is simply a background image. In addition to this display when the disk image is mounted, we also wanted to add a license agreement before that happened.

We accomplished what we wanted (the image above being an actual screen capture from our upcoming release), and this is how we did it.

First of all, this can be accomplished, in theory, using the ‘Disk Utility’ and other free tools included with Mac OS X, provided a certain amount of legwork both in figuring out and then in executing the process. Upon a recommendation in the private ASP (Association of Shareware Professionals) newsgroups, however, we tried and settled on an inexpensive third-party tool called DropDMG, from C-Command Software. Not only does this save time and hassle, but it provided an added feature that we did not even know we wanted. (The trial version is fully-featured, and for only $20 the decision to purchase took no deliberation.)

Even with this tool making life easier, it is important to note that the process is slightly convoluted, primarily because one needs a relative path to background image. In our first few attempts, we managed to have backgrounds that showed only on the development system, but disappeared (rather, never appeared) when downloaded to another system. The basic approach is to create a writable disk image first, with the desired contents (including the background image), then arrange this malleable window as desired, and finally convert that into a final (read-only) disk image for distribution.

The first step is to create the desired background image (which is left as an exercise for the reader); it should probably be a non-lossy PNG file for best results. This file should generally be “hidden” in the disk image, and (according to warnings I chose not to test) needs to be in a subfolder, not the root of the disk image. The most common, even ubiquitous, recommendation is to make a hidden subfolder and place the background image in that. However, we took a slightly different tack, by way of the following trick:

Add the background image (say, install.png) to your product bundle in Xcode. Our software has a ‘resources’ folder that contains various images used in the game, and by simply copying the background bitmap there and then adding the file to the project, it is included in the application bundle. This way, there is no messing around with an extra folder just to hold a single file, and if a system is configured to show hidden files, there is not a rogue “.background” folder icon floating around, messing up the layout. (The drawback is that the bundle is slightly larger, but the download size would be essentially the same, and an extra 100K on a hard drive is negligible these days.)

Once you have the background image created and included in your project, follow the setup process in the original post, by creating a distribution folder (named “Pretty Good Solitaire 2.01” in our example) and copying your application bundle and any other files/documentation (e.g., “Readme.txt”) into it. This will serve as the basis of the final disk image, so make sure that everything is up to date.

Now, this is where DropDMG comes into play. Launch this application and create a default configuration for writable disk images (which we, creatively, called “writable”). Select ‘DropDMG->Preferences…’ from the menu, and then in the dialog box, for ‘Format’ choose “.dmg Read-write (can be modified)”. Frankly, the other settings do not matter much here, so leave the default values. Finally, select ‘Save Configuration As…’ (Command-S) from the ‘Configuration’ box and save this configuration, then close the window.

Next, select “writable” (or whatever named you chose) in the ‘Configuration’ box of the ‘DropDMG Status’ window. Then, simply drag the distribution folder onto this window, and a disk image will be created and placed (by default) next to the distribution folder. The log file will reflect this action (as in, Created “Pretty Good Solitaire 2.01.dmg”).

The next step is to mount (and open) the writable disk image, which can be done simply by double-clicking on it in Finder. This window can then be configured as desired, including resizing, setting icon sizes and positions, and (of course) changing the background image. Here are the steps that we take to do this:

  1. Press Command-J (‘Show View Options’).
  2. Under ‘Background’, select the ‘Picture’ radio button.
  3. Click on ‘Select…’ to choose the background image.
  4. Select the mounted disk image (under ‘Devices’).
  5. Press Shift-Command-G (‘Go to Folder…’).
  6. Type the name of the application bundle (e.g., “Pretty Good Solitaire.app”).
  7. Browse ‘Contents’ for background image file (e.g., “resources/install.png”).
  8. Click on ‘Select’ button.
  9. Resize window to fit background image (if necessary).
  10. Reposition icons as desired.

Once you have this done, unmount the disk image, and the layout configuration will be saved. (You can double-click on the .dmg file again to verify this.) Note that it is essential that the background image be selected from the disk image itself (see step #4); otherwise, the link will be to a file on the current system that will (most likely) not be on a user system, and a plain white background will be used instead.

If you want to include a license agreement in the disk image, one that must be accepted before the disk image is mounted, then you will need to add one in DropDMG. Honestly, this part of the interface leaves a little to be desired, but to avoid confusion, here are the basic steps:

  1. Press Command-L to ‘Show [License] Agreements’ window.
  2. Press Command-D to ‘Add [License] Agreement…’ (name).
  3. Type a name for the new license agreement and click ‘Add’.
  4. Select the new license agreement in the window.
  5. Press Shift-Command-D to ‘Add Language…’ to that agreement.
  6. Choose a language and click ‘Add’.
  7. Double-click the added language and insert text as needed.
  8. Repeat previous three steps for each desired language.

At this point, return to DropDMG preferences again (DropDMG->Preferences…). This time, create another configuration for your specific product. Under ‘Format’, select “.dmg zlib-compressed (Mac OS X 10.1)” (or another read-only option at your discretion). This will be the format of the final distributable disk image.

Under ‘Options’, you can select the license agreement added above, if desired. Check the ‘Use custom icon for mounted image’ option. This is the bonus feature that we did not even know enough about to know we wanted. Instead of a simple disk icon, when mounted the disk image shows a disk icon with the bundle icon superimposed on it (which you can see in miniature on the title bar in the example above). There is a way to create a truly custom icon, but we did not feel the need to go that far.

Also check the ‘Auto-open image window after mounting’ option, which causes your window landscaping to immediately appear to the user when the disk image is mounted, as intended. However, do not check the ‘Internet-enable’ option, as this will cause the contents to be automatically copied into the download folder, skipping all of the hard work you just did to get to this point.

Save this configuration (Command-S), close the preferences window, and then select the new configuration in the ‘DropDMG Status’ window. We are in the home stretch now…

Drag the writable (and beautifully landscaped) .dmg file onto the DropDMG window. This will begin a conversion to the new, distributable format. The action will be reflected in the log (as in, Converted to “Pretty Good Solitaire 2.01-1.dmg”). Rename the brand new disk image to something appropriate and upload it. Of course, you definitely need to thoroughly test it, as you would an installer for a Windows product, but if you followed these directions accurately, it should work for you. [Insert disclaimer about me taking no responsibility for your results whatsoever…]

Done.

Macintosh Disk Images

Or… Where Mac OS X really shines over Windows.

On Mac OS X, the preferred installer is none at all. Instead, applications are self-contained bundles that, under the covers, are folder/directory structures that the operating system treats as a single file. Although these entities are analogous to a subdirectory under ‘Program Files’ in Windows, they appear in Finder (the Mac equivalent to Windows Explorer) as a single icon. The bundles should be considered read-only, like the aforementioned Windows folder, and there are known writable areas for user and configuration data.

To “install” a program, a Mac user expects to simply drag the bundle/icon to a location. Done. That’s it. This process is so simple and straightforward that I expect it to be copied by Microsoft at any point. Of course, some applications (think that they) require additional steps and actually use an installer, but short of a major application that touches several areas of the system, like the Xcode Developer Tools, it should be unnecessary.

So, the question becomes: How does one actually distribute applications for Mac OS X? The answer: A publisher provides a downloadable disk image (.dmg) file which contains a complete folder in a single file, readable by any OS X system. When a disk image is opened, it is “mounted” as a new volume with the contents (and name) of the original folder, and from there, the user just drags the application to the desktop (or other folder) or can even just double-click it to run in-situ.

In order to create a disk image, start by creating a distribution folder with the desired name. In our case, with an early version of Pretty Good Solitaire Mac Edition, the folder was named “Pretty Good Solitaire 1.01“. Next, after building a final release version of the application bundle, copy (Alt-drag) it to this folder, along with any other separate files, such as documentation, you want to appear. In our case, for the trial version, we had only the application bundle, named “Pretty Good Solitaire trial[.app]“.

Once the folder is set up as desired, it is time to actually create the disk image file, which is done using the ‘Disk Utility’, which is found in the Utilities folder (Shift-Command-U). Launch this application, and then select ‘File->New->Disk Image from Folder’ from the menu (or Shift-Command-N). Navigate to the folder and press the ‘Image’ button. On the next window, type an appropriate name, make sure that ‘Image Format’ is “compressed” and ‘Encryption’ is “none”, and then press ‘Save’. (We used “pgsme101trial[.dmg]” as a name to eliminate spaces, which are inherently problematic for downloads.) The disk image is then created in the same folder that contains the distribution folder. Quit ‘Disk Utility’.

The disk image is ready to ship, but one can internet-enable the image (by setting a flag) to make it even easier for the user. Normally, when downloaded, a disk image is automatically mounted so the contents can be seen and copied. When internet-enabled, the contents of a disk image are copied to the downloads folder and the disk image itself is unmounted and removed, resulting in just the application in that folder, without the user having to do anything with the image file. An image can be internet-enabled from ‘Terminal’, by navigating to the disk image and typing, “hdiutil internet-enable [filename].dmg“.

This is the basic method for creating a distributable package for Mac OS X. Note that, inexplicably, the Apple Store actually requires ZIP files, so the usual practice is to place the disk image file into a ZIP file, but allowing direct downloads of the DMG file from the product site requires fewer user steps. We have used the above practice for Pretty Good Solitaire Mac Edition 1.0 with success; however, we are modifying it to add “curb appeal” for version 2.0, which will be described later this week.

OT: This weekend produced good NCAA basketball results:
MSU (men) 77, Robert Morris 62.
MSU (women) 60, Middle Tennessee State 59.
MSU (men) 74, USC 69.