Disk Image Details

Expectations are high when you release a piece of software for Mac OS X. Every part of the interface has to be top-notch, even the disk image which may only reside on the user’s computer for a time period of a few minutes while they install your app.

For Seasonality 1.4 I decided it was time to refresh the look of the disk image a bit. I had a custom background image previously, but it looked a lot like the Gaucho Software website, and I didn’t think that branding was appropriate for the DMG. A few months ago I came across a blog posting over at Software Trenches with some good comments regarding different DMG designs. There are some very nice background images displayed there, but the one that stood out to me was that of Adium. It was clean, easy to read, and matched the style of OS X pretty well. I decided to base the new Seasonality DMG off of that type of design. Here is what I came up with…

At the top I have the standard Gaucho Software text and logo, complete with drop shadows where appropriate. The background has some very faint pin-striping, just to add a bit of texture and depth. It’s also a tribute to older versions of Mac OS X. Below that you see a highlighted box, which draws the user’s attention to the immediate action that needs to be performed to install Seasonality. I spent some time working on the arrow, and decided to match it’s look with the text above. Finally, at the bottom you have a couple of supporting documents.

One nice thing about this DMG design is the icon spacing. It’s setup so the icons are at the default grid spacing of Mac OS X, so this will save me the trouble of lining up the icons exactly every time I create a DMG.

An aspect of a DMG archive that is commonly overlooked is the disk image icon. A lot of apps use the standard disk image icon. A small subset of apps will go one step further and place their application’s icon on top of the standard disk image, to make that particular DMG stand out more. What most developers overlook is keeping the 3 dimensional aspect in check. Just pasting the application icon on top of the disk image icon will result in the app icon that does not match the 3D perspective on the disk image. To fix this, I make a couple of Skew adjustments in Photoshop, and the disk image icon below shows the completed results. This makes the icon more believable and adds that final touch.