So You Wanna Make A Theme?
Written by TJ of Ninja Themes

——————————————————————————————————————————–

INTRO

So, you’ve seen all the awesome theme designs out there and you’re thinking, “Why can’t I do that?” Well, there’s no reason why you can’t. All it takes is some creativity and a little basic knowledge of graphics editing, and you’re good to go.

If you want to make a theme, but aren’t good at following any written/visual instructions (like myself), the best thing to do is just immerse yourself in the program and learn by trial and error.

For the rest of you, enjoy!

DISCLAIMER: Ninja Themes is not responsible for the loss of your mind, patience or creativity, as well as headaches, general nausea and discomfort, irritable bowels and ripping out your hair. You have been warned.

——————————————————————————————————————————–

REQUIREMENTS

Blackberry Theme Studio (older versions are called Plazmic but it’s outdated) – REQUIRED, unless you’re a mime
Download BB Theme Studio HERE

Photoshop CS2-CS4 (Highly Recommended, however earlier versions work fine. Basically any image editing software will work, but this tutorial is based on Photoshop)

Device Simulators (not required, but some people like to test themes with simulators)

Once you’ve downloaded and installed the correct software, it’s time to start making some themes! But wait, you ask, WHERE DO I START?!

And that’s where it begins.

——————————————————————————————————————————–

PART I. – Basic Run-Down of Plazmic Themebuilder

I’ll admit, Plazmic Themebuilder can be quite intimidating when you first open it. So many options, it’s hard to choose where to start. I’ll start with a run-down of the things you will see upon your first opening of themebuilder, and also highlight some of the more important aspects of the program that you will want to focus on in your theme building.

When you first open themebuilder and choose your device (in this example a Bold 9000), it will look something like this…

click for larger image

1) Device Preview window – This is where you’ll be previewing all of the changes you make. You will start off with a “default” theme. You can click through the Device’s Screens (shown on #2 in the picture)     and see the different screens you can theme.

2) Inspector- This is where you’ll be doing your themeing, changing icons/colours/everything else.

3) Edit Device’s Screens- These are the tabs you can click on that brings up the interface for each screen you can theme. I will go into detail about each of these screens a little later. The tabs are in this     order, from top to bottom:

Theme the Banner (Homescreen/Appscreen: banner graphic, sizing, font type/size/colour, message indicators, Battery/WiFi/Signal meters, Alarm icon, Unread Messages icons)
Theme the Home Screen (as in arranging the icons ala Zen, Bottom Dock, Today, etc. The possibilities are endless! Also, SVG files can be put in here. We won’t focus on that, as that is         a more advanced feature of themebuilder/composer)
Theme the Application Icons Screen (the screen that comes up when you press the Apps button on your BB – and also where you’ll change the icons of the theme)
Theme the Controls (Menus, dialog boxes, buttons, list fonts/size/colours)
Theme the Message List (basically what you see when you open Messages, you can theme indicators/banner/font/size/colour)
Theme the Phone Screens (this includes Incoming/Active call screens, as well as the Phone Hotlist)
Theme the Lockscreen (Background, lock icon, SVG files can be used here as well)
Theme Global Items (Tx/Rx icons [those arrows you see @ the top right on themes that indicate incoming/outgoing data transmission], Hourglass icon, Navigation arrows, Progress         bar, Application background/text colours)

4) Alignment Settings- I usually don’t mess with these, unless I need a quick icon alignment, as they can throw the icons out of whack. It’s not needed with basic theme building.

5) Catalog- I don’t use this feature either as it is unnecessary, but it contains a catalog of sample images.

There are also sample files (Icons, banners, meters, everything you will see in the default themes) that you can find if you browse through Plazmic’s “Sample” folder. This folder is located (by default) here:

C:\Program Files\Plazmic CDK x.x\samples

Many, many helpful sample graphics here that beginners can edit in Photoshop. Just make sure you save your edited graphic in a different folder! I know this by experience

——————————————————————————————————————————–

PART II. – Default sizes of Theme attributes

So you have an awesome background, a colour idea, maybe a cool banner you saw, or a set of icons you want to put onto a theme? Well good for you! In any case, let’s see what we can come up with.

