Full gaming template Tutorial
Interested in advertising? Well, we have been in the Tutorial field for quite some time now (4 years to be exact). We receive ±1300 unique visitors per day which totals a monthly average of 39000 unique visitors, so advertising with us will definitely get your site exposed to many tutorial lovers. Head on over to the Advertise page so you can familiar yourself with more details.
Step 10:
Make some more menus, you can easily do this by making a new layer, and by pressing Ctrl+Shift+Alt+E, to paste the whole design in the new layer. then delete the parts you don't need. You can do it in so many different ways so take one you like, it shouldn't be that hard for you if you came this far in the tutorial
.
![]()
Step 11:
Make a new layer and name it gradient line. Take the pencil-tool again with a 1px brush and make a line in the menu not all the way to the edges so less then 200px. Go to the blending options of this layer and use this gradient overlay for the dark gradient:

And for the light gradients:

![]()
Group all the newly made layers in a group.
Step 12:
Now let's add some coloring shall we, Make a new adjustment layer again but now choose "Color balance". Use the following values, or use your own values that you like.
Shadows: +23, +2, +11
Midtones: -60, -24, -4
Hightlights: 0, 0, 0
![]()
Step 13:
The last thing we have to do is add some shadow at the bottom and the top background. So go to your Main site + bg group and make a new layer under the main site layer, called shadow, take the gradient-tool and set the foreground to black, make a gradient like in my final result below. Change the blendmode to soft light and opacity to 55%.
Duplicate this shadow layer and place it above the main site layer, this will be our footer shadow. So go to > Edit > Transform > Flip vertical, and drag it to the bottom of the document. Lower it's opacity some more to 36% or something you like.
Ctrl+Click the main site layer, Hit ctrl+Shift+I to make the selection inverse. Select the footer "shadow" layer and hit delete on your keyboard. We do this because we only want the shadow to be visible on the main site layer and not on the background.
My final result:
![]()
In my next tutorial I will be explaining on how to code this puppy in valid CSS and xHTML, so check back every now and then for updates on this free photoshop tutorial.
This tutorial is pretty lengthy, for that reason you can download the original PSD of this tutorial