Pages

Wednesday, October 31, 2012

How to Create a Custom Disk Image for Your Mac App Installer

I have always envied a lot of applications for having such professional-looking installers. I am a newbie developer myself and for the past 24 hours, I've been knocking my head off just to create a custom disk image for my own apps.

So, I went to Google and asked for help. I looked for any tutorial that would might be a possible help; I've read every discussion that talks about creating dmg installers; and... I've surfed for any free application that would somehow help me with this dilemma. I've downloaded a few free applications. The worse thing that came to me was installing those apps which aren't even capable of doing what I was really looking for. They require registrations and payments for the features that I needed. Of course, I wasn't going for that.

I almost gave up. Honestly, I even attempted to look for some cracked serial numbers, just to avoid the registrations and the payments, whatsoever. Yes, I did found a few - but they are no longer usable for me, anymore. I realized that there might be some other way - than committing piracy. So, I looked and looked for some more tutorials, until finally...I found one! This site Mac101 gave me the whole idea of creating a disk image without even using those freakin' apps.

I have been using Disk Utility ever since I started developing for Mac OSx. I didn't realize that I don't need to have some paid applications just to create my fancy app installer! I felt like an idiot, back there.

Now, after I've successfully created my Mac application dmg installer, I just thought of sharing the knowledge that I've learned to others. There might be some developers out there who also had the same experiences as I did. This would perhaps help them as well.

Just follow these simple steps and you're good to go!

1. Create your own customized background.
    My example isn't that great, but you get the picture. :)




2. Open Disk Utility and create a new disk image file.
    Click on "New Image" from the toolbar (encircled) to create.
 



After clicking, you will be prompted with the saving options. I have labeled only the basic ones for you, just for the purposes of this discussion.




3. Drag your background image to your mounted disk image.
    You can put it anywhere inside the disk image.




4. Create an alias for your background image.
    Just right-click and select "Make Alias". Just so you know, an alias is equivalent to a short cut in Windows.




5. Open the Terminal window.
    Then type "defaults write com.apple.Finder AppleShowAllFiles -bool true" and hit Enter/Return key of your keyboard. If the bool value is true, that means all hidden files will be shown.




6. Restart Finder.
    You can do this by typing "killall Finder" in the Terminal window or by selecting Finder in the Force Quit Applications window and click on "Relaunch".




7. Set the dmg background.
    Click on the background image alias. Press Command + J keys on the keyboard in order to show the View Options popup window (right). At the bottom, you can see the Background options - select Picture. Then, drag your background image to the space provided (encircled bottom-right). You can set the size of the dmg window, as well as the icon size, text size and others. Just do some experiments afterwards. :)


The invisible files like ".Trashes", ".fseventsd", and ".DS_Store" can now be seen.



8. Hide your background image.
    In order to hide your background image icon from the dmg window, rename it by just adding a dot (.) at the beginning of the file name. In this example, change "background" to ".background" and hit the Return key. A warning prompt message will be shown - just click OK. Adding the dot to the file name will let the system treat the file as invisible. You will notice that the image will have a decreased level of opacity on its image.


The background is now successfully customized.



9. Delete the background image alias.
    Simply right-click, then select "Move to Trash".




10. Hide the invisible files.
      Open the Terminal again and type "write com.apple.Finder AppleShowAllFiles -bool false". Yes, it's the same script as showing the invisible files - just change the bool value to false. Don't forget to type "killall Finder" to restart Finder.




11. Add your application file/s to the dmg file.
      If your application uses some third party libraries and other files, you can add them all here.



12. Create an alias for the Applications folder.
      Open Finder. Go to System Disk and look for the Applications Folder. Right-click and select "Make Alias".



Drag the Applications alias that you have created to the dmg file as shown below.



The next step is often forgotten. If you are one of those who are concerned about the file size of your app installer. Right-click on the dmg file of your app installer and select "Get Info" to see the file size.
Knowing the file size - why is it important?
For starters, perhaps, the smaller the size, the better. It can be easily downloaded, saves time and space.

If you remember when we first setup the size of your app's disk image, we initially put 40MB (the dropdown options depends on the version of your OS and the required file size for your app is also a factor). So, what do we do, in order to slash extra spaces and freeing those spaces that the installer don't even need.



13. Convert the dmg file to compress its file size.
      Open Disk Utility again and look for your app installer's dmg file. Right-click and select "Convert <your app's name.dmg>".



Set the file name. You can actually retain the file name of your disk image or make a new one. Save the file to any directory you want.



As you can see, the file size shrunk into 1MB. That gives you 40MBs of memory saved.



Open the compressed dmg file and you're done!



Sorry about my images, they're a bit crappy. I promise to edit these as soon as I can.
Nonetheless, I hope this helped you out on your project. Just let me know if you encountered any problem. If you have some ideas to share, feel free to post your insights. :)