Composer is yet another tool to use when designing themes for your Blackberry device. Composer is one of the two programs you get when you download the blackberry theme studio. When you add a button in composer is does not add a background to it like it does in Theme Builder so in this tutorial I will teach you how to do so.

Why do it?

The reason for this tutorial is to make sure you can see which icon you are hovered over. You may not want to put a background to your icons when you hover over them, but if you do, this is how.

Please Note

You have to download the Blackberry Theme Builder tools onto your computer.
This tutorial will be using Composer and Theme Builder.

Video

Video Re-Visited

The re-visited video explains how to properly add a background to the button when you do not focus in on it. As always, please leave comments below. Don’t forget you can join my BBM group to request tutorials.

Time and time again I am asked how to resize the icons that are displayed on the home screen on your Blackberry theme. So, in this video tutorial I will show you how to accomplish this two ways. One way is to make your 3rd party apps smaller and another way is to keep your OEM icons on the home screen and make them small. A theme that I created used the second style of resized icons.

Why do it?

Some devices only give you room for 6 icons. However, with this trick/tip you will be able to add as many as you want. However, if you add to many then they will become small and extremely unreadable. Take the time to watch this video to see how I turn 80×80 icons into 60×60. You can do this for any device but in this tutorial I am working with the Bold 9700, Tour, and Curve 8900.

Please Note

You have to download the Blackberry Theme Builder tools onto your computer.
This tutorial will be using Composer and Theme Builder.

Video

So you want to create your own Blackberry theme but you have no idea where to download the tools needed. Well in this short video tutorial I will tell you exactly where to get the tools you need to create yourself a theme. It’s easy, simple, and you will wish I had made this video sooner.

Themebuilder & Composer

When you download these tools you will have two new icons to look for.

These two icons will look like this: . The icon on the left is for to create your themes (theme builder) and the icon on the right is to add any extra features to your theme (composer). I used composer to create my hidden dock tutorial.

Video

So you downloaded Theme Builder Studio v5 and when you opened it you had no idea where to begin. Well in my first ever video tutorial I will show you how to design your very first droid like sliding dock which is featured on quite a bit of my themes. This is a long video so sit back and enjoy.

What is it?

You are probably wondering what a “droid like” dock is. If you have ever played around with the new Droid phone, these icons are hidden until you ‘flick’ your finger upward to make them show. All of the phones except for the Storm do not have a touchscreen. So in this tutorial, I will show you how to make your own droid like dock that will stay hidden on your blackberry until you scroll your trackball or track pad downward.

Download Files

I have enclosed a few downloads that you can use. The first two include every file I used to create the Droid like dock in my video. The last link is to download the CODE only.

Download ZIP
Download RAR
Download Code Only (.txt)

Please Note

You have to download the Blackberry Theme Builder tools onto your computer.
This tutorial will be using Composer and Theme Builder.

Video

Please leave comments below.

I do believe this will be my first post of the new year so before I go into what is changing, please allow me to wish you all a happy new year. To my readers in 2009, I thank you. To all of my upcoming 2010 readers, welcome! It is now to time let you know where I have been, what I have been up to, and where I decide to go.

At the end of 2009, I got a few jobs. One being from BluPoint USA. This company was named something else before I was asked to change their logo on all of their sites. Unfortunately, their in house graphic designer did their logo for them. They freelanced me to update their logo through out their website – which I did in under three hours (Did I tell you I work fast?). As I was talking to them, it came to my attention that they are looking to update their look on their current website. As of right now, there website could be seen at http://www.blupointusa.com – or look at the image below. Their new website needed to be something different. He wanted a new layout, with new navigation tabs, and a new flash. I am currently working on this project still but their new website layout could also be seen below or played around with here.

click to enlarge

Also at the end of 2009, the same owner from BluPoint USA asked me to do a total redesign of another company he owns which is called BLSTelecom.This website needs a lot of TLC as their current website is made with all images and not one ounce of CSS. Finding this website on google is impossible – unless you type in blstelecom. This new website will have a total redesign which will include some really cool flash and a lot of SEO!

The videographer I used for my wedding could use a blog makeover. Therese Farrow films is by far a great videographer, so if you are getting married and need a wonderful videographer check out her website. Her blog on the other hand needs help and since it was done in Wordpress (as you can tell from the theme), I figured I would shoot her an email and ask if she wants me to work on it.

