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.
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.
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.
Step3.
I have labelled them as Red(Inner Circle), Green(Middle Circle) and Purple(Outer Circle) for Identification for this Tutorial.
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.
It would look like this after applying the Blending Options/Layer Styles as shown below.
Step5.
Now Select the Purple (Outer Circle) and give the following Blending Options/Layer Styles.
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.
It would look like this after applying the above Blending Options/Layer Styles as shown below.
Step6.
Similarly select the Green (Middle Circle) and give the following Styles by using Layer Blending Options.
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.
Step7.
You can download BlackBerry B/W logo eps format from Here.
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).
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).
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.
Step10.
Create a small circle and fill with white. Position the small white circle as shown here.
Go to Filter > Blur > Gaussian Blur and put the value similar to this screenshot.
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).
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.
Leave a Reply