Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Xbox360 Banner

Xbox360 Banner


Welcome to my xbox360 banner tutorial/navigation, you'll learn how to create a simple and slick banner/navigation, along with picking up some good tips/tricks, in then end you should have something like this:

Xbox360 Banner Tutorial: Final Result

Step 1

Create a new docuement around 700x500, fill it with the background of #565656, create a new layer and draw a 4-5px rectangle from left to right and fill it with #3abc00, now use the following blending options(Right click on layer, blending options).

Gradient Overlay

image 2

Current Preview

image 3

Step 2

Now we're create the banner section, grab the marquee tool and draw a decent rectangle size, draw this near between the left and center, now go to 'Select > Modify > Smooth > 4px', fill this with either white or a light colour(On a new layer), once filled erase some of the bottom because we don't want this part curved.

Current Preview (The left is the end of the document):

image 4

Step 3

In this step we're going to improve this white rectangle we just created, so select the marquee tool, select the shape, create a new layer and then go to 'Select > Modify > Expand > 3px', move this down on the layer pallette so it's behind the white shape and fill it with a grey colour, now cut the bottom off if it's overlapping the green bar.

Current Preview

image 5

Now, we'll use some blending options on the grey border layer, so right click this layer and select blending options, then use the following:

Drop Shadow

For this, just click the checkbox, no settings need to be changed.

Inner Shadow

image 6

Gradient Overlay

image 7

Step 3

Next on the agenda is to make the inner banner part more pretty, so select it with the magic wand and fill it with #33c500, it's a nice green colour, you'll see. Now, create a new layer and make it about 50px high and nearly the full width on the little banner, when this is done go to 'Select > Modify > Smooth > 4px', now set your colour to white and get the gradiant tool, drag from top to the bottom of the marquee, now set the blending option to overlay, this has added a nice shine.

Current Preview:

image 8

Step 4

Now we will add a little image to improve the banner further, use the image below then past it onto a new layer, center it by moving it around till it fits perfect, now set the blending option to overlay.

Xbox Logo:

image 9

Current Preview:

image 10

Step 5

Now we'll add text, get the text tool, type whatever the site name will be called, go to blending options and now go to gradient overlay and enter these settings;

Gradiant Overlay

image 11

Next i used this pattern, paste it into a new document and go to 'Edit > Define Pattern', now use this on the bottom of the banner, set it to overlay and now play with the 'Fill', this is just under Opacity on the layer palette.

Pattern:

image 12

Current Preview:

image 13

Step 6

This is the final step, so prepare to say goodbye! Get the marquee tool and draw a rectagnle from left to right with about 30px high, now create a new layer and fill it with #2dbe00, move this so it's behind the actual banner and create a shine like we did earlier, you did this when creating the shine for the banner in step 3.

Current Preview:

image 14

Now i'll add some small changes which you should be able to do by yourself by now, so here's the final preview.

Final Preview!

Xbox360 Banner Tutorial: Final Result



Author's URL: PicoDeath
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Xbox360 Banner"

Only registered users can write comment

No comments yet...