On top of these websites that need to be completed, I will continue to work on my Blackberry Themes and tutorials to share with my readers.

Why do you love the holidays? Is it because you get to spend time with your family, eat like crazy, open gifts, buy gifts, or to create some awesome text using Photoshop? Well, for me, it is all of the above <grin>. I love the holiday season, it brings out the best is everyone. For this tutorial, I will show you how to create some really cool candy cane text using Adobe Photoshop. I currently use CS4, but you could get this done in CS2, or CS3. Enjoy!

Step One

Open up Photoshop and create a new document that is 10px wide, by 1 pixel high. Zoom all the way in, and make half of the document red (#ff0000), and the other half white (#ffffff).

This is my zoomed in document.

Step Two

Turn this document into a pattern. Go to edit > define pattern and create a name for it.

Step Three

Create a new document with your desired size. For this example, I used 500 width x 100 height.

Step Four

In your new document, go to edit > fill. In the drop down choose pattern and then choose the candy cane pattern.

You will have this:

Step Five

You want to extend the height of this and hit control-t and then extend the top and bottom like so:

To make life easy, hit alt and shift before you make the background bigger. This will make like easier.

Step Six

Now you want to create the angle on this, so while you are still in transform, click on the middle box on the top or bottom, hit control + alt + shift and drag the mouse to the left (or right).
(click image for full view)

Step Seven

Click on your Text Icon and create new text.

It is hard to tell, my text is in white, and it says Candy Cane Text. Make sure the text layer is on top of the red stripes.

Step Eight

On your text layer, go to layer > layer styles > blending options…
Use the following options on your text layer.

Blending Options: Custom

Drop Shadow

Inner Glow

Bevel and Emboss

Gradient Overlay

You will not have this:

Step Nine

Now you want to create the red stripes that are outside of the candy cane text. To do this, hold control and hit the text layer.

Then go to Select > Inverse or hit shift + control + I.

Select the layer with the red stripe and hit delete on your keyboard.

Step Ten

Create a new layer on the bottom and add your background color or image.

You are now finished.

I used this effect on my person logo.

In this tutorial I will teach you how to create a grass scene in Photoshop. You can use this tutorial to create pretty nice looking cartoon inspired images as well. It is very easy to do with just a few steps. Lets get started, shall we.

Step One

Create a new document in Photoshop. I went with 550px wide by 350px high.

Step Two

Create clouds using a white background and a baby blue color foreground (#2fdfff).

Filter > Render > Clouds

Step Three

Create a new layer and apply the cloud again this time making the new layer 70% opacity.

Step Four

Create another layer and make this layer have a Linear Burn with 59% opacity.

Step Five

Lets start to create the grass now. You need to reset your brushes if you do not append new brush sets in. To reset the brushes, click on the brush tool, , then click the drop down (red color) then the over arrow (yellow color) and choose Reset Brushes.

Once you reset them, or if you append your brushes, we are looking for this brush:

Step Six

We need to add some dynamics to this brush, so pull up your brushes set (f5 on PC). Use the following settings:

Color Dynamic is very important because when you pick your foreground and background colors, the color dynamics will use colors within that realm. Doing so will give the grass a seasonal look. You will not see the changes in the preview box, but once you start painting, they are there!

Your brush preview screen will now look like this:

Step Seven

We need to change the color of the foreground and background now. You want to use two shades of green, one darker than the other. For the foreground use a dark green (#136500) and for the background use a lighter green (#2cc729).

Also, change the size of the brush to 52px.

Step Eight

Create a new layer, and start painting! Start about midway to three quarters down your background, and start painting and move downward with your brush, never go up (I will show you soon why).

What happens if you make an error and you need to go back to the top to level out the grass? If you do, that is fine, do not worry about it, but your image will end up looking like this:

Notice how the left side looks all messy compared to the picture before this? Well, no worries, just repaint starting from the top, going down.

Here is my edited grass using the last picture:

Step Nine

It looks good, but lets add some more depth to it. So, after you are satisfied with your grass, drag it to copy the layer.

Change the new copied layer to Color Burn and the Opacity to 33%.

Step Ten

We look like we are done, but I think the clouds could use some more coloring. With your paint brush, set it to a circle, with a diameter of 30px and a hardness of 0%. Also, change the flow to 20%.

Create a new layer and with your foreground being white, paint some extra clouds. You can mess around with the dynamics to the brush if you want, I didn’t and this was my outcome.

Step Eleven

Do the same as step 10, this time instead of white, use a baby blue color (#4ee4ff).

There you have it. You have an awesome looking cartoon grass effort.

Along with Facebook, Twitter has grown into a huge social network for a lot of people. You can find your average joe, celebs, employers, friends, co workers, family members – the list goes on! When you sign up to Twitter, you get a pretty plain background with ways to update it with standardized one Twitter offers. However, what if you could create your own? I will show you show.

There are two ways to create a Twitter background, one being a tiled background, like my twitter page, another to have some information and a picture/company logo to the left of the tweets. Whatever you decide to do, you need to make sure you find out what resolution people are using these days. After a few hours on my website, user resolution logger gave me these statistics.

Create a tiled/seamless background

Step One

Find seamless backgrounds. The backgrounds I found came from http://www.filterforge.com/.

Step Two

Once you find your background, right click it and choose copy image. I used this:

The size of this background is 512px by 512px.
You can use as many as you want, but for this example, I used this.

Step Three

Since you copied the picture from their website, just go into Photoshop, File > New, and size of the document should already be 512 by 512. Click OK.

Now hit Control – V to paste your background.

Step Four

Turn it into a pattern. In Photoshop, go to Edit > Define Pattern. Type a name and click OK.

Step Five

Create a new document that is 512px wide by 1024px high. The reason for 1024px high is because you want to double the height of the image. Doing this will make sure the image is completely seamless. Also, < 1024px high is about what the average user has for their resolution on their computer.

Now, go to Edit > Fill and choose your pattern. Then navigatie to your pattern.

(click image for full view)

Step Six

Add effects to the background.

(click image for full view)

Once you are finished with your image, save it as a .jpg.

Step Seven

Import it into your Twitter account. Login to your twitter account and then go to Settings at the top. Click on design. Then click on change background picture. Click on choose file. Finally, select your image, click the tile background check mark, and hit save changes.

You are finished with the seamless background tutorial.
Here is what my Twitter page looks like (follow me).

Create an informational twitter background

Think of this as a line card you would use in emails at work. However, now you can use graphics and get it to be much more enjoyable for the viewers. We need to look at the statistics again so here they are:

By the looks of it, more people are running on a 1280 x 800 screen resolution. We should base our background around that. However, there are a few people who use larger resolutions (I use 1920 x 1200 – 24in HP screen[w2408]). Therefore, I created a document in Photoshop in the size of 1350 x 900.

If you are going to base the tweet section around this document, then you need to find the middle of this document.

Step One

Turn Rulers on and Snap on in the View drop down. The width of the tweet section is 763px wide. Also, the height is 65px high from the top of the page, to the top of the tweet section. You want to keep that in mind when designing your background. Draw the rulers in to outline the center of your image.

(click image for full view)

Step Two

Start designing!
I will just design a basic template here and I will also provide you with a downloadable .psd in zip format.
(click images to view full size)

Here is the idea of the template. You have your top (black), your left and right (dark gray) and your middle (light gray).

Here is my design without the tweet section. As you can see, the left and right sides bleed into the middle.

Here is what it will look like with the tween section in it. Keep in mind, this is a 1350 x 900 area. If people are viewing it smaller, your information may be cut off.

Step Three

After you finished with your design, save it as a .jpg and log into your twitter account. Go to Settings at the top, click on design. Now, click on change background picture. Choose your file and make sure that file background is unchecked. Click save settings.

Download PSD

If you would like other templates for different sizes, leave a comment.
If you want me to custom design a background for you, leave a comment!

Download the template to the informational twitter background:

In part one of this tutorial, I showed you how to create the navigation bar from Apple’s website in Photoshop. In this tutorial, I will show you how to code the navigation bar in CSS. It is really easy so sit back, read over this tutorial, then open up your editing tool and get started (I used dream weaver).

Step One

In part one you were left off by putting the hover part under the normal stage and saving it as one file. Here is the image for reference.

Click image to view full size. You may right click it and save it if you wish. If you followed the first tutorial, just open you image. You want to measure each link. Below is an image to clarify what I mean.

Once you write those numbers down, we can begin.

Step Two

The CSS


<style type="text/css">
* {
margin: 0px;
padding: 0px;
}

#applenav {
background: url(appnav.png);
height: 35px;
width: 978px;
margin: 0px auto;
position: relative;
top: 30px;
}

#applenav li {
list-style-type: none;
float: left;
}

#applenav a {
height: 35px;
display: block;
}

#one { width: 110px; }
#two { width: 110px; }
#three { width: 106px; }
#four { width: 134px; }
#five { width: 103px; }
#six { width: 127px; }
#seven { width: 110px; }

#one a:hover {
background: url(appnav.png) 0px -35px no-repeat;
}

