This
tutorial teaches you to create a web site layout, from A to Z. The
subject is regarding the Video play games, in this way, you will first
start to create a header including a logo, a menu and an article.
After this step, you will be able to create the contents, creating different blocks of news.
Before to start, check here the final result:
We can now start with the tutorial.
STEP 1 Create a document
Open Photoshop and go to menu File>New. Enter a name, the width and the height (1 000X600 px). Press OK key.
Create now a new layer, name it background. Then use the regular
marquee tool (M) to create an active selection all along the width, with
445px height.. Use now the Paint Bucket Tool (G) to fill the selection.
Got to menu Layer>Layer style>Gradient Overlay, then pattern overlay and follow this setting:
Create again a new layer and name it gradient. Change the foreground colour to the white, then use the Gradient Tool (G) (Foreground>Transparency) with the radial mode, to create a light on the centre of the background. Change now the layer to the overlay blending mode and reduce opacity to 60%.
STEP 2 Create the menu
Create a new group, menu Layer>New>Group and name it menu. Create now an active selection on the top of your picture (height 82px). Create a new layer, name it background and put it into the folder menu. Fill in the selection with black colour and add an internal shadow and a colour overlay.
On the right side, use the Text tool (T) to add some hypertext links, change the colour to blue #6680d0 for the first link.
Create one more new layer and place it under the links. Create an active selection around the first link and fill the selection with a dark blue #111217. Create a second layer as well as a 2px border on the bottom of this area.
To create the logo, you only need to type your text with the NFS font available on this address: http://www.dafont.com/fr/search.php?psize=m&q=NFS+font then, add several layer styles: shadow, internal shadow and gradient overlay.
STEP 3 Last Article
Create a new group and name it Info. Create inside a new layer, name it bottom background. Create a 1 000X45 active selection on the bottom of the big blue rectangle.. Fill this selection with the Paint Bucket Tool (G) and add three layer styles: shadow, gradient overlay, outline.
You have now to create on the right, the button of this bar. To do
it, create first a new layer and an active selection (143X43px) over the
bar. Fill this selection and add same layer styles than the previous
used, but with clearer colours.
To create the arrow, use the Ellipse Tool, and the customize forms tool (U), with the Triangle form. Add an internal shadow into the circle.
Create a new layer and create an active selection on the left of your layer (defined as 550X320px). Fill this selection with white colour using the Paint Bucket Tool (G). Change the opacity of the background to 30% and add a shadow, an overlay of colour and outline.
Import a video play game picture. You will put it onto the centre of your white rectangle.
Regarding the page numbering, create three small rounds with the Ellipse Tool (U) and add inside an internal shadow
To finish, add the title and the article description on the right, use for it the Text tool (T).
The layout top is already done.
STEP 4 Content
The first part of the content is composed of four small easy blocks, each of them including: an icon, a title, a text descption. The icons are here available: http://www.tutorial9.net/downloads/nixus-icon-pack-60-beautiful-premium-icons-free/ , for other elements, you only need to use the Text tool (T).
Put all layers reagrding the first block, into a group you name news1. Duplicate this folder three times and name them news1, 2, 2 and 4. Use the Move Tool (V) to place them on the lines.
To finish, you are going to work on the creation of a background under your news. To do it, create a new layer, name it background and place it under the four newsgroups. Create now an active selection (1000X700px), directly under the top, and fill the selection with the colour #f7f6f2 then add an internal shadow.
STEP 5 Last articles
The last articles are located on the home page too. For this, create a new group and name it post1. Use the Rectangular Marquee Tool (M) to create a 290X350px rectangle. Fill this selection with black colour and add the layer styles: overlay of colours and border. Use one more time the Rectangular Marquee Tool (M) to create a white rectangle on the bottom of this box.
Use the Text tool (T) to add a fake text.
To finish, add a new video play game picture and duplicate the button used in the carousel, to get a new button.
Duplicate two times the group post1 and name these groups: post1, 2 and 3. Use to finish, the Move Tool (V) to place them on a line.
STEP 6 Twitter
Just over the footer, there is a band used to display the last twitter messages posted by the webmaster. To use it, create a new group and name it Twitter. Create a 1 000X50px new selection and a new layer. Fill this selection with the colour: #1b2130.
Create now a new layer, a thin border and a button located on the right. Use as colour, bleu #6680d0.
Download now this icon and import it into your folder. Reduce it and put it on the left side. Add a colour overlay #1b2130, then use the text tool (T) to simulate a Twitter message.
See below the result:
STEP 7 Create the footer
Regarding the footer, create a new group and name it footer. Create now a new layer and a selection all along the bottom of your document. Copy / paste on the new layer, the layer styles used on the carousel background.
Create a second group and name it column1. Use the text tool (T) to create a title, as well as fake texts. Regarding the button, use the Rectangular Marquee Tool (M) to create a rectangle with the colour #0f131b.
Apply same action regarding the second column.
Apply same things to the newsletter subscription form. Inputs and buttons are also created using the Rectangular Marquee Tool (M) and the Paint Bucket Tool (G) for the filling up.
See below result of footer :
STEP 8 The bottom page
The bottom page is used to publish the website Copyright. To do it, create first a new group, name it bottom. Use the Rectangular Marquee Tool (M)to create a 1000X45px selection. Fill it with the Paint Bucket Tool (B) with colour #0a0c11 and add an internal shadow.
Use the text tool (T) to add the Copyright.
Go now to the wonderful website Hongkiat (http://www.hongkiat.com/blog/free-social-media-icon-sets-best-of/) and download an icon set for your social networks. Import the icons onto your picture, put them on the right side of your bottom page.
The Template is completely done, see the result :.
