Monday, February 15, 2010

Building a DMG installer for the Mac the simple way

A very common way of providing a semi-automated method of installing Mac OS X programs is a DMG that gives the user a easy way to install your program by just dragging the application into a shortcut to the Applications folder. Below is the KeyChainDD version. The advantage of this is that once the user downloads the DMG, it will automatically open, and what to do is graphically pretty obvious.
The problem is that actually building such a DMG isn't too obvious. Notably, it's very difficult to get the DMG configured in such a way that it always opens to the right size, and showing its icons, not a list of files. There a number of methods on the web showing various ways of doing this, but most of them are very complex. This is my (fairly) simple way, without using any exotic tools:
  1. This assumes you have an application, and a background (in e.g., PNG form) that you want displayed when your DMG is mounted. I used InkScape to build this one, based on the FireFox one.
  2. Create a new image using Disk Utility, leaving all the options at their defaults, sized such that it will contain all your files.
  3. Create a folder inside the mounted DMG and name it “background”. Drop the background PNG into this.
  4. Hide the background folder (aka rename with a leading .) - I use X-Folders to this, but you can do it from the command line as well.
  5. Drop your app into the root of the DMG.
  6. From the View menu of Finder, choose Show View Options, and customize the view to show icons only, no sideview, etc. Also switch off the toolbar in the view menu.
  7. Set the window background to picture, and use Cmd-Shift-G in combination with the full path (e.g. /Volumes/MyDisk/.background) to set your background PNG as the background for the view.
  8. Move the app icon into the right place versus the background image, changing the font size and the dimensions of the icons.
  9. Now just add a shortcut to the Application Folder, place it inside the DMG, and then position the shortcut.
  10. Do a final resize on the Window such that it is the same size of your background. Your DMG should now look as you expect.
  11. Eject the DMG, then go to Disk Utilities, select the DMG and choose “convert“, then “compression” and save again. Now the DMG is compressed (as small as possible) and made unwritable. Note that's its a really good idea to save to a different name, so that you can use the uncompressed DMG as a template for future releases, and not have to go through this whole process again.
  12. That's it

NOTE: Unless the DMG is compressed, it will revert to the default format on opening. But in order to edit it, you have to convert it back to read/write, else changes won't stick. Keep track of what state its in, because there's no obvious way to tell.....

If you need to create a new DMG for a subsequent release, you can just delete the old application from the uncompressed DNG, and then copy the new version of the application to the DMG.  Warning: you MUST use either command line, or something like X-Folders to delete the file, rather than move it to the trash as the Mac OS X finder will do. Using Finder will create a trash folder inside the DMG. Once you have a trash in a DMG, it's nearly impossible to get rid of, and you'll have to rebuild the whole DMG.

14 comments:

Daniel Rucci said...

Fantastic tutorial. It was very helpful for me creating my first DMG. Thanks a lot ChromaSoft!

Mayo said...

I just can't get the background image to stick. I've tried about 5 different ways to do this that I've found in the web (including this one) but the background image is not visible when I open the disk image again.

Any ideas? Anyone?

(using mac os 10.6.3)

Sandy said...

Mayo,

Difficult to say, but the first thing I'd look at is whether you have copied the image to within the DMG

Sandy

Mayo said...

believe me. I've tried every single thing there is. I've placed the image in the .background folder inside the dmg and on the root of the folder and hidden it with SetFile tool. I've used the Action Script approach given here (http://www.yoursway.com/free/) and the background image simply doesn't stick.

Here's the strange thing.

1) I create a normal dmg with Disk Utility (read/wrote)
2) I drag&drag my app there
3) I create the application alias with Terminal (ln -s /Application Applications)
4) I create a .background folder in the dmg (in Volumes/MyDmg/) with mkdir .background
5) I copy the background.png into the ,background folder
6) I arrange the icons in the dmg with Finder and change the background image with Show View Options
7) The background image is correctly shown and everything is like I want them to be
8) I close the dmg in Finder but I DO NOT eject the disk.
9) I re-open the disk by double-clicking it.
10) The disk opens, my app and applications icons are there but the background image is not displayed.
11) I check with Terminal and the .background folder is there as is the background.png in it

12) I go crazy

Sandy said...

Hmmm - have you tried converting the DMG in Disk Utilities immediately after closing it (before opening it)?

Sandy

Mayo said...

Yes. Tried that as well. I've also tried with the folder approach where you first create a normal folder, arrange everything as you want. Add the background image with view options (with the image itself inside the folder) and then create a dmg from the folder with Disk Utility New->Disk image from folder. But the same problem persists.

What I also noticed is that the icon size change is not working for me. I've changed my app and applications alias icons to be 96x96 but they end up being 48x48 in the dmg. It must be somehow related to the fact that the .DS_Store file is not correctly updated in the dmg but I have no clue why.

Mayo said...

Also tried these products (http://www.macupdate.com/info.php/id/7099/dropdmg and http://www.araelium.com/dmgcanvas/) and the same problem persists. No background image and icon sizes are wrong.

I don't understand whether this is related to my OS system version or something...

philipchang said...

Amazing...This worked great! I used the "background.png" from the Google Chrome dmg.

g said...

I too had the same problem as Mayo: I just couldn't get the background image to stick when I ejected the disk. Then I switched to an admin account, tried it, and it worked!

Nicolinux said...

Thanks for the tutorial. I followed it but when I mount my compressed DMG, it shows up twice on the desktop (and is also mounted twice). The master image is fine, the double mounting effect occurs only after converting the image to the compressed variant. Any ideas?

Thanks,
Stefan

Randy White said...

I also have the same problem as Nicolinux. When I double-click the .dmg file, it gets mounted twice. I looked with "mount" command, and it shows that it is mounted read-only and read-write. I guess for some reason Mac first mounts it read-only and then thinks it needs to be mounted read-write so it mounts it again?

Has anyone been able to solve this problem?

syotdsotm said...

Randy:

the problem happens when the original read/write image is still present. I found that by moving the r+w image to the trash and emptying it fixes the problem. This was discovered by going into disk utility and looking at the DMG path for each image. If you distribute the read-only/compressed DMG, it won't mount twice on the target computer.

Randy White said...

That worked perfectly. Thanks.

Nicolás Miari said...

Perhaps it's because I have a newer verion of OSX (10.9)? The View options aren't exactly the same. It works here, but the DMG opens as a window that has the "zoom" slider on top: sliding it left or right will break the balance between the icons and the background.

Otherwise, it seems to work; thanks!