[Tutorial] How To Create Basic Themes

Discussion in 'iOS Themes and Customization' started by Jesuspwnt, Mar 25, 2009.

  1. Jesuspwnt

    Jesuspwnt New Member

    Mar 19, 2009
    Likes Received:
    Here I'll be creating a Vista / Aero type theme.
    I'll be creating:
    • A Wallpaper
    • A Slider
    • A Lock Screen
    • Custom App Icons

    File Structure
    First off, name your theme.
    Create a folder name-of-theme.theme
    Everything goes in that folder.

    I will explain what goes where as I go along.
    All file names have to be exact.



    Since this is a vista aero theme. I've grabbed the Vista ultimate Wallpaper, Cropped it, so i have the interesting part only, and then resized it to 320 x 480 (Resolution of the iTouch).

    Please Register or Log in to view images

    save this to your theme folder as "Wallpaper.png"

    That's the wallpaper done!



    When creating a slider, you need 2 parts, The background, and the slider icon.

    I'm going to use the vista logo for the slider icon, As it's easily rendered.

    Please Register or Log in to view images

    Now go get the background, i'll use the wallpaper i've currently got, and see what colours go well with it. For this! Goto ColorHunter.com

    It will give you a colour palette to match the image you upload or link to.

    ColorHunter.com returned this pallete for my image:

    Please Register or Log in to view images

    This will help you colour coordinate your slider background & track.
    So in what ever image editor you use, create a new Document, 79x96 (Default Dimensions; Your iPod will cut it up and copy it over; etc)

    Create a nice little gradient using the colours that ColourHunter returned to you.

    Contract by 20;
    Smooth By 10;

    Add a gradient to it, and an inner shadow.
    I used:
    Gradient: #605d7d - #1696ad

    For the inner shadow, I typically use:

    Please Register or Log in to view images

    We end up with..

    Please Register or Log in to view images

    In your theme folder, create a folder called "Folders";
    Inside there, create a folder called "TelephonyUI.framework"
    In here stick save your Slider Background as "bottombarbkgndlock.png"

    ... Right! Now for the slider icon, we have the Vista Logo, rendered and all..
    Move it to the document with your Lock slider bg & track, then make it fit inside with a few pixels to spare..

    save this slider icon, on its own in the folder (xxxx.theme/Folders/TelephonyUI.framework/)
    And save it as "bottombarknobgray.png"

    If you want to, you can create 2 other slider icons for power off, etc, (Usually Red & Green)

    Save them in the same place.
    Green, save as: bottombarknobgreen.png
    Red, save as: bottombarknobred.png

    and that's done!


    Lock Screen

    The lock screen!
    I created a template for you guys to use, in order to get everything accurately.
    Just make sure, when you save it, you get rid of the bottom bar, etc, it's only there to give you an idea of where stuff goes..

    So first, add a gradient to the top bar (It's the background for the clock)
    For mine, i just used two colours in my Palette.

    I also copied over the layer style from the Slider BG, and the Slider Icon just to see what it'd look like.
    Doesn't look too bad if I May say so Myself..

    Please Register or Log in to view images

    Save your LockScreen in your xxxxx.theme folder as "LockBackground.png"
    (Credit To: Gitykins)
    Volia! Lock Screen Finished!


    Custom App Icons

    This is quite easy really.
    Just make sure each Icon Must Be 60x60 Or Below to work properly (Else it'll be HUGE!)

    When saving the icon, Find out what the app is named as by SSH'ing into your iTouch / iPhone and going to: /Applications/
    And finding the name of the app you wish to change.

    Now, locally, go to xxxxx.theme/Folders and create a folder with the exact name of the app with the .app folder extension.

    For example, the app store would be:

    The I've also included a template for you to put your icons onto, it's a glossy icon button.


    Default Strings

    Changing the "Slide to Unlock", "Enter Passcode" text.
    Locally, Goto xxxxxx.theme
    Create a new folder called "Bundles",
    Inside here, Create a new folder called "com.apple.springboard"
    Inside this folder, create a folder called "en.lproj" (replace "en" with your language prefix, for example, spainsh is "es", french is "fr")

    Inside this folder, create a text file named "SpringBoard.strings".
    Make sure you have file extensions turned on if using windows
    (Tools -> Folder Options -> View -> Untick "Hide Extensions for Known File Types")

    In this file "SpringBoard.strings"
    Add this text:

    "AWAY_LOCK_LABEL" = "";
    "SLIDE_TO_CANCEL" = "";
    "SYNC_IN_PROGRESS" = "";
    "ENTER_PASSCODE" = "";

    In my Themes, for my iTouch, i use:

    "AWAY_LOCK_LABEL" = "Welcome Jesus";
    "SLIDE_TO_CANCEL" = "Cancel Sync";
    "SYNC_IN_PROGRESS" = "Syncing Your sh*t";
    "POWER_DOWN_LOCK_LABEL" = "Leave the Matrix...";
    "ENTER_PASSCODE" = "Teh Password Is..?";

    AWAY_LOCK_LABEL - This is the "Slide to Unlock" text
    SLIDE_TO_CANCEL - This is the "Slide to Cancel Sync" text
    SYNC_IN_PROGRESS - This is the "Sync In Progress" text
    POWER_DOWN_LOCK_LABEL - This is the "Slide to Power Off" text
    ENTER_PASSCODE - This is the "Enter Passcode" text

    Attached to the end of this thread, I included a copy of mine, so you can download it.


    App Names

    App Store	- AppStore.app
    Calculator	- Calculator.app
    Customize	- Customize.app
    Cydia		- Cydia.app
    Demo App	- DemoApp.app
    Dock Prefs	- dock2prefs.app
    gb4iphone	- gameboy4iphone.app
    gpSPhone	- gpSPhone.app
    iBluetooth	- iBluetooth.app
    Installer	- Installer.app
    Logo Me		- LogoMe.app
    Maps		- Maps.app
    Contact Book	- MobileAdressBook.app
    Calender	- MobileCal.app
    Mail		- MobileMail.app
    Music Player	- MobileMusicPlayer.app
    Notes		- MobileNotes.app
    Safari		- MobileSafari.app
    Photos		- MobileSlideShow.app
    iTunes		- MobileStore.app
    Clock		- MobileTimer.app
    Nike		- Nike.app
    Settings	- Preferences.app
    SB Settings	- SBSettings.app
    Stocks		- Stocks.app
    Vista		- Vista.app
    Weather		- Weather.app
    Winter Board	- WinterBoard.app
    Youtube		- YouTube.app
    If you want any others, just PM me


    Well that's it!
    All the basics have been covered!

    Copy your xxxxx.theme to:
    (xxxxxx will be different in each iTouch)

    Here's what the finished product looked like:

    Please Register or Log in to view images

    Please Register or Log in to view images

    Attached Files:

  2. studangerous

    studangerous Super Moderator Emeritus Staff Member

    Dec 2, 2007
    Likes Received:
    iPhone 4 (Black)
    Nice little tutorial - if you need to post more than 10 images make sure you reserve a few more posts... PM me if you do and I'll delete this one.
  3. Jesuspwnt

    Jesuspwnt New Member

    Mar 19, 2009
    Likes Received:
    Nah it should be okay =P
    I hope, just modifying some app icons, etc, to add to the theme.
    ------------------double post merged------------------

    - Custom Page Indicators
    - Custom Dock
    - Custom Sounds
    - List of App Names
    - Custom Battery
  4. Gitykins

    Gitykins Banned

    May 16, 2008
    Likes Received:
    AS long as you keep this how to make them in Photoshop, it won't be my thread all over again.

    And for Lock Screen Wallpapers, it is LockBackground.png in the Themes top folder:


    and you put the top bar (behind the time) as UILCDBackground.png in:


    You don't need to do the whole charade of finding the icon app folder. Icons just go in as the icon name on the SpringBoard in:


    Don't just say where to start putting things, that's my thread.
  5. Jesuspwnt

    Jesuspwnt New Member

    Mar 19, 2009
    Likes Received:
    I'm sure there can be more than 1 Tutorial Per Subject, plus, I didn't find your tutorial when starting out, so this covers all the basics. I'm not plagiarising your thread, so it's all good.
  6. MikeBoi

    MikeBoi New Member

    Dec 22, 2008
    Likes Received:
    2G iPod touch
    Very Nice.

    I tought my self. But this should help alot of people. And Im Gonna keep the link!
  7. Jesuspwnt

    Jesuspwnt New Member

    Mar 19, 2009
    Likes Received:
    Thanks Dude, Much Appreciated =D
  8. wolf4204

    wolf4204 New Member

    Mar 27, 2009
    Likes Received:
    just wondering what program you used to create the gradient
  9. katman000

    katman000 New Member

    Mar 22, 2009
    Likes Received:
    Please Help

    I cant make my safari app change! I did read the article. Nothing I have tried will work. Please PM me with an answer!

    Please Register or Log in to view images

  10. wolf4204

    wolf4204 New Member

    Mar 27, 2009
    Likes Received:
    and how do you make it show up on your ipod (sorry for the stupid questions, i just got my ipod today so im kind of new to the whole jailbreaking thing)

Share This Page