in Students, Tutorials

How To Create BlackBerry AppWorld Logo

You must have seen this logo on BlackBerry website via App World. Achieving a good Logo/Icon for an interface requires Precision, Aesthetic, Simplicity, Contrast & Recall Value to make it stand out from crowd. Today I am gonna show you how to create BlackBerry App World Logo in Photoshop.

BlackBerry AppWorld Logo Abinash Mohanty

BlackBerry AppWorld Logo Abinash Mohanty

You can download the following source file in the beginning or in the end, the choice is yours.

DOWNLOAD the source file.

 

 

What We Need:

1. Adobe Photoshop CS3/CS4/CS5
2. Basic Fundamentals of how Layer Style works
3. Visualization Skills
4. Illustrator (to place the BlackBerry Symbol as Vector Based)5. Patience
Step1.
BlackBerry AppWorld Logo Abinash Mohanty
Run Adobe Photoshop and Create a New Document of size 550 Width x 350 Height (you can go for default screen size 640×480 of pixels). The color mode should be in RGB and The Resolution should be in 72 as shown here. Give a document name and Click OK.

Step2.

Create 3 circles as you see on the screenshot by using the Ellipse Tool (U). Since this is an Intermediate Tutorial, you can learn “how to Add or Subtract Shapes in Photoshop” from This Link. This is important, make sure the Red(Center Circle) should be filled and rest 2 (Green & Purple Circles) should be visible as outline/cutout shapes (or else it won’t work when you apply layer styles) as they appear above in the screenshot.

step 2 BlackBerry AppWorld Logo Abinash Mohanty

Step3.

I have labelled them as Red(Inner Circle), Green(Middle Circle) and Purple(Outer Circle) for Identification for this Tutorial.

Step 3 BlackBerry AppWorld Logo Abinash Mohanty

Step4.

Now Select the Red (Inner Circle) and apply the following attributes/styles to this layer by using Layer Blending Mode (go to Layer Menu > Layer Style > Blending Options) or (Select Blending Options by Right Click on this Red (Inner Circle) Layer.

Step 4 BlackBerry AppWorld Logo04 BlackBerry AppWorld Logo05 BlackBerry AppWorld LogoBlackBerry AppWorld Logo

It would look like this after applying the Blending Options/Layer Styles as shown below.

07 BlackBerry AppWorld Logo Abinash Mohanty

Step5.

Now Select the Purple (Outer Circle) and give the following Blending Options/Layer Styles.

08 BlackBerry AppWorld Logo Abinash Mohanty09 BlackBerry AppWorld Logo Abinash Mohanty10 BlackBerry AppWorld Logo Abinash Mohanty11 BlackBerry AppWorld Logo Abinash Mohanty

Gradient Overlay> This part is a bit Tricky & Important. You have to adjust the Gradient placement of the Current layer while you are on Gradient Tab of the entire Layer Style Panel. It might take some time to adjust the layer gradient for the right placement and that requires a little bit patience to make it right.12 BlackBerry AppWorld Logo Abinash Mohanty13 BlackBerry AppWorld Logo Abinash Mohanty

It would look like this after applying the above Blending Options/Layer Styles as shown below.

14 BlackBerry AppWorld Logo Abinash Mohanty

 

Step6.

Similarly select the Green (Middle Circle) and give the following Styles by using Layer Blending Options.

15 BlackBerry AppWorld Logo Abinash Mohanty16 BlackBerry AppWorld Logo Abinash Mohanty17 BlackBerry AppWorld Logo Abinash Mohanty

It would appear like this (below). Yes, We are almost done with the logo form/base and now we are
going to integrate the BlackBerry Symbol in this.

18 BlackBerry AppWorld Logo Abinash Mohanty

 

Step7.

You can download BlackBerry B/W logo eps format from Here.

19 BlackBerry AppWorld Logo Abinash Mohanty

 

Step8.

Open this downloaded BlackBerry logo file in Adobe Illustrator (you can also open this eps file in Corel Draw or any other Vector Based Application), Select & copy only the BlackBerry Symbol and paste in Photoshop as Layer Shape (editable vector). If you are using other vector programs, you have to export the BlackBerry symbol and import in photoshop as place command(make sure it is vector/editable/scalable and not raster based).

20 BlackBerry AppWorld Logo Abinash Mohanty

Step9.

Place the BlackBerry Symbol above all the photoshop layers. Resize and Adjust the placement to the center as displayed and give the following color code #(f3f3f3).

21 BlackBerry AppWorld Logo Abinash Mohanty

Now It would look like a complete BlackBerry App World Logo.Wait…We are just left with the last Step,
Yes! The little Highlight on the left.

22 BlackBerry AppWorld Logo Abinash Mohanty


Step10
.

Create a small circle and fill with white. Position the small white circle as shown here.

23 BlackBerry AppWorld Logo Abinash Mohanty

Go to Filter > Blur > Gaussian Blur and put the value similar to this screenshot.

24 BlackBerry AppWorld Logo Abinash Mohanty

For a better result make a duplicate of this Blurred White Circle and give a Layer Blending Mode to Lighten. You can try some other Blending Modes (Screen, Soft Light).

25 BlackBerry AppWorld Logo Abinash Mohanty

Voila!! Bellow Screenshot is the Final Recreation of the BlackBerry App World Logo (on the left). I have kept the Original Logo from BlackBerry Website for comparison.

 

I am sharing the source file if you would like to use this for several personal projects or mockups.

DOWNLOAD the Source File.

Conclusion.

This is not the only way to create such logos. I have just shown one approach (out of others) in terms of the flexibility(scalable vector graphics) point of view so that It can be used as icons, posters or even in Ad promotions.

 

Write a Comment

Comment