I stumbled upon some new videos for some new games on the Xbox 360, and one of the most impressive ones I saw was a trailer for the upcoming release of Project Gotham Racing 3.
I was not only impressed by the graphics which made the game look very realistic, but also by the smooth and unique interface.
This Adobe Photoshop Tutorial will show you how to create a stylish logo which is similar to some of the in game elements displayed in the trailer.
What you will be creating
You will be designing something in photoshop similar to the image shown below:
Lets Begin
In Adobe Photoshop, create a new document (for purposes of this tutorial, you may want to duplicate the dimensions I used of 450x250).
Select the Rounded Rectangle Tool (
) from the tool bar, and then create a rectangle that covers the vast majority of the document. Once you have created your rectangle, set its color to #D90E0E, or another shade if you would prefer:
Rasterize this layer (right click the shape layer, then click rasterize). Now create a selection around your rounded rectangle by holding the Ctrl key down, and left clicking the layer in your layers panel.
Select a background color of a darker shade of your original color (ie: #B20C0C if you started with the same shade of red as I did). Set your foreground color to the original color you used. Now using the Gradient Tool (
) select the foreground to background gradient preset, and drag a gradient in your selection as shown in the figure below:
This simple technique will add more depth to your logo simply by changing the lighting over your rectangle.
Adding the Reflection Effect
We are going to add a reflection appearance to our logo to add some extra style to it. For this portion of the tutorial, you will need a photograph of some scenery (preferably a city, highway, or another road terrain). If you would like, you may use the image I have provided below:
Copy Paste this picture (or another which you have selected) into your document as a new layer. Create a selection around your rounded rectangle once again, inverse the selection (Select > Inverse), and then cut out the selection for the image you pasted into your document:
Create another rounded rectangle similar to the one shown below:
Transform this shape layer into a selection, and then hide it. While having your image layer selected, cut out the selection (Ctrl + X or Edit > Cut). You will see the red rounded rectangle box we created first where you cut the selection. Paste (Ctrl + V or Edit > Paste) the cut portion of the image back into the document as a new layer, and then realign it with the cut out portion. The picture below is what it should look like now (I have lowered one of the images opacity's so that you can see the difference in the two layers:
Set the Large image layer to a blending mode of Screen, with an opacity of 8%.
Set the small image layer to a blending mode of Screen with an opacity of 60%.
This will give the effect of part of your rounded rectangle reflecting its environment.
Final Touches
You may wish to add some final touches to your rectangle. One thing I did was modified the blending options of my rounded rectangle layer as shown below:
These Blending Options will add some additional shading to your rectangle as shown in the result below:
You can go even further by adding a simple black footer to your rounded rectangle:
And finally, add some text to your logo to make it more personalized, or perhaps even a logo. Contrasting Colors will add maximum effect for this logos purpose! Be sure to Experiment!
More Tutorials: 