For starters, it is an EXCELLENT idea to become familiar with the standard sizing of your Icons, Banners, Backgrounds and Buttons. It is not readily obvious as to what the sizing should be, but I’ll make it clear. Below is a description of each device and their respective default screen (background) sizes, and also icon/banner/button sizes (in pixels). Also, New Message indicators have their own sizing. Battery/signal/wifi meters do as well, but I will go into that further later.

NOTES:
On Icon sizes, the Underlay/Move Icon/Focus icons also need to be the same size (with the exception of Storm devices).

On Banner sizes, it’s a general rule of thumb to make the width the same size as your screen. On newer devices (4.6+) there is a fullscreen banner option (ex.- if you would like to put a dock image on the homescreen as well, fullscreen banner would be the obvious choice). The “stock” banner’s sizes are shown below. It is recommended that any banner you use should at least have the same width as the screen.

Button sizes may vary, depending on what graphic you use for the buttons. I will list standard sizes below.

Menus: You will need to experiment if you want to use other graphics for the menus/dialog boxes. With a little trial and error, you can resize your graphic properly and have a sweet menu.

Onto the sizes.

——————–

Storm 95xx

Background size: 360×480
Banner size: 360×96 (Homescreen); 360×48 (Appscreen)
Profiles Icon Focus: 48×48
Icon size: 73×73
Underlay/Move/Focus Icons: 90×96
Button size: 60×33
New Items Overlay (Banner): 21×21
New Items Overlay (App Icons Screen): 73×73
Dialog Box Icons: 60×60

——————–

BOLD 9000

Background size: 480×320
Banner size: 480×85 (Homescreen); 480×48 (Appscreen)
Profiles Icon Focus: 60×60
Icon size: 80×80
Button size: 60×33
New Items Overlay (Banner): 21×21
New Items Overlay (App Icons Screen): 80×80
Dialog Box Icons: 60×60

——————–

Javelin 8900/Tour 9630

Background size: 480×360
Banner size: 480×85 (Homescreen); 480×48 (Appscreen)
Profiles Icon Focus: 60×60
Icon size: 80×80
Button size: 60×33
New Items Overlay (Banner): 21×21
New Items Overlay (App Icons Screen): 80×80
Dialog Box Icons: 60×60

——————–

8350i/8520

Background size: 320×240
Banner size: 320×51 (Homescreen); 320×36 (Appscreen)
Profiles Icon Focus: 36×36
Icon size: 52×52
Button size: 60×33
New Items Overlay (Banner): 14×14
New Items Overlay (App Icons Screen): 52×52
Dialog Box Icons: 40×40

——————–

Curve 83xx (also 88xx/87xx devices)

Background size: 320×240
Banner size: 320×50
Profiles Icon Focus: 48×36
Icon size: 48×36
Button size: 19×35 (the standard 60×33 buttons work well, this is just the default size for the Dimension themes)
New Items Overlay (Banner): 14×14
New Items Overlay (App Icons Screen): 48×36
Dialog Box Icons: 39×41

——————–

Pearl Flip 82xx

Background size: 240×320
Banner size: 240×73 (Homescreen); 240×55 (Appscreen)
Profiles Icon Focus: 40×40
Icon size: 46×46
Button size: 60×33
New Items Overlay (Banner): 16×16
New Items Overlay (App Icons Screen): 46×46
Dialog Box Icons: 40×40
Lockscreen Icon: 47×46
EXTERNAL
New Items: 14×14
Unread: 15×15
Lock: 15×15

——————–

Pearl 81xx

Background size: 240×260
Banner size: 240×65
Profiles Icon Focus: 48×36
Icon size: 48×36
Button size: 19×35 (the standard 60×33 buttons work well, this is just the default size for the Dimension themes)
New Items Overlay (Banner): 14×14
New Items Overlay (App Icons Screen): 48×36
Dialog Box Icons: 39×41

71xx devices: everything is the same as the Pearl 81xx, with the exception of Icon Focuses and Underlay, which are 60×55.

——————————————————————————————————————————–

PART III. THEME ATTRIBUTES EXPLAINED – EDITING AND RESIZING

IIIa) Meters

If you’re new to theme building, it’s best to stick with the default Signal meter. However I will guide you through some useful information should you choose to make your own. Read on!

Meters can be a tricky, tricky thing. Take for example the Signal meter. If you look in Plazmic, you’ll notice that the signal meter is one graphic, with different “states” of the meter on it (states are the different graphics depicting instances of the icon, for example 1 bar full, 2 bars full, etc., that form one long graphic). The Signal meter has 9 separate states. Every type of meter in plazmic, regardless of the device, will have the same number of states. Default meter sizes are all basically the same, however if you choose make your own, you can get creative and make them whatever size you want – BUT! Yes there’s a but!

