Results 1 to 7 of 7

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: [Tutorial] How to make a theme

  1. #1
    What's Jailbreak?
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 3 Times in 1 Post
    Default [Tutorial] How to make a theme
    This thread will teach you the basics of making a WinterBoard theme. Also included is how to make an icon. This will not make you a great artist, or the next great designer, but simply allow you to put your artistic skills toward creating a theme for your iPhone or iPod Touch.

    How to make an Theme

    The first thing I will say, is that using Ubuntu (or a similar, user friendly Linux distro) can speed up the process, mainly just in the incorporation of SSH into the file explorer, allowing drop-and-drag between the device and your computer. This guide is done in Ubuntu 9.04 with nothing but:

    • The GIMP
    • A Text Editor (any)


    For Windows you will need:
    • WinSCP
    • The GIMP
    • Notepad


    Ok, first lets just create the basic folders needed for a theme, here is the directory tree (all are folders, even though some may seem to be files):

    Code:
    |-myTheme.theme
    | -Bundles
    | -Icons
    | -UIImages
    That is a very basic theme, now lets add some files.

    The first file you will want is your Info.plist file in your root directory of your theme. Just create it using a text editor. (IMPORTANT: It must be Info.plist, not Info.plist.txt!). All you really need in it is:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0"><dict>
    </dict></plist>
    Now, that will not do anything, as all it will do is define that it is a UTF-8 text document that is XML code and uses the PLIST 1.0 DTD. If you want some cool effects, like changing the color of your icon label text, try this:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0"><dict>
    
    <key>DockedIconLabelStyle</key>
    <string>color: red</string>
    
    <key>UndockedIconLabelStyle</key>
    <string>color: green</string>
    
    </dict></plist>
    There are many things you with the labels, such as font, color and many other things. If you want more details, just ask or google it.

    Now you have your basic theme. Now for some customising, how about Icons?

    How to make an Icon
    This is done in GIMP, but it should be relatively easy to do the same thing in photoshop.

    First, create a 60x60 image, with a transparent background.



    Then, zoom in to 400-800%, it helps alot.

    Then select the rectangle select tool and, in the settings, make it have rounded corners (5-10px) and then select all of the image, what will result is a selected area that is beginning to look like an iPhone icon.



    After you have that, select the bucket tool (without deselecting the area) and fill it with whatever color you want the background to be.




    Next, select the oval select tool, and select something like this:



    Now create a new layer, and on that new layer, fill that area selected by the oval with white. Next, change the transparency of the new layer to about 30%.

    We are almost done creating the basic icon. Now for applying the top and bottom "glow". Create a new layer and just select the gradient tool and create gradients at the top and bottom. Again, change the transparency of this layer to about 30%.



    Now all thats left is to get rid of the glow around the corners. To do that just reselect the entire thing with the rectangle tool with rounded corners enabled (like you did to create the background) and press ctrl-I (invert selection) and then delete. Repeat for each layer.

    Now you have a basic icon. Just add an image and put it below the glow and glare layers and you have a (possibly) good looking icon.

    How to create a wallpaper

    Please download this file, as it is the template for the wallpaper. GIMP XCF. Photoshop PSD. PNG (No layers).

    That should give you a basic idea, just mod the background, top bar and dot-bar to whatever you want and add it to your theme. Do not worry about legal issues, don't even give me credit. I release the images into public domain. Just put a png version in the root directory (named "Wallpaper.png") and a png version in "myTheme.theme/UIImages/" named "DefaultWallpaper-iPhone.png". (replace "iPhone" with "iPod", if you have an iPod)

    How to change strings

    This section will tell you how to change some simple things, like your "slide to unlock" text, your "enter passcode" text, your "slide to shutdown" text and your "slide to cancel" text.

    First create a folder called "com.apple.springboard" in your bundles folder. Then create another folder called "en.lproj" (replace en with your iso language code) within that folder. Then create a file called "SpringBoard.strings" (text file where .strings is the extension). In that you can add many things, to get a full list, I recommend googling it. Here is a sample.
    Code:
    "AWAY_LOCK_LABEL" = "Unlock my iFone";
    "SYNC_IN_PROGRESS" = "Syncin' yo junk";
    "ENTER_PASSCODE" = "ENTER PASSWORD";
    "POWER_DOWN_LOCK_LABEL" = "killall *";
    "SLIDE_TO_CANCEL" = "Slide me to cancel";
    Coming Soon: How to mod the UI of individual apps, how to create a lockscreen background and how to change the dock.
    Attached Thumbnails Attached Thumbnails -screenshot.png   -screenshot-1.png   -screenshot-3.png   -screenshot-4.png   -screenshot-2.png   -wallpaper.png  
    Attached Images Attached Images
    Attached Files Attached Files
    Last edited by Mentalikryst; 2009-06-01 at 04:00 AM. Reason: Minor edit

  2. The Following 3 Users Say Thank You to Mentalikryst For This Useful Post:

    soto806 (2009-06-01), soulthoughts (2009-06-02), uvbisani (2009-06-19)

  3. #2
    Thanks for the info, appreciate it

  4. #3
    What's Jailbreak?
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 3 Times in 1 Post
    Quote Originally Posted by Broomhead View Post
    Thanks for the info, appreciate it
    Wait until its done, you only read the first part.

  5. #4
    Community Manager Bo Troxell's Avatar
    Join Date
    Aug 2008
    Location
     Valley of the Sun, ARIZONA ♥♥♥
    Posts
    35,196
    Thanks
    5,590
    Thanked 12,540 Times in 7,596 Posts

    Nice job. certain this will help a bunch.

  6. #5
    Retired Moderator Zwayne's Avatar
    Join Date
    Nov 2007
    Location
    Independence, LA
    Posts
    5,633
    Thanks
    656
    Thanked 764 Times in 591 Posts

    Nicely done. Thanks for the guide.

  7. #6
    iPhoneaholic soto806's Avatar
    Join Date
    Feb 2009
    Location
    Amarillo, TX
    Posts
    466
    Thanks
    109
    Thanked 78 Times in 61 Posts

    I Will definitely be using this.
    Thanks!
    Currently addicted to Modern Warfare 2! add me on PSN: A_Mexican_guy

  8. #7
    How do u make the rectangle rounded?
    I'm running gimp on a mac if that helps. I would think it was the same anyway

    Oh. And then how do u add the icons to the coding??
    Last edited by wakara1n; 2009-11-15 at 08:07 AM. Reason: Automerged Doublepost

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •