Step-by-step tutorial on creating custom BlackBerry device themes!
Source: Just Theme It!
Authors: Mark Sohm & Patrick Strack, Research In Motion
What is Theme Builder?
Theme Builder is the latest tool for BlackBerry® application development from Plazmic® ([ plazmic ]) and is bundled with the Plazmic Content Developers KitTM (CDK). The Plazmic CDK has been previously described in the BlackBerry Developer Journal by Peter Hantzakos. You can check out that article here.
What can you do with Theme Builder? Some of its main features allow you to:
The Basics - So what can I really do?
With all of this customization available, you're probably thinking that you need a degree in theme building to make your own theme, right? Wrong! Theme Builder provides a simple GUI interface that allows you to point and click your way through theme creation.
The left hand pane shows an image of the BlackBerry device that the theme is being created for, and its screen shows what the theme will look like for a BlackBerry device user. As soon as you change an item in your theme it is instantly updated on the BlackBerry device image. This makes coordinating the colors or tweaking your theme a snap.
The middle pane contains a series of five icons. From top to bottom they are:
The right-hand pane is where all the work is done. This is where you select all of the colors, fonts, images, etc. that make up your theme. A handy feature to note is the tool tips for the icons and images. If you hover your mouse cursor over an image, the resolution of the image will be shown. This is a great feature that allows you to create images that match the default image resolution, which allows your images to look clean and crisp. More on this later.
Theming the Home Screen Banner
The first area in Theme Builder allows for customizing the Banner shown on the top of the Home screen and in the Messages application. You can change the color of all text shown in the banner area. This includes the date, time, network status (ie: GSM, GPRS, EDGE, CMDA, EVDO, etc.) and the numeric counters for the number of new items (unread mail, calendar appointments, etc.). The colors of the battery meter, signal meter and some indicator icons (unread mail, calendar appointments, etc.) can also be changed here.
To change any of the colors, click on the appropriate color box to bring up the color picker. The color picker screen allows you to select a color based an a series of favorites (saved colors), using RGB values, HSB values, a color wheel, CMYK values or select from the set of web colors.
The following screenshot is a customized banner. As you can see, all colors have been changed and a new banner image has been used.
Theming the Icons and Background Image
After the banner, the most common area you will want to theme is the main home screen area and application icons. If you are creating an icon based theme, Theme Builder allows you to select your own icon for included BlackBerry applications. The focus image that appears on top of the highlighted icon can also be customized. When creating a list theme, Theme Builder allows you to select the regular font, highlighted font and a regular and highlighted image that that appears beside the text. You can also specify a background image for the home screen and change the color of the home screen font that displays the application name.
In an icon theme, a mask is used to prevent your background image from overwhelming the icons. For example, if you apply a background image that is highly saturated with color, you might want to apply a mask image that is a flat white with 10% opacity to tone down the colors and allow the icons to stand out. Or you can simply use a background image that is less vivid than your application icons, allowing them to easily stand out from the background image.
The following is a customized home screen shown that uses the custom banner from the previous section. Icon images have been customized along with the background, focus icon and home screen font.
Theming Dialog Screens and Buttons
You can customize the background, font and icons of Dialog screens. The type of font, its size, color and style can be changed. You can also specify a new set of icons to be used for the Question, Information, Hourglass and Exclamation indicators. The background used for Dialog screens can also be chosen. These changes will apply to both BlackBerry applications and third party applications.
The buttons used in applications or Dialog screens can also be themed. You can change the font used to display text in the button, its size, color and style. Two images can also be used to modify the appearance of the buttons. The Normal image is used for buttons that do not have focus and the Highlight image is used for the button that has focus.
Here is a screenshot that shows a customized Dialog screen as well as a pair of customized buttons. The Question icon has been replaced with a hockey helmet, the buttons have been replaced with highlighted and faded hockey nets and the background has been replaced with an ice texture with a blue and red border.
Theming Menus, Titlebars and Lists
The look of menus, titlebars and lists can also be themed. Once again you can customize the font, its size, color and style of the text shown in a menu. Two text options are available, one for the text highlighted by the cursor and another for the rest of the text in a menu. The cursor color can also be changed along with the menu background image. These changes will apply to both BlackBerry applications and third party applications.
A title bar is the top area of the screen that can show the title and any other information relevant to an application. In a custom BlackBerry application this would be the title area of the MainScreen class (set with the MainScreen.setTitle() method). The background texture and cursor color can also be changed.
Similar to the other elements in this section, lists allow the customization of font, size and style. The cursor's color, highlighted and non-highlighted text can also be customized.
The following is a screenshot that shows a custom menu, titlebar and list. You can see the background image has been changed for the titlebar and menu. The font colors used for the text, highlighted text and cursor have also been changed.
Theming the Message List
The BlackBerry Message application can also be themed. The list of messages will use the look and feel specified in the Lists area of your custom theme. The Message List section of Theme Builder allows you to customize the font, color and style of the font used to display the date. You can also change the background image that is shown behind the date.
Here you can see a themed Message application. The themed items from the Banner and List are used along with a custom background image, font and font color for the date row.
Theming the Phone Application
The Phone application is the final area that can be themed. The font color of the number you enter when making a call can be changed along with the font color used for the phone number that is displayed when receive a call and make a call. The background image of the incoming call screen can also be customized.
How to make your theme look great
So far we've gone over everything you can customize in your theme when using Theme Builder. However, simply changing the colors around and inserting some new images may not create a theme that is as visually stunning. Read on for some tips on how to create better-looking themes.
Save Images in PNG Format
The images used in themes are all converted to PNG format by Theme Builder. In most cases there will not be any visual change to a converted image, but to ensure that the image the user sees matches your original as closely as possible it is recommended that you save your images in PNG format. This will also allow you to optimize your image and create as small a file as possible prior to using it in Theme Builder.
Another benefit of using PNG images is their support of transparent regions. As will be discussed later in this article, making use of transparency can allow you to add some real flare to your theme.
Match the Original Resolution for Crisp Images
If you are creating an icon theme then this is probably the single most important step you can take to help your theme look great. When you hover your mouse cursor over a themeable image in theme builder, a tool tip will pop up with the resolution of the current image. Make a note of the resolutions of the default images and ensure that your replacement images match. You can use images of a different resolution and allow theme builder to scale them for you, but this can lead to distorted or pixelated images. Let's use this BlackBerry logo image as an example.
Pixelated BlackBerry Icon
Crisp, Clear BlackBerry Icon
But even if Theme Builder resized my image, it could look okay if it had the proper scale. The icon image resolution is 64 by 48 pixels. This means that the height is ¾ (0.75) of the width of the image. The height to width of the original image works out to about 43/50 (0.86). So not only is our image being resized, but the scale of the image is being changed; meaning the width is being reduced by a higher percentage then the height, which is further distorting the image.
Now this doesn't mean you can only use images that match this 1 x 0.75 scale, which would restrict the content you can use. There are a few easy steps you can follow to optimize your images for this scale. Let's use the BlackBerry logo 196 x 169 pixel image used in the screen shots above as an example.
The first thing we need to do is resize the image so that its height is under 64 pixels and its width is under 48 pixels, and do so without changing the scale of the image. So if you open up the BlackBerry logo in your favourite image editing program and change the height to 64 pixels it should auto resize the width to 55 pixels (assuming the scale of the width and height is locked). This is still going to be too wide for our icon. Instead if we change the width to 48, the height changes to 56. This still isn't suitable because in this case Theme Builder is going to expand the height to 64 pixels. So what now?
Now we create a new image that is exactly 64 x 48 pixels in size and has a transparent background. Then we go back to our resized logo (56 x 48 pixels) and copy and paste it into the new 64 x 48 image. Center the pasted contents and save it as a new image to be used in Theme Builder. Now we have a 64 x 48 image with the desired content that will look great as an icon in a BlackBerry 8700 Series icon theme!
The GIMP is an open source image editing tool that is available for Windows® Windows®, Linux® and MacOS® X. Here are some step by step instructions for image resizing using the GIMP (version 2.2.9).
Instructions for Image Resizing Using the GIMP
Transparency is your friend. Remember this when you are creating images for your theme. Repeat it, "transparency is my friend". Using transparency in your theme can allow you to make use of a number of cool effects. An obvious use is with application icons. Generally, images have some kind of background color, often white. If you leave the white or colored area around your images, they will show up as squares to the user. Instead, make the area transparent so that your theme's background image shows through. Compare the following two screenshots.
BlackBerry Icon with White Background
BlackBerry Icon with Transparent Background
Many themeable items, such as dialogs, buttons and menus are not a fixed size. This makes it impossible to create a image with a fixed size that will look good in all situations. Here is where the ability to tile an image comes into play. For these items, Theme Builder allows you to select an area of the image that will be used as the border around the image, and an area that will be tiled (or filled) in the variable sized area in the middle of the image. Using tiled images also allows a smaller sized image to be used, reducing the size of the image and size of your theme. So how does this work? Let's start with an image I created to be used as a button.
If you are using an uneven edge on an image and are going to have it tile, use the preview area to find sections at the top and bottom that are even with each other so that the tiling does not seem apparent to the user.
If you have transparent sections in your image and are using multiple layers with Photoshop, when you want to make it a single layer, use the "Merge Visible" option under the Layer menu to preserve the transparency.
It's a good idea to flatten an image into a single layer before saving it in PNG format since PNGs do not support layers. This ensures that what you are seeing in your graphics program is how the image will be saved in PNG format.
When creating custom backgrounds and banners, use a screen shot from the simulator as a guide to where things will appear. Set this screen shot as the top most layer, then use the Lasso tool to roughly select sections that you want to keep. Once you have everything outlined, select the inverse then clear out all the unwanted sections.
An easy way to make your theme stand out is to add some special effects to any text used in your theme.
Instructions for adding effects to text using Photoshop (emboss, glow, drop shadow, etc)
After reading this article you should have a good base to move ahead and create some custom themes of your own. If you still need some inspiration, you can have a look at some of the themes available for download from Research In Motion Limited® (RIM®). Just point your BlackBerry BrowserTM to BlackBerry HELP!. Please note that your BlackBerry device will require BlackBerry Device Software v4.1 or higher to use these custom themes or any theme created in Theme Builder.
|All times are GMT -5. The time now is 12:36 AM.|
Powered by vBulletin® Version 3.6.12
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.