How To Make a Theme (iOS4/HD/SD)

Discussion in 'iOS Themes and Customization' started by theiThemer, Feb 15, 2010.

  1. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Back on the scene with some free time, I've decided to fully revise my theme creation tutorial adding support for iOS4 and Retina (HD). If you do not have a Retina display, this tutorial will also explain how to make non-retina (SD) themes.
    So without further a due...

    Complete Theming Guide
    -by iThemer

    So you want to make a theme?
    Well this is a good place to start.


    What You Need:
    - SSH Client
    - Know how to SSH (link to guide here, written by spoonforknife)
    - Know how to install a theme (link to guide here, written by Vince)
    -
    Photo Editing Program
    - Some Decent Graphic Designing Skills

    --------------------------------------------------------------------------

    First Things First:

    This tutorial is written for iOS4 devices. If you aren't on iOS4, I suggest you go ahead and update. Attempting to follow this tutorial on devices that are not running iOS4 will result in most of your theme not functioning properly.

    This tutorial will be divided into two sections; one for HD Retina devices (iPhone 4 and iPod touch 4), and one for SD Devices (iPhone 3G/3GS, iPod touch 2G/3G).

    'Section 1' will pertain to HD Devices, and 'Section 2' will pertain to SD Devices.
    Please proceed to the appropriate section, where the tutorial will begin

    --------------------------------------------------------------------------

    Section 1: HD Theme Creation
    (iPhone 4, iPod touch 4G)

    Unlike SD devices, HD devices run on a doubled screen resolution. On SD devices, the full resolution is 320x480, while on HD Devices, the full screen resolution is 640x960.

    Start off by creating a folder, perhaps called MyTheme.
    Inside this folder, we will be placing many other files and folders you will read about.

    For the theme to be "True HD", it's recommended that you also set the ppi (pixels per inch) for each image to 326.

    Wallpaper & Lockscreens:

    HD device's wallpapers & lockscreens cannot be skinned with WinterBoard.
    Instead, you need to do it like this:

    Create your wallpaper; this will be a 640x960 image.
    Save your image to your computer.
    Sync the photo with your HD device through iTunes.
    Go into the "Photos" app, and set the picture as either your wallpaper and your LockBackground.

    Putting 640x960 images in your theme folder named "Wallpaper.png" and "LockBackground.png" will NOT WORK. If you try this, WinterBoard will cruelly downsize your image to 320x480, and apply that, which is quite terrible.

    If your creating your theme for public release, its best to put your Wallpaper and LockBackground in the root of your theme folder. Most people know they have to sync through iTunes; but perhaps include a ReadMe.

    Custom Icons: Location

    Inside the "MyTheme" folder we created, make a new folder, calling it "Bundles".

    Inside "Bundles" is where your custom icons go.
    Custom icons on HD devices need to be skinned according to what's known as the app's "Bundle Identifier" (BID).
    Obtaining an app's BID can be quite a process.
    One of the easiest ways of obtaining the BID is by using SBSettings.

    Open SBSettings, and click "More".
    Scroll to the bottom and click "App Folders".
    Have a pen & paper or a Notepad open.
    Go through and select the apps you wish to skin, and record the directory in which the app's content is stored, it should look like this:

    Please Register or Log in to view images



    Record the path of each app you wish to skin on a piece of paper or Notepad, you will need this for later. Typically, you only need the part I highlighted (first segment) of "code" to identify an app's location, although this isn't always the case, so beginners should copy the whole path.

    Once you have all the app's locations recorded, open up your SSH location and navigate to each app's location, and once again, get out a piece of paper or Notepad.

    Inside each app's directory should be an "Info.plist".
    Open that PLIST, either in your SSH client or iFile, and navigate to the line that reads "CFBundleIdentifier", and the string directly below that. It should be in the form of "com.companyname.appname". This is your BID. Record this, along with the app name.

    Essentially, you are done with the hard part: finding the BID.
    Once you have all your BIDs, go back into your "MyTheme" folder, remember that?

    Inside your "MyTheme" folder should be a "Bundles" folder, open "Bundles".
    Inside this folder, you will place multiple folders, one for each app's icon you wish to skin. You will name these folders the particular BID for each app.

    For example, if I wanted to create a custom icon for the "Angry Birds" app, I would make a new folder inside "Bundles" named "com.clickgamer.AngryBirds". I would need to do this for every app's icon I wish to skin.

    As far as I'm concerned, these folder names are case sensitive.
    Be sure to name each folder exactly the way the BID is seen under the "CFBundleIdentifier" key in the "Info.plist".

    This is a very time consuming process, and it's not done yet.

    Custom Icons: Dimensions & Naming

    Now we know where to put the custom icons, but what about the icons themselves?
    On SD devices, the "legit" icon dimension was 60x60, so what do you think it is on HD Devices? Yup, 120x120.

    All custom icons for HD devices should be at a dimension of or around 120x120.
    Of course, if you are making a particular theme where an icon dimension of, say, 118x120 looks better, than this is acceptable.

    Once your done creating your icons, they should all be named "icon@2x.png", and each icon goes in the particular folder inside the "Bundles" for that app.

    For example, If I had just made a custom icon for the "Angry Birds" app, the icon would be of or around the dimension of 120x120px, be named "icon@2x.png" and I would put it in "/MyTheme/Bundles/com.clickgamer.AngryBirds/".

    Repeat this process for all custom app icons.

    Custom Icons: Backward-Compatibility

    Ever wonder how themes have HD and SD versions? Well, this is quite simple.
    To make your custom icons also compatible with SD devices, just do this:

    Make a new version (or downsize) your 120x120px icons to 60x60.
    Name this "icon.png", and place it in the same folder as "icon@2x.png".
    SD devices will automatically use the "icon.png".
    HD devices will automatically use the "icon@2x.png".
    You can have both files in the same folder at the same time.

    The Little Stuff:

    Now we got the hardest part done; custom icons and wallpapers.
    But what about the other stuff; docks, status bars, page indicators, etc.

    In this section, we'll learn about the proper names and dimensions for some popular themed images on HD devices.

    Dock:
    Dock images go in "MyTheme/Bundles/com.apple.SpringBoard"
    The image should be "640x90", and be named "SBDockBG@2x.png"
    The image can contain transparency; any transparency will reveal whatever Wallpaper assigned.

    Status Bars:
    Status Bars in iOS4 are tricky.
    There are 3 status bar files that need to be themed.
    Each one is present in different situations:

    "Translucent_Base@2x.png" - Lockscreen Status Bar
    "Black_Base@2x.png" - Homescreen Status Bar
    "Silver_Base@2x.png" - 'In-App' Status Bar

    Each image should be 10x40, and it will be tiled horizontally to fill up the rest of the space. Please do not make it 640x40, it will not work, it will stretch it out and make it look like sh*t.

    Each image goes in "/MyTheme/Bundles/com.apple.UIKit/"
    They could also go in "/MyTheme/UIImages/", but the first way always fail-safe.

    Page Indicators (& Spotlight Search Page Indicators):

    Page indicator dots are a little more simple.
    Basically, there are four files:

    "UIPageIndicator@2x.png" - Page Indicator Dot
    "UIPageIndicatorCurrent@2x.png" - Page Indicator; shows that's the page that's currently selected
    "SBSearchPageIndicator@2x.png" - Spotlight Page Indicator Dot
    "SBSearchPageIndicatorCurrent@2x.png" Spotlight Page Indicator; show's your currently on Spotlight search.

    All images should be 12x12.

    "UIPageIndicator@2x.png" and "UIPageIndicatorCurrent@2x.png" go in "/MyTheme/Bundles/com.apple.UIKit/"

    "SBSearchPageIndicator@2x.png" and "SBSearchPageIndicatorCurrent@2x.png" go in "/MyTheme/Bundles/com.apple.SpringBoard/".

    --------------------------------------------------------------------------

    More theming quick tips will be added under "The Little Stuff" periodically, such as Folder Backgrounds and et cetera.
    For now, this is all.

    This concludes theme creation for Retina HD devices, (the iPhone 4 and iPod touch 4G). I hope this guide wasn't too hard, and I also hope I'll be seeing some of your work in our 'Themes' section.

    I thank you very much for reading my guide, and I hope you enjoyed it.
    If you need any help, feel free to PM me, VM me, or leave a comment, and I'll be answering. (;

    --------------------------------------------------------------------------

    Section 2: SD Theme Creation
    (iPod touch 2G/3G, iPhone 3G/3GS)


    On SD devices, the full resolution is 320x480.

    Start off by creating a folder, perhaps called MyTheme.
    Inside this folder, we will be placing many other files and folders you will read about.


    Wallpaper & Lockscreens:

    SD Device's wallpapers and lockscreens can be easily skinned using WinterBoard.

    Create your wallpaper; this will be a 320x480 image.
    The file name should be "Wallpaper.png".

    Create your lockscreen wallpaper; this will also be a 320x480 image.
    The file name should be "LockBackground.png"

    "Wallpaper.png" and "LockBackground.png" go in "/MyTheme/", right there, in the root directory.

    When the theme is applied, whatever "Wallpaper.png" is there will become the SpringBoard wallpaper, and whatever "LockBackground.png" is there will become the lockscreen wallpaper.

    Custom Icons:

    Lucky for you, icons on a SD device are easily customizable.
    First, you need to find the "label" for the apps you wish to skin.

    Finding the label is extremely simple.
    The label is whatever name is under the app's icon on your SpringBoard, or, the "label" for it.

    For example, under the icon for the "Settings" app, it says "Settings".
    So, that would be the app's "label".

    Custom icons should be of or around the dimension of 60x60.
    Icons go in "/MyTheme/Icons".
    File name is the app's "label".

    For example, if I created a custom icon for the "Settings" app, I would call it "Settings.png", and put it in "/MyTheme/Icons/".

    The Little Stuff:

    Now we got the hardest part done; custom icons and wallpapers.
    But what about the other stuff; docks, status bars, page indicators, etc.

    In this section, we'll learn about the proper names and dimensions for some popular themed images on SD devices.

    Dock:
    Dock images go in "MyTheme/Bundles/com.apple.SpringBoard"
    The image should be "320x91", and be named "SBDockBG.png"
    The image can contain transparency; any transparency will reveal whatever Wallpaper assigned.

    Status Bars:
    Status Bars in iOS4 are tricky.
    There are 3 status bar files that need to be themed.
    Each one is present in different situations:

    "Translucent_Base.png" - Lockscreen Status Bar
    "Black_Base.png" - Homescreen Status Bar
    "Silver_Base.png" - 'In-App' Status Bar

    Each image should be 5x20, and it will be tiled horizontally to fill up the rest of the space. Please do not make it 320x20, it will not work, it will stretch it out and make it look like sh*t.

    Each image goes in "/MyTheme/Bundles/com.apple.UIKit/"
    They could also go in "/MyTheme/UIImages/", but the first way always fail-safe.

    Page Indicators (& Spotlight Search Page Indicators):

    Page indicator dots are a little more simple.
    Basically, there are four files:

    "UIPageIndicator.png" - Page Indicator Dot
    "UIPageIndicatorCurrent.png" - Page Indicator; shows that's the page that's currently selected
    "SBSearchPageIndicator.png" - Spotlight Page Indicator Dot
    "SBSearchPageIndicatorCurrent.png" Spotlight Page Indicator; show's your currently on Spotlight search.

    All images should be 6x6.

    "UIPageIndicator.png" and "UIPageIndicatorCurrent.png" go in "/MyTheme/Bundles/com.apple.UIKit/"

    "SBSearchPageIndicator.png" and "SBSearchPageIndicatorCurrent.png" go in "/MyTheme/Bundles/com.apple.SpringBoard/".

    --------------------------------------------------------------------------

    More theming quick tips will be added under "The Little Stuff" periodically, such as Folder Backgrounds and et cetera.
    For now, this is all.

    This concludes theme creation for SD devices. I hope this guide wasn't too hard, and I also hope I'll be seeing some of your work in our 'Themes' section.

    I thank you very much for reading my guide, and I hope you enjoyed it.
    If you need any help, feel free to PM me, VM me, or leave a comment, and I'll be answering. (;

    --------------------------------------------------------------------------

    All credit for this guide goes to theiThemer.

    If you wish to link this guide on your site, please PM or VM me first, where I'd most likely accept if proper credit is given on whatever site.


    --------------------------------------------------------------------------
  2. cbren

    cbren Member

    Joined:
    Feb 15, 2010
    Messages:
    215
    Likes Received:
    0
    Device:
    iPhone 4 (Black)
    The part where you type in:
    It didn't work for me in WinSCP. But great guide!
  3. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Theres been some bugs with the program with the latest release of WinterBoard.

    Saurik is working on it.
    For now you can take a look at that text file and Google/Google Image search and see if you get any hits.
  4. Nburnes

    Nburnes Well-Known Member

    Joined:
    Jan 3, 2009
    Messages:
    9,022
    Likes Received:
    767
    Device:
    OnePlus One
    You also don't have to have .themes at the end of the name. Manic told me that a long time ago.
  5. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    You dont, but it does have effect with some of the UIImages if you dont.

    Probably nothing you need to worry about, but I try to keep this as friendly to beginners as possible, so, for now I'm just gonna leave it as is.
  6. LssThanThree

    LssThanThree Active Member

    Joined:
    Jan 21, 2009
    Messages:
    1,943
    Likes Received:
    3
    Device:
    iPhone 5 (Black)
    Very nice and informative tutorial.
  7. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    Thank you so much =)
  8. narwal13

    narwal13 Active Member

    Joined:
    Oct 12, 2009
    Messages:
    3,070
    Likes Received:
    6
    Device:
    5G iPod touch
    if you have the .theme as an extension on a mac with imovie, it thinks of it as an imovie theme.

    nice guide btw, are you saurik? XD
  9. theiThemer

    theiThemer Active Member

    Joined:
    Jan 23, 2010
    Messages:
    1,329
    Likes Received:
    4
    Device:
    3G iPod touch
    What? No!
    Lol.
  10. Chamilism

    Chamilism New Member

    Joined:
    Dec 27, 2009
    Messages:
    637
    Likes Received:
    0
    Device:
    iPhone 4 (White)
    GOod Guide, very appreciated the time and effort you put into this. Really helpful. Maybe you can suggestion programs to making themes? I think one is called iDesigner.

Share This Page