If you haven’t already, you should read the Introduction to WinterBoard first.

 

     This guide assumes you have a jailbroken iPhone or iPod Touch, a general understanding of using ssh to transfer files to your device, as well as basic knowledge on using Adobe Photoshop or other image editing software capable of producing transparent images in png format.

 

In this tutorial you will learn to

1. Create the basic folder structure for your SpringBoard theme.
2. Create a Wallpaper for the SpringBoard.
3. Create a Dock image for the SpringBoard.
4. Create a StatusBar image for the SpringBoard.
5. Create an icon set for the SpringBoard.

 

 

Create the basic folder structure for your SpringBoard theme
WinterBoard themes are stored within individual folders inside the /Library/Themes/ folder. Each individual folder houses a single theme and each folder name is displayed in WinterBoard as the name of the theme. So the first thing you need to do is create your main theme folder and name it something like MyFirstTheme. You can also add the .theme extension to the folder name if you want. In that case the folder name would be MyFirstTheme.theme.

 

Create a Wallpaper for the SpringBoard
With WinterBoard there are a couple methods at your disposal you can use to add a Wallpaper to your theme. You have the option to use a single image as your wallpaper or use the more advanced method of using html and javascript to display a series of images. Since this tutorial is intended to show you the basics, I will only go into detail on the simple and most common method of using a single image.

     The first step is to create a 320x480px image in png format using Adobe Photoshop or your favorite image editing software. Once you’re happy with the design, name it Wallpaper.png and save it to the folder you created in the previous step. At this point you should have the following: A folder named “MyFirstTheme” and a singe image inside named “Wallpaper.png”.

 

Create a Dock image for the SpringBoard.
Like the Wallpaper.png file, the dock image is goes in your main theme folder “MyFirstTheme” and is always named Dock.png.  This image should be 320x91px regardless of the design.  If you want the dock to appear smaller on screen you should still use a 320×91 canvas otherwise it will get stretched out of proportion.

 

Create a StatusBar image for the SpringBoard.
This image is displayed on the main home screen at the top behind the signal bars, clock, and header battery. The StatusBar image should always be 320x20px and be named StatusBar.png.  This file goes in the main theme folder “MyFirstTheme” along with your Wallpaper.png and Dock.png.

 

Create an icon set for the SpringBoard
Icons for the SpringBoard are one of the toughest things to make in terms of theming the iPhone. Consistency is key to designing an aesthetically pleasing theme.  Generally the icons should be the same size, have the same visual effects, and most importantly they need to flow with the rest of your theme.

     When designing a theme with icons, you have to make a folder inside the “MyFirstTheme” folder you made previously and name it Icons. The folder name Icons is case sensitive.   The iPhone’s stock icons are 57x57px .png images but you can make them slightly smaller or larger as needed. The filenames for icons are case sensitive and must match the names displayed under the default icons on the screen.  e.g.  The sms icon would be named Text.png and the calendar icon would be named Calendar.png.