Hack Forums
[TuT] How to make a complete theme! [TuT] - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Computing (https://hackforums.net/forumdisplay.php?fid=88)
+---- Forum: Mobile Smartphones (https://hackforums.net/forumdisplay.php?fid=79)
+----- Forum: Apple iOS (https://hackforums.net/forumdisplay.php?fid=137)
+----- Thread: [TuT] How to make a complete theme! [TuT] (/showthread.php?tid=1057226)

[TuT] How to make a complete theme! [TuT] - lolzor60 - Feb 13, 2011

Introduction
Hello dear members of HackForums!
In this tutorial, I will show you how to make a theme for your iDevice.
This includes icons, wallpapers, musicplayers and cool stuff like that.
I hope you'll read all of this. I appreciate feedback on the tutorial etc.
So, lets get started!

Requirements
  • Jailbroken iDevice
  • You need to know how to SSH (SSH tutorial. Click here)
  • Photoediting software (Recommended)
  • Winterboard to choose your theme

What does this tutorial contains?
  2. The basics of themes.
  3. How to make Wallpapers, Lockbackgrounds etc.
  4. How to make icons
  5. How to make a customized musicplayer
  6. AutoMasking icons
  7. Outtro

The basics of themes
When you're doing themes, the thing you're doing, is basically to make a folder, and put some images in that folder.
Offcourse you need to make folders, inside the main folder.
When all your images are put into the folder, you SSH into your iDevice, and copy your folder your iDevice.

Wallpapers, LockBackgrounds etc.
First off, go ahead and create a folder on your desktop, or anywhere else.
Call it "Theme".

Now you want to get a wallpaper. (Wallpaper is the picture in the background when you're at your SpringBoard).
Find an image, and get it resized to 320 x 480 pixels. Make sure it's a png.
When you done that, rename it to "Wallpaper", and drag it into the folder you started off by creating.

Now you want a Lockbackground.
Do the exact same steps as before, but call it "LockBackground".

If you want a custom dock, do the same steps, but the size should be 320 x 91, and you should call it "Dock".

If you want a custom smsbackground, do the same steps.
Size should be 480 x 475, and the name should be "SMSBackground"

Rough said
  • Wallpaper 320x480
  • LockBackground 320 x 480
  • Dock 320 x 91
  • SMSBackground 480 x 475

Icons
A good theme, is a theme with great icons.

It's pretty simple to make icons.
First off, create a folder inside the folder you started off by creating.
Call the folder "Icons".

Now go ahead and find a picture you would like as an icon.

When you found your picture, we need to convert it to an icon.
Go here and convert it: http://www.quirco.com/iPhoneIcon/Default.aspx

Save the converted icon, and drag it into your folder called "Icons".

Now you wanna rename the icon, to the name of the app the icon should be used for.
Example, if it should be used for "Notes", call the icon "Notes".
If it should be used for "AppStore", call it "AppStore".

Rough said
  • Find a picture
  • Convert it to an icon
  • Drag and drop it.
  • Rename it.

Musicplayer, and such
In this part, I'll just show you what the different images are called, and what their size it.
The thing you're basically doing, is to resize and rename images, then drag them into the different folders.
So if you rename and resize a Mario picture to "nexttrack.png", the Mario picture will be the button for the next song, in the musicplayer.

First off, create a folder inside your main folder.
Call it "UIImages"

Second, create a folder inside your main folder called "Bundles".
Inside "Bundles", create a folder called "com.apple.MediaPlayer"

Now, lets cover the stuff inside these folders:

UIImages
UINavigationBarBlackOpaqueBackground.png - The top menu bar under where it tells the Music title and artist. (230x44)
UIScrubberBlueCap.png - The left "end" of the progress bar showing where the volume is(5x9)
UIScrubberBlueCapRight.png - The other end (5x9)
UIScrubberBlueFill.png - The middle of the bar, this is for the side of the bar on the left of the volume control knob. (1x9)
UIScrubberWhiteCap.png - The white is for the stuff on the Right side of the control knob (sizes for the White are same as the blue)
UIScrubberWhiteCapLeft.png
UIScrubberWhiteFill.png
UIScrubberKnob.png - The knob for controlling the music progress bar (25x24)


Bundles > .com.apple.MediaPlayer
MusicVolumeKnob.png - kinda self explanitory (25x24)
nexttrack.png - Next song button (34x35)
prevtrack.png - Previous song button (34x35)
pause.png - What is displayed for the Pause button (33x49)
play.png - What is displayed for the Play button (33x49)
VolumeBlueCap.png - Left side of the Volume slider in the media player (3x9)
VolumeBlueFill.png - Left of the volume knob fill color (1x9)
VolumeBlueTrack.png - The unfilled bar under the fill color (not 100% sure) (1x9)
VolumeWhiteMusicCap.png - Right hand side of the volume bar (3x9)
VolumeWhiteMusicFill.png - Same as above (1x9)
VolumeWhiteTrack.png - The bar graphic under the "filled" graphic (1x9) These should presumebaly be a little bigger, like 1x10 but kept mine the same size
NowPlayingBottomOverlay.png - The ugly bar around the stock play/pause buttons area, goes all the way across (most people leave this as an invisible graphic) - (320x96)
NowPlayingTopOverlay.png - Overlay for the middle part, where the album artwork is displayed. It's a pain to get the top and bottom overlays to line up just right.

AutoMasking icons
Offcourse you won't sit and do icons for all of the apps from the AppStore.
Luckily, there's a way to still make your theme nice, with lots of icons.

With AutoMasking icons, you can basically make all of the apps from the AppStore, have a nice icon, without doing anything to them.

You can choose the shape, effects and such, but offcourse not customize the icons fully.

I made three pictures, to show you the idea.
iOS 3.x.x, location = "UIImages".
iOS 4.x.x, location = "Bundles > com.apple.mobileicons.framework"

"AppIconMask.png" (60x60)[img]http://i698.photobucket.com/albums/vv347/adlyr/AppIconMask.png[/img]
This one controls the shape of your AutoMask icon.
If it's a black sqaure, the icons shape will be a simple square.
If it's an apple, as shown in the picture, the shape will be an apple.[/i]

"AppIconOverlay.png"[img]http://i698.photobucket.com/albums/vv347/adlyr/AppIconOverlay.png[/img]
This graphic is an optional image the devolper CAN use if they choose. Your overall look should not depend on this graphic at all. From what
I've seen 40% or less of the icons on my phone seem to use it. It is nice to use this to add a little variety to icons as a whole, to break up the monotony. It is displayed OVER the final version. (although i have ran into one situation where it appeared under, not sure why).

"AppIconShadow.png"[img]http://i698.photobucket.com/albums/vv347/adlyr/AppIconShadow.png[/img]
This is where you would put your "effects".
Example, I used this to add a little glow to the icon.
It worked pretty nice.

Rough said
  • Do three images
  • Rename and resize them if necessary
  • Drag and drop them into your "UIImages"

Conclusion
You've now learned to make a basic theme.
There might be some stuff which I've forgot. Please ask, if you'd like anything included in this tutorial.
I'll update it with suggestions.

Please ask me, if you need help with something.
I'll do my best to help you out.

lolzor60

* - FireMonkeyFun - Feb 13, 2011

Awesome job. This is a great tutorial. I've been looking for something like this for a while. Thank you

* - Clutch - Feb 13, 2011

Wow, that is a LOT of information. Thanks for the share! Could you do something about the red text, though?

Thanks,
iFireGate™
Question: I've been trying to get iLlumine from Hack B4 Bed working on 4.2.1 but it's not quite there yet. For some reason, a lot of my icons aren't "themed" or whatever you'd call it. It's got the autoskinning mask, but it doesn't seem to do the trick. Is there a way to manually skin the icons if I have the mask?



* - lolzor60 - Feb 13, 2011

(Feb 13, 2011 10:32 AM)iFireGate™ Wrote:  Wow, that is a LOT of information. Thanks for the share! Could you do something about the red text, though?

Thanks,
iFireGate™
Question: I've been trying to get iLlumine from Hack B4 Bed working on 4.2.1 but it's not quite there yet. For some reason, a lot of my icons aren't "themed" or whatever you'd call it. It's got the autoskinning mask, but it doesn't seem to do the trick. Is there a way to manually skin the icons if I have the mask?
I know the problem.
That theme was originally for the 3.xx firmware, and is placed in the folder "UIImages".
If you can, SSH into your device, go to "bundles", make a folder in there called "com.apple.mobileicons.framework", then move the three automask icons to that folder.

If you can't see the icons when done, download iWipeCache from Cydia, and do a wipe.

Thanks for your comments guys!

* - Shanghai - Feb 13, 2011

My background images can be different sizes right? I wanna do this with my iPad.

* - lolzor60 - Feb 13, 2011

I don't really know for iPad.
Try messing around with different sizes, and tell me what fits.

* - lolzor60 - Feb 14, 2011

Made a tutorial on how to SSH.
OP updated with the link :).

* - Fame - Feb 14, 2011

Good job. High quality!!

Love you.

* - lolzor60 - Feb 16, 2011

(Feb 14, 2011 03:41 PM)Fame Wrote:  Good job. High quality!!

Love you.
Thanks for the comment <3.

Too bad this isn't really usefull for that many members.
Spend quite alot of time on it :(.

* - Kick Ass - Feb 16, 2011

Nice tut.
Bookmarked to use it later.


* - BigBoy171819 - Feb 16, 2011

Nice, have not seen a new Tut, in awhile, thanks for the share.

* - lolzor60 - Feb 16, 2011

Thanks for the comments guys!
Very appreciated!

* - lolzor60 - Feb 17, 2011

Anyone else who enjoyed my TuT :3?

* - Walter - Feb 26, 2011

Such a good tut well done! thankyou

* - lolzor60 - Feb 26, 2011

(Feb 26, 2011 11:37 AM)Bradshly Wrote:  Such a good tut well done! thankyou
No problem man.
Glad you liked it!