In this tutorial we will see be showing you how to create a web layout much similar to the famous gamespot.com design in Adobe Photoshop.
Step 1.
Create a new document 1024 x 1000px with a transparent background.
Step 2.
Using the Bucket tool fill in the background with the colour #252525.
Step 3.
Make a large rectangle using the rectangle tool with the colour set to #1d1d1d. The rectangle should take up most of the canvas as it will be where the main content will be placed. Name this layer main_content_area
Step 4.
Now that we have the background sorted out we will start on the header. Using the Rounded Rectangle Tool with the radius set to 5px and the colour set to #e2dede make a rectangle at the top of the main_content_area but make sure that it is on a new layer called light_header.
Step 5.
We need to cut the bottom of the light_header layer so that it has a square edge, we can do this by using the Rectangle Marquee Tool and selecting the area as show in the following image and the using the eraser tool to erase the unwanted area.
Step 6.
We are now going to add a gradient to the light_header go to Blending options (Layer>Layer style>Blending options) and use the following settings.
Step 7.
We now have to create an other rectangle using the rectangle tool with the colour set to #2f2f2f name this layer dark_under_header
Step 8.
On the dark_under_header layer go to Blending option (Layer>Layer Style>Blending Options) and use the following settings
Now we are going to make the Orange Navigation Area, there is some cutting and touching up that will have to be done in the part so that it looks good.
Step 9.
Create a rectangle the width of the main_content_area and approximately the same height as the dark_under_header layer though using the colour #be5c00. name this layer orange_navigation_bar
Step 10.
We need to add a gradient overlay to the orange_navigation_bar so select that layer and go to blending options (Layer>Layer Style>Blending Options) and use the following settings.
Step 12.
Select the stroke using the rectangle marquee tool and then erase it.
Do this for all the strokes on this layer except the top.
You should now have something that looks similar to this:
Step 13.
Select the Rounded Rectangle tool, radius set to 4px and with the colour set to #b05300 and a rectangle like this
Step 16.
Now go to blending options (Layer>Layer Style>Blending Options) and use the following settings.
Step 17.
Using the Rectangle tool with the colour set to #373737 make a thin rectangle under the orange_navigation_bar. You can name this layer thin_grey_space but make sure that this layer is at the top of the layer list for now.
Step 18.
Using the same settings as in the previous step create a space for a heading using the Rectangle tool. This new rectangle should be on a new layer.
Step 19.
Still using the Rectangle tool create a large rectangle the width of main_content_area and from about half way down and stop a few centimeters from the bottom, you should still be using the colour #373737 and this layer should be named content_area_1
Step 20.
Now we create some heading areas using the rectangle tool with the colour set to #b05300 create each one on a separate layer and name them heading_area_orange_1 and then 2 and so on.
Step 21.
Now we have to create the content area for the headings we use the rectangle tool with the colour set to #1d1d1d name these layers content_area_smaller_1 and 2 and so on.
Step 22.
For the footer I am just going to copy one of the first layers we did which we named light_header, duplicate the layer and then go Flip Vertical (Edit>Transform>Flip Vertical) and then align it at the bottom so that it looks nice.You may have to make it a little bit smaller, you can do this by pressing Control + T or manually (Edit>Transform>Free Transform).
Step 26.
Now select the Rectangle tool with the colour set to white (#ffffffff), make sure that you are NOT using the rounded rectangle tool and make a search bar. Name this layer search_bar
Step 27.
Go to Blending options (Layer>Layer Style>Blending Options) and use the following settings.
and you should now have something that looks like this.
Step 29.
Finally we are going to make the login section. Using the Rounded rectangle tool with the colour set to #696969 make a reasonable sized area, remember that in this area you will have to have 2 fields to fill out and a few buttons. Name this layer login_bg
Step 30.
Create a thinner rounded rectangle now using the colour #373737 now go to Blending Options (Layer>Layer Style>Blending Options) and use the following settings.
Step 31.
Now duplicate the layer and align it just underneath the first one, name the layers field_1 and field_2.
Step 32.
Now create a rounded rectangle #373737 the same width as the login_bg and just make it go a quarter of the way up in height. Then using the Rectangle Marquee tool cut the top of like so.