All meters follow this rule: The width of the total graphic has to be divisible by the number of states the graphic contains.

I know, math sucks, but this is not that bad. Going by the standard Signal meter, which has 9 states:

Off | No signal | 0 bars | 1 bar | 2 bars | 3 bars | 4 bars | 5 bars (full) | SOS

Each of these separate states are similar, as you can tell. Now, say we made our very own Signal meter image, with the 9 states we need, all lined up in a row and the width of the entire graphic is 349 pixels and, say, 12 pixels in height. Forget the height for a second.

Now you need to ask yourself – can the width (349 pixels) be successfully divided by the number of states (9 states)? Do the math: 349/9 = ~38.7

But that won’t do. So think about it: what number can you use that’s as close as 349 as possible, that would be divisible by 9?  AHA! 351/9 = 39. So there, you have the correct sizing.

You might need to space the icons a bit, add/subtract a few pixels from the edges or just resize the image (This is where Photoshop or other graphics editing software comes in handy, but if you’ve made your own graphic then you know this already!).

Here are the different meters and how many states they have.

Battery: 12 on top/ 12 on bottom (charging states)
Signal: 9
WiFi: 5

If you make your own, you will need to line each respective graphic next to each other (and for the Battery Meter, you will need to make a row of battery states and below those, you will need to make another row of the same battery states with some kind of “charging” indicator).

Has your head exploded? No? Good. So, that’s meters explained, in a nutshell.

——————————————————————————————————————————–

IIIb) Message Indicators

There are several sets of message indicators on a theme:

Unread (Banner tab)- These show up on the banners

Messages (Message List tab)- These are the icons that will show up on the Message list, as well as BBM

Web (Browser) Icons (Message List tab)- These also show up on the Message list

These message indicators are in a row just like the Meters, however you will notice there are a few rows of them. It is generally not wise to mess with these if you are a beginner, unless you want a serious headache. Changing the colour of them, however, won’t mess them up. Better to just leave these alone.

——————————————————————————————————————————–

IIIc) ICONS

Most beginners will want to use the “standard” icons that come with the stock theme. This is fine, but if you’d like to use your own, keep reading.

This is the part that gave me the biggest headache at first. However, with my crafty, handy guide to icon sizes up there ^ you’ll be able to get it right the first time… I hope. This is where Photoshop is superior

Say you’re tired of the stock icons and you want something better. So you go looking for icons. And you find the awesomest, most perfect, complete set of icons. You put them on the theme, and wait, what’s that? They’re distorted? That’s because they need to be resized (typically the canvas area only)

Duh, you resize them of course. Are you sure you can read?

1) BATCH EDITING IN PHOTOSHOP

And this is why I got a headache, because I had no idea about batch editing. Until about 10 themes later. Say these wonderful icons you found are 128×128 instead of (for example we’ll say we’re making a 83xx theme) 48×36. Those are some big-ass icons for such a small screen. Resizing each and every icon is a horror within itself, and takes ages. Lucky for you, beginner, I’ll save you from the headache and the trouble of resizing each icon individually, like my dumb ass did for several months.

If you don’t have Photoshop, you might be a little screwed, unless those other programs have some kind of batch editing option (sucks for you, *cough*torrent*cough*)

It’s a good idea to copy the folder where you have your icons. That way if you mess up with the editing, or want to make other sizes, you can have the original ones to work with.

1) First, take some icon or graphic you won’t ever need and open it up in Photoshop.
2.) On the Toolbar, you should see a tab called “Actions”. This is where you’ll need to click.

This dialog box will come up. Name it whatever you like, so you will remember this action in the future when resizing.

3) Hit record. Now, whatever actions you perform on the icon you have open will be recorded.

Here are the steps I use when making the Batch Edit action example. For devices that use the 4.5 os or older, the icons are not equally sized in width/height and will need to be resized once with Image Size and then again with Canvas Size (canvas size for width only).

***MAKE SURE YOUR ICONS ARE IN .PNG FORMAT with transparent backgrounds! Most icons will be, but make sure.***