#two a:hover {
background: url(appnav.png) -111px -35px no-repeat;
}

#three a:hover {
background: url(appnav.png) -220px -35px no-repeat;
}

#four a:hover {
background: url(appnav.png) -327px -35px no-repeat;
}
#five a:hover {
background: url(appnav.png) -460px -35px no-repeat;
}

#six a:hover {
background: url(appnav.png) -563px -35px no-repeat;
}

#seven a:hover {
background: url(appnav.png) -690px -35px no-repeat;
}

#search {
width:172px;
margin-left:5px;
}
</style>

Let’s explain the CSS as best we can.
We have a total of eight spaces, however, only 7 will be links and the last one will be the search field. Each state is the width of each link then we have the hover state which is taking the bottom of the image (-35px – rememebr, this image is 70px high in total) and creating the hover effect. The larger numbers in the hover effect,  are the numbers that start from the left hand side of our image and go outward. This will create the hover effect because it all lines up from the top to the bottom of our image.

Step Three

The HTML


<body>
<ul id="applenav" style=" vertical-align:top">
<li id="one"><a href="#"></a></li>
<li id="two"><a href="#"></a></li>
<li id="three"><a href="#"></a></li>
<li id="four"><a href="#"></a></li>
<li id="five"><a href="#"></a></li>
<li id="six"><a href="#"></a></li>
<li id="seven"><a href="#"></a></li>
<li id="search">search form here</li>
</ul>
</body>


Let’s explain the HTML as best we can.
The HTML consists of only the ul and li commands. Since this is pure CSS, all we need to do is create the simple commands to call the CSS to our image.

Test it out

There you have it. Feel free to leave a comment with any question’s or trouble’s you come across.

Anyone who has an iPod, iPhone, or any other Apple product more than likely has visited there website to get some sort of details on the product you will purchase. I do not have any of Apple’s products, but I do visit their website often because I love the look of it. So, in this tutorial, I will help you create the Apple’s navigation bar. In part one of two, I will design the actual navigation bar in Photoshop.

Step One

Open up Photoshop, create a new document and make it 1000 pixels wide by 47 pixel high.

Step Two

Click the Rounded Rectange Tool, , choose 4 for the radius, and make your shape. I used a red background to make it easier to see. I have this:
(Click image for full view)

Step Three

Add the following effects to the nav bar.

Gradient Overlay

Click image for full view.

Step Four

Add the Apple logo and the text. Use this for the apple logo. For the text, I used Veranda set at 11 pts and bold. Set it up to leave enough room at the right for the search field. The search field will be added in the part 2.
(Click image for full view)

Step Five

Add the following blending options to the text. This will be used for the ‘normal’ state.

Drop Shadow

Step Six

Make a new folder and put in the three layers you have right now. Name this folder normal.

Close the folder, drag to to the new layer icon, and name the new folder hover.

Step Seven (see edit’s at the bottom)

Open up the hover folder and make change to the blending options to the third layer (the nav bar).

Inner Shadow

Gradient Overlay

Now change the follow of the font to black. Change the drop shadow to white.
(click image for full view)

(This is wrong, please see updates at the bottom)

Step Eight

Add the lines that separate the links. Add a two new layers above the hover folder. The first layer will be a line from top to bottom in 6a6a6a. And two lines next to it (in the second layer) in white. Make the first layers opacity 42% and the second layer 9%.

Then make copies of them and move them over so they are between the rest of the links.

Click images to view larger.

Step Eight

Save the normal state and the hover state as png’s. Once you do that, you want to turn them into one image. Make the hover effect under the normal state. You new image will look like this (its ONE image):

Edit to Step Seven

I found that my Step Seven looks identical to Apple’s ‘active’ link. Therefore, I am glad you saved that, however, that was for the active stage. Apply the following settings to the nav bar layer for the hover stage: