gamespot style interface design - page 1, Page 1 2 3 next

Click Here Discuss This Tutorial and ask questions.

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

Use Menu Above

Click Here Discuss This Tutorial and ask questions.

, , 1, 4, 0, 13, 2006-08-07 22:35:54, 62, , 2006-08-22 17:41:55, 62, 0, 0000-00-00 00:00:00, 2006-08-07 22:33:36, 0000-00-00 00:00:00, , , pageclass_sfx=back_button=item_title=1link_titles=introtext=1section=0section_link=0category=0category_link=0rating=author=createdate=modifydate=pdf=print=email=keyref=docbook_type=, 14, 0, 27, photo shop sig tutorial, photo shop texture tutorial, logo tutorial photo