Did you update your 4.7 operating system to 5.0 on your Blackberry Storm?
Being a theme developer I get all the problems and questions when it comes to themes for Blackberry Devices. Honestly, I am always glad to help, but I am also annoyed RIM doesn’t offer the proper support for this. This ‘tutorial’ is for those who updated their Storm ( the first one ) to the latest OS 5.0.

Before we get started, please understand that; 1) I am not responsible for your phone in any way, 2) I found this solution while researching it for a customer, 3) I will be more than happy to assist you further if you need it.

Now, OS 5.0 isn’t a bad thing. That is where most of the phones will be ending up so we need to make sure we find a proper work around. After doing some research I found that this was the most beneficial. Keep in mind this fix does work, however, you need to do it everytime you change your theme or reboot your phone. To work around this, the person who created your theme can send you the background files, or just change the landscape pictures to a black background.

Let’s get started:

Step One

Change to the theme you want to use.

Step Two

Change the wallpaper to the wall paper that was used. If you have the backgrounds, put them on your micro sd or email them to your phone.

Step Three

Once you change the wallpaper, go to options > themes. On this screen you will notice a blue box next to your active theme – tap it and you will be an options screen.

Step Four

Once the options screen loads, change it from 2 rows to 1 row. Save it but do not exit this screen. After you save it, change it back from 1 row to 2 rows. Keep in mind, some theme developers start with 1 row already, just change it from 1 row to 2 rows, then back from 2 rows to 1.

To all of my readers and Blackberry Fans, I am in the works of creating a members only section where you pay a small fee to get complete access to all of my themes. By complete access I mean, you will be able to download and view the background images, theme files, icons used, and more! You will be able to view and download any theme, for any device – as many times as you want!

brrrrr it’s cold!
Winter is right around the corner and you need to make sure you give your Blackberry the winter theme it deserves. For only $2.00, you can have this awesome theme on one of the following blackberry phones: Pearl 81xx (OS 4.2, 4.3, 4.5), Curve 83xx (OS 4.2, 4.3, 4.5), Curve 8900 (OS 4.6), Bold, and Tour. Below are images of the theme and a link to purchase it. The picture’s below are from a Bold. At the bottom you will find a link to view picture for the other phones and purchase your theme.

The theme includes awesome icons and even better backgrounds.

This picture is the main screen on your phone. The icons are customizable. Meaning you can put any icon on the front. If you download/have Facebook or Twitter app on your Blackberry, you will not see a Winter style icon.

Here are the icons for this theme. They include houses, snowmen, snow flakes, snow globes, and more!

Here is what the screen will look like when you read your inbox or delete something from your phone.

This is what you will see when you are going to make a phone call.

When you receive a call, your background will look like this:

When you lock your phone, your background will look like the following:

Please select your phone to purchase this theme:

Blackberry Pearl 4.2/4.3
Blackberry Pearl 4.5
Blackberry Curve 4.2/4.3
Blackberry Curve 4.5
Blackberry Curve 8900
Blackberry Bold 9000
Blackberry Tour

Please leave a comment if you want the theme for your Curve 85xx, Storm, or others.

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:

If you ever played pool, you know the game is quite difficult. For me, the game is probably the hardest game besides the sport of golf. I decided to create a pool ball (the number 6 – solid). So in this tutorial you will learn how to design one for yourself. You may want one if you are buying a sports bar with pool tables.

Step One

Open up Photoshop and create a new document that is 500 pixels wide and 500 pixels high. With my example, I created a background. You can do this if you want, if not, fill the background with white (#000000).

Step Two

With your Marquee Tool, create a circle in the middle of the document. Do not fill the this with any color, but click on the Gradient tool. Make sure your foreground is a light red, and your background is a dark red. I used #ee8181 for my foreground, and #810000 for my background.

Select Radial Gradient and do the following:

Step Three

You want to create a dark bottom to the ball. Hit control, then click on the layer with the ball. This will highlight the circle. Create a new layer and go to Select > Modify > Contract and choose 5 (this number depends on the size of your ball). Fill this area with a black to white foreground. change the blending mode to Overlay, and the Opacity to 43%.

Step Four

Now you want to create the top shine to the ball. Hit control, then click on the layer with the ball. Go to Select > Modify > Contract and choose 10. Create a new layer, and fill it with white. Hit control, and click on the layer with the white circle, and go to Select > Modify > Contract and choose 3. Press delete on your keyboard. You will be left with this:

Step Five

Select your Rectangle Marquee Tool, change the feather to 10px, and draw a box just under the top of the white circle and press delete on your keyboard. After you hit delete on your keyboard, go to Filter > Blur > Gaussian Blur and choose 2.7

Step Six

You want to add some more glow to the top. Select the paint brush tool, with a large brush. Select white and paint under the fade that is already at the top. Go to Filter > Blur > Gaussian Blur and choose around 5.0 or 6.0. If that is not enough, change the Opacity of this new layer to 30% – 42%.

Step Seven

Press control and select the layer with the red ball. Create a new layer, and move the select marquee up the ball about 55% up. Fill it with white. While you are on this new layer, press control and select the red ball layer, then press shift + control + I (Select – Inverse) and press delete.

Change the blending mode to overlay and the opacity to 6%.

Step Eight

Now you need to create the number. In a new layer, create a small circle and fill it with white.

Step Nine

Go to Layer > Layer Style > Blending Options. Do the following:

Outer Glow

Inner Glow

Step Ten

Add the number. I used Arial font in bold.

Step Eleven

Add some shadow under the ball.

As design comes second nature to a lot of us, we try to come up with new ways to show our site visitors ways to improve the look of our personal or business website. Pressing text into a background is just another way to add a slight flare to your designs. This tutorial will be a quick one and will not be very hard. It only consists of two layers! Let’s get started.

Step One

Open up photoshop, create a new file with 500 pixels high x 500 pixels wide. Fill it in with a red/orange color (#db4848).
If you pressing your text into an already made background, you can skip this step.

Step Two

Add a lighting effect. Filter > Render > Lighting Effects…

I decided to apply the lighting effects twice, this step is optional.

Step Three

Add your desired text . Use a dark grey (#4a4343) for your text.

Step Four

Add the following blending options. Layer > Layer Style > Blending Options…

Inner Shadow:

Drop Shadow:

Gradient Overlay: