How To: Create DMG Art for Fancy Application Installations

August 11, 2009 in How-To by Mark

In this series we go over how to create DMG disk image artwork for use with your apps or applications. Having a professional looking installation folder is critical to your apps image, and rather simple to achieve good results.

Step 1: Create a Background

I would recommend using a size such as 700px by 400px, however you can use any size you want.

Save the file as DMG and set it aside for a future step.

Note: Please post up your artwork, we would love to see what our Members have created!

%title%

Step 2: Create a Custom Size DMG

First Create a DMG according to your size requirements, to do so follow the instructions in our other post Create Encrypted DMG Disk Images

Be sure to not use encryption, which would enable password protection.

%title%

Step 3: Background Folder

The DMGDemo.dmg should of automatically mounted, double click on the mounted DMG.

Create a folder inside the mounted dmg and name it “background”. Drag the background image we created into the mounted DMG’s background folder. The background image needs to reside inside DMG, otherwise when the DMG is opened on another system it will be looking at the wrong location, and not a localized folder on the DMG.

%title%

Step 4: Place your Files or App

Drag your app file onto the DMG, we will rearrange them once we setup the background image.

%title%

Step 5: Create Applications Shortcut

Open your root hard drive and Right click on Applications and select Make Alias. Drag the Applications alias onto the DMG.

Rename the Applications alias as “Applications”

%title%
%title%

Step 6: Change Icons

First find the icon your wish to use (generally the same as your Application), it can be any volume, application, file, or folder icon. Simply click on the icon and hit Cmd + C to copy the Icon.

Right click the Mounted DMG icon from the Desktop, and choose choose Get Info or press Cmd + I.

Click the icon in the upper-left corner.

From the Edit menu, choose Paste or press Command + V to replace the icon.

%title%

Step 7: Hide Folder

Make sure you have Developer tools installed, aka xcode. If you do not, go download it! - note, you will need to be a ADC (Apple Developer Connection) Membership, but don’t worry its free.

Open Terminal and perform the following command to hide the background folder.

/Developer/Tools/SetFile -a V /Volumes/your_image_name/hidden_folder

your_image_name : in this case, “DMGDemo”
hidden_folder : in this case, “background”

%title%

Step 8: Change the Views

Right click in the DMG and select Show View Options, or your can simply press Command + J.

1. Change the Icon size to whatever works best with your design, we will be using 128 x 128.

2. In Background: select Picture, and drag your background we created to the “Drag image here” section.

%title%

Step 9: Arrange Icons and Re-size Window

Rearrange the icons to your liking, they will stay in place.

Resize the window so it matches up with your background image.

%title%

Step 10: Compress Image

Right click the DMGDemo mounted image and select Eject.

Open Disk Utility and right click the DMGDemo.dmg and select Convert…

Image Format: select compressed
Enryption: Not needed, but you can select it if desired.

%title%

Step 11: Results

The DMG was compress and made un-writable, and for this example its now 3.1MB and ready for distribution.

We would love to see some DMG artwork created by our members, so please feel free to post them up here!

%title%