Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Gaming Layout
rss

Gaming Layout

Author: Photoshop-Tutorials.us More by this author


Step1. Make a new document sized 600x800 and fill it with a dark white. I chosed F8F8F8. Make a new layer and a selection like below:

image 1

Make a new layer set your foreground and background color to :

image 2

#FEFEFE(foreground) and #E3E3E3(background).

Grab the gradient tool with the settings below:

image 3

Click and drag from Bottom to Top. Your result should look similar to this:

image 4

Step 2. In this step we are going to create the simple but professional banner. Write your text using any good font. I chosed Arial Black and used two colors. You can choose yourself the color doesn't matter. I chosed Green and Black:

image 5

Set foreground color to any blue color and Grab the rounded rectangular tool with the settings below. Make a new layer and a new shape in front of the text.

image 6

I also added an arrow from shapes tool.

Now add the following layer style:

Drop Shadow:

image 7

Inner Glow:

image 8

Step 3. Make a new layer and a selection like below and fill it with the white color:

image 9

Now lower opacity to 21%

You are done with the banner.(I have also added in the right a search button to fill the empty space. Its just a image and will be replaced with a real one when the site will be coded.

image 10

Step 4. Return to the second layer you created in the layer tab. The base banner shape and add a Drop shadow:

This is my result:

image 11

Step 5. Make a new layer pick the rectangular marquee tool make a selection like below and fill it with any color. I chosen green.

Click to enlarge
Click to enlarge

Now make another selection and on the same layer as the green rectangle on the bottom add another color lighter than the first like below:

Click to enlarge
Click to enlarge

Step 6. Grab the Single column vertical marquee tool and separate the buttons like below:

Click to enlarge
Click to enlarge

Write down your text:

Click to enlarge
Click to enlarge

I also added black arrows in front of the text.

Click to enlarge
Click to enlarge

Step 7. Using the rectangular marquee tool make 2 selections like below:

Click to enlarge
Click to enlarge

and fill them with colors. First blue and second gray.

This will be ad space or website news. You are done. This is my final result :

Gaming Layout Tutorial: Final Result (Click to enlarge)
Click to enlarge



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Gaming Layout"