Dan has been going through the various parts of 1Password and freshening up the design of each element as he makes his way around. The Disk Image icon and background were in getting a little 'long in the tooth' and thankfully Dan had some ideas (and the skill!) to fix them.
The Disk Icon of the 1Password.dmg file is now much nicer; it it shown above in the top-left of this post. Not only does it look better than our current one, Dan added many more sizes so it scales up nicely in Finder. The old one scaled so bad in Finder I did not even want to include a screenshot.
As for the Disk Image image itself, there are many wonderful existing DMG designs for motivation, but we of course wanted something unique.
Before we see the new design, it's important to see where we have come from. In version 1.5 we had this:
I designed this one myself as you can probably tell! While not the prettiest DMG on the block, you need to see the original design to really appreciate what a huge step forward this was; those who installed version 1.0 will know what I mean. Needless to say Dan fixed this quickly and gave us the design available in the current version:
While we all liked this design, it felt "too busy" and did not put focus on the important task. The installation of 1Password is the most important part so we wanted to highlight that, with a secondary focus on warning people who are upgrading that they must quit their browsers. This design was also relatively large given the simplicity of the installation task.
Without further ado, here's what version 2.6.5 of 1Password's DMG will look like:
The "swoosh" not only helps emphasis what is needed (i.e. drag to install), but it also has that "wow" factor that us Mac users have come to expect.
Please let us know what you think! Do you have any suggestions for Dan to make this even better?
Aside: How To Implement a Custom Disk Image Design
For those looking for technical details on how to make a DMG like this, there are many existing articles that do a great job explaining the process. There is even a video howto.
The one problem I ran into that is not explicitly stated anywhere on the web from what I can tell is that if you want a custom icon on the Applications "folder" in your DMG, then it cannot be a symbolic link. When you have a symlink as your Applications 'alias', you cannot customize the icon.
While this makes sense now that I explicitly think about it (i.e. where would OS X store the icon for a symlink?), I spent hours googling for "how to use custom icon Symlink", "DMG Design Custom Applications Icon", "OS X Custom DMG Background", and several other variations of these. I had created the symlink years ago and when re-reading these articles I skimmed over the spots that discussed creating the Applications folder alias.
Hopefully collecting the terms I searched for here will help the next poor sap trying to create a fancy disk image with a custom icon.
