Customize your iPhone: DockSwap

Update: “DockSwap” is now known as “Customize”. Also, for more theme-like options, you may want to use Summerboard instead »

Note: Before following this tutorial, make sure you have everything you need »

With the introduction of the iPod Touch, many iPhone owners (myself included) let slip a few quiet “ooohs” and “ahhs” at the more Leopard-esque Dock background behind the 4 main application icons:

Initially, I just resigned myself to the hope that Apple would update the look of the Dock in the next major iPhone Software Update. But then a few days ago, a new application appeared in the Installer.app list: DockSwap, along with some custom Dock background images. Bleeding-edge developers be praised! Of course, I had to install it and make my own custom background, and this tutorial is a result.

Before and after

By following the steps below, we’re going to take our iPhone Dock from its default style:

to a shiny new “iPhone Touch” version:

We won’t be replacing the default applications or icons in this tutorial, though I plan to cover launchers and SpringBoard customization in the future.

Get DockSwap

Before we dig into the graphics, launch Installer.app on your iPhone, and install DockSwap. There are also some custom background images for DockSwap, so go ahead and install them if you want to play around with some alternate options.

Do not touch?

When I started writing this tutorial, the default package of custom Dock backgrounds did not include any iPod Touch versions, however this has since been remedied. For those of you who don’t want to create a custom version (e.g. changing the background color to something other than black) or haven’t customized the four default iPhone application icons (Phone, Mail, Safari, iPod), you can just install the custom images and use one of the included iPod Touch background images—however, as of this writing, I still prefer my version since it is closer to the real iPod Touch background.

The template

To make it as easy as possible to customize the dock image, I’ve created a simple, layered Photoshop file that includes the default set of icons, a customizable background color layer, and the other elements in separate layers in case you want to play around on your own:

Download the PSD » (ZIP, 68KB)

If you don’t have Photoshop, I’ve also created two PNGs, one with reflections and one without:

Download the Touch Dock background with reflections » (PNG, 9KB)
Download the Touch Dock background without reflections » (PNG, 2KB)

You can just use these as-is, or edit them using your non-Photoshop image editor of choice.

Your custom background

If you don’t plan to make any customizations, and just want the iPod Touch look, you can just download one of the PNGs above and skip to the next section. Otherwise, read on.

The PSD includes a text layer with reminder instructions, so make sure you hide that before exporting your image.

You can easily change the background color of the dock by double-clicking the bottom layer in the layer group (named “bg color”). Some colors will work better than others, so play around until you get the desired result. Darker colors will work better:

Of course, there’s no limit to what you can do visually, but I’ll leave further explorations to you.

Once you have your background image the way you want it, just save it as a PNG (via Save As… or as a 24-bit PNG using the web export option).

Upload and apply

Now that you have your custom background image(s), it’s time to get them on your iPhone, and the easiest way is via SFTP. If you followed the instructions, you will be able to connect directly to your iPhone via its IP address (your iPhone must be connected to a WiFi network for this to work). To find your iPhone’s IP address, tap Settings→Wi-Fi, then the blue arrow next to the name of the network to which you are connected.

Connect to that IP address using your SFTP client, with “root” as the username and “dottie” as the password (to keep the connection alive, you may need to temporarily change your iPhone’s Auto-Lock setting to “Never”, under Settings→General→Auto-Lock, to prevent the iPhone from entering sleep mode).

Once logged in, navigate into the “Library” directory that appears (the full path to this directory is /private/var/root/Library). Once there, navigate into the “DockSwap” directory (if it doesn’t exist, create it), and then create a new directory named “Custom”.

Upload your background images into the newly created “Custom” directory, then launch DockSwap on the iPhone and select your new background image. Press your “Home” button to return to the SpringBoard (which automatically restarts), slide the unlock switch, and your Dock should now be graced by your custom background image!

Share your customizations

In the grand spirit of sharing, if you create some snazzy new custom Dock background, post it online and link to it in the comments of this entry, and I’ll start creating a collection that can be posted as a package. I may also see about getting such a package added to the Installer.app sources so it can be regularly updated and easily installed on iPhones everywhere.

Even if you prefer to not share your custom images, go ahead and post screenshots of your customizations to Flickr and add them to the iPhone Customization group.