Gamespot Style Website Design in Photoshop
Jan 7, 2009 Photoshop, Web Layouts
This tutorial has been viewed: 1595 times
Similar Tutorial: letterpress effect
In this tutorial we will learn how to create a website layout very similar to Gamespots famous layout design:
First create a new document with the following settings:
Use the paintbucket tool to fill
Tip
Hold down shift to make the gradient tool move at a perfect 90 degree angle
the background with #B2B3B5, make a new layer and then bring out the marquee tool and select about 25% of the left of the page, set your foreground color to #000000 and use the gradient tool pulling in a horizontal line from left to right to make a shade like below
Next press ctrl+j to duplicate the layer with the left hand Gradient on it, go to Edit > Transform > Flip Horizontal to flip the Shadow around then use the move tool 
to move it to the far right of the website.
Next pull out the marquee tool and select the middle portion of the site then fill it with black, and apply the following layer style settings 
You should come out with this
Now make a selection with the marquee tool 
that leaves a little bit of the black part open, and has part of the black showing on the right and left, then fill it with #272F27, it
Tip
You can ctrl+click on a layer to select everything in it, then you can use a combination of the alt (-) and ctrl (+) to add or subtract from a selection
should look like below:
Good so far? Great! next make a new layer create a selection right underneath the black heading part and down a little ways (about 8% of the page) fill it with white, then apply the following layer settings
It should look like this:
Create a new layer and press ctrl+g to have that layer ‘mask’ the layer underneath it (the layer you made in the last step) Now pull out the Rounded Rectangle tool 
set the style to ‘fill pixels’ (option in the top left corner of screen) and create a rounded rectangle in the right hand corner of the top header you made, also apply the layer settings shown below:
Next you do about the same thing with the Rounded Rectangle Tool except this time do it to the left hand side, and apply the following Layer Style Settings
Related posts
Tags: photoshop
