BlackBerry Forums Support Community

BlackBerry Forums Support Community (http://www.blackberryforums.com/)
-   BlackBerry Themes (http://www.blackberryforums.com/blackberry-themes/)
-   -   Step-by-step tutorial on creating custom BlackBerry device themes! (http://www.blackberryforums.com/blackberry-themes/51015-step-step-tutorial-creating-custom-blackberry-device-themes.html)

d_fisher 10-17-2006 07:30 AM

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:
  • Customize the BlackBerry application icons
  • Change the Home screen banner image and icon/indicator colors
  • Create your own buttons
  • Customize the look of dialog and pop up screens
  • Customize an idle screen
  • Customize the look of menus and lists
  • Customize the phone application screens
  • Customize fonts used on the BlackBerry device
With all of this you can make your BlackBerry device look like just about anything you want! You could create a theme based on your favorite movie, TV show or sports team. Or for corporate-minded audiences, you could brand all BlackBerry devices in an organization with your organization's colors and logos to create a unique look and feel.

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:
  • Theme the Banner
  • Theme the Home Screen
  • Theme the Controls
  • Theme the Message List
  • Theme the Phone Screen
They allow you to toggle the right-hand pane to display the controls for each of these items.

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.


The screen that is displayed while you are on a call can also be customized. The text color on this screen as well as the color of the volume dial can be themed. You can also customize the icons shown on this screen that indicate what type of call is under way.



Optimizing Your Theme
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.



Now compare the two screenshots below and make note of the BlackBerry icon in the top left location.


Pixelated BlackBerry Icon


Crisp, Clear BlackBerry Icon

The top screen shot shows the use of an unmodified image that is 196 by 169 pixels in size. The bottom screen shot shows the use of a modified image that is 64 by 48 pixels in size, which is the matching resolution of an icon image for a BlackBerry® 8700 Series icon theme. There are two main reasons why the second image looks better: size and scale. The second image Was created in my image editing tool to be the correct dimensions to begin with, and has therefore not been resized by Theme Builder.

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
  1. Open the original image in the GIMP.
  2. Click on the Image menu and select Scale Image...
  3. Ensure that the width/height ratio is locked (chain is linked).
  4. Change the width or height so that both match or are under the desired image size.
  5. Click the Scale button.
  6. Select all of the image (Ctrl + A or Select menu then All).
  7. Create a new image by clicking File > New.
  8. Set the image size to the desired resolution.
  9. Select Advanced Options and set Fill with to Transparency.
  10. Click OK.
  11. Paste the resized image contents into the newly created image.
  12. Save the new image as a PNG file.
Instructions for Image Resizing Using Adobe® Photoshop®
  1. Open the image in Photoshop.
  2. Select Image > Image Size.
  3. Ensure the width/height ratio is locked (chain is linked).
  4. Change the width or height so that both match or are under the desired image size.
  5. Click on the OK button.
  6. Select the entire image (Ctrl + A or Select menu All).
  7. Create a new image by clicking File, New.
  8. Set the image size to the desired resolution.
  9. In the Contents section, set it to Transparent (this will set the background to transparent)
  10. Click OK.
  11. Paste the resized image contents into the newly created image.
  12. Save the new image as a PNG file.
Make Use of Transparency

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

Transparency can also be used to add effects to menus, buttons and dialogs. By adding a transparent edge to your image you can add jagged, rounded, angled edges or provide a 3D effect. The following screen shots show an example of the use of transparent edges in dialog, menu and button backgrounds. The first screenshot shows a Dialog box with angled corners, the second a menu with a 3D look.





Instructions for replacing a color with a transparency using the GIMP
  1. Open image in the GIMP.
  2. Click the Layer menu, select Transparency, Add Alpha Channel
  3. Click the Select menu, choose By Color
    (or press Ctrl + O)
  4. Click on the color you wish to replace.
  5. Click the Edit menu and select Clear
    (or press Ctrl + K).
Instructions for replacing a color with a transparency using Adobe Photoshop
  1. Open the image in Photoshop.
  2. Click Layer > New > Layer from Background.
  3. Click Select > Color Range.
  4. Click on the color (in your image) that you wish to replace.
  5. Click Edit > Clear.
Use tiled images

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.



In case you're not sure, that is supposed to look like a hockey net. When I set that image to be used as a button without setting any tiling, the image is tiled (repeated) until it fills up the required space. It doesn’t look very pretty.



Instead, what we want to do is to select the areas we want to use as borders and the area we want to be tiled. To do so we need to click on the Tile Image icon:



... and bring up the Tile Image screen. On this screen we can set the number of pixels to be used for the top, bottom, left and right borders.
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.



After adjusting the border coordinates for the buttons they now look much more like hockey nets... well, at least a little bit.



Tips & Tricks for Creating Great Looking Images

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)
  1. Click the Text tool then on the area of the image you wish to have the text.
  2. Type your text and click the check mark to accept it.
  3. This creates a new Text layer in your image.
  4. Right click the layer in Layers window and select Blending Options ...
  5. Click the effect name you wish to use, and set the options.
  6. When you are happy with the preview of the text effects, click OK
  7. Since the Text is a separate layer, you can still move the text around to position it how where you want it without affecting your image.
Now Start Theming!

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.