1. Resize the Image (Image > Image Size > size the icon to the specifications of the device – 80×80 for 9000/8900, 73×73 for the Storm, etc. – see above for the specs

FOR OLDER DEVICES RUNNING OS 4.2-4.5 : For example, we will use the 83xx icon size, which is 48×36. If our starting icon is 128×128, you will need to resize the icon to 36×36.
Resize the Image (Image > Image Size > size the icon to 36×36 or whatever the finished HEIGHT of the icon will be). MAKE SURE “Constrain Proportions” IS CHECKED. It will save lots of trouble.

Once the 83xx icon is resized, you will need to resize the Canvas (99% of the time the icons you will find have transparent backgrounds, this is a must for a clean looking theme).
Resize the Canvas (Image > Canvas size > size the WIDTH to 48 (leave the height alone).

2. Save the icon (File > Save)

3. Close the icon (File > Close)

now, once we have resized our example icon, go to the Actions Toolbox again and hit the STOP button, to stop recording the Action.
(PS stop Action pic)

You’ll want to do the same thing with all the icons in the folder you copied.

*To resize all of the icons at once, go to File > Automate > Batch…
*Once the window comes up, choose the Action you made previously under Play – Action (Don’t worry about the Set).
*Choose the folder that contains the icons you want to resize.

Once they’re done, you’ll have your icons ready!

2) PLACING THE ICONS INTO THE THEMEBUILDER

Navigate to the “Theme The Icons” tab in Plazmic and you will see a long list of icons. There are two sets of icons, in case you want to get fancy. The left icon is the basic icon, and the right copy is what the icon will look like when you point to it on your BB. Generally, if you use your own icons and don’t want to bother with the 2nd one, you can just click and drag the left icon over into the right icon box.

For the Dialog Box icons, navigate to “Theme the Controls” and there will be a list of icons. They are smaller than the standard icons and will need to be sized properly. See the part above on the standard image sizes.

——————————————————————————————————————————–

IIId) BANNERS

Banners are the easiest part. I think after all that other stuff you’ve read up there, you’ll be happy to know this. You can get really creative with the banners on 4.6+ devices, as there are two separate banners you can customize, and the homescreen banner can go fullscreen. For older devices, there is only one banner and it cannot go fullscreen. As I said before, all banners are generally the width of the screen, but the height is completely up to you. Some people prefer the standard height, others like to put a dock at the bottom or some other fancy stuff, some like their banners really thin so the theme can show off wallpapers better.

When you theme the Banner area, you will need to make sure the banner height (you will see it on the Theme The Banner tab) is set to the right size, unless you set it to fullscreen. If you don’t and the banner icons/text drops below the banner line, the theme will not export. Make sure you can fit all the info in the banner within the height line.

For banners that are shorter than the default banner, or for banners that you want to make fullscreen, you can do a Canvas Size in Photoshop and make the bottom area transparent. This will help a lot with distortion or other issues that may arise.

——————————————————————————————————————————–

IIIe) WALLPAPERS

There are several screens where you can change the wallpaper: Homescreen, Appscreen, Lockscreen, Active/Incoming call screens. However on older devices running os 4.2-4.5, you can’t change the Active call screen wallpaper. Once you’ve found the wallpapers you want to use, make sure they are sized to properly fit the screen.

Active call screen wallpaper
I’m not sure how other themers do this, or if it’s the “proper” way, but this is how I theme the Active call screen so that the background shows properly and doesn’t distort.
You’ll find that if you use anything other than the stock background or a blank one, it tends to be distorted. This is easily fixable. Remember that banner graphic you made for the Appscreen? Note the Height of the banner. Say for example your banner is 480×48, and your screen size is 480×360. In order to make the Active call screen the right size, you’ll need to subtract the height of the banner from the height of the screen. In this case, you would subtract 48 from 360, which would end up being 312. So you would need to resize that particular wallpaper 480×312. Once you’ve done that, the wallpaper should be the right size and proportions.

——————————————————————————————————————————–

IIIf) FONTS

Ahh yes… fonts. Fonts can be tricky, in particular when you theme the Menu/Dialog windows. Changing the fonts on the Banner/Today/List etc… not so tough. But they tend to distort all funky sometimes on the Menu and Dialog boxes. It’s good to experiment with fonts, so go crazy. But if you are unsure, best to use one of the “standard” Blackberry fonts (that come preinstalled with Plazmic). Fonts can play a pretty big part in the overall feel of the theme. They can help make a theme flow.