This Photoshop tutorial teaches you how to create a website layout, from the beginning, creating a document under Photoshop, how to the publication in HTML5 and CSS3. This tutorial is really useful for people willing to create their own website as well as for web designers looking for inspiration or looking for graphics resources.

In fact, with this tutorial you’ll learn how to design a beautiful layout and you will discover in a second tutorial (published soon on grafpedia.com) how to convert a Photoshop web design to high quality for browsers using HTML5 and CSS3. I propose you to download all files: .psd files (of this incredible web design), the HTML5/CSS3 layout and all files needed to follow step by step this tutorial.

Technical Data of this Photoshop tutorial:

• Software : Photoshop CS5
• Timing : around 3 Hours
• Level : Medium
• Files to download : .psd Photoshop files
• Final Visual: See below the Template you are going to create with this tutorial.

STEP 1 Files Creation

The first step of this tutorial is regarding the document creation.
Open Photoshop, go to menu File>New. A new window appears : Enter the name of this new file, width 1200 pixels, height 1500 pixels. Press on Ok key.

STEP 2 Guides Creation

To make the Photoshop Template creation easier, I suggest to use guides often enough.
They help to create and find the best place of the different elements into the page. Create a first horizontal guide at 450 pixels from the top of the picture (to create a guide, use the rules, to display them, press Ctrl/Cmd + R)

STEP 3 Header Creation

Create now a new layer (menu Layer>New>Layer) and name it Layer. Use the Rectangular Marquee Tool (M) to create a selection of the top of your document (following the guide previously created), full it in with black color (using the Paint Bucket Tool (G)).

STEP 4 Add a Layer Style

Go to menu Layer>Layer Style>Gradient overlay. Set the gradient as shown of this picture.

Find here the result:

STEP 5 Carbon Pattern

Apply now a pattern simulating carbon. Follow this link to download the pattern: http://www.brusheezy.com/Patterns/1387-Carbon-Fiber
Open the Zip file and install the brush in your Photoshop. Select the Paint Bucket Tool (G) and on a new layer (layer you name carbon), fill in your selection with the carbon pattern.

STEP 6 Creation of header base

Start to create several new horizontal guides at 90, 130, 450 and pixels from the top of your document, vertical guides at 90 pixels from the left and right borders. Change the Set foreground color by the black and with help of Rectangle Tool (U), create the form following the guides.

STEP 7 Attenuate the carbon pattern

To softly attenuate the carbon pattern create on the background, add blending mask on the carbon layer (menu Layer>Blending mask>Reveal all). Select now the Gradient Tool(G) and choose the second selector (Foreground to transparent). To finish, create a gradient on left side (inside).

STEP 8 Import of the logo

This step is very easy, open source file of the logo, delivered with tutorial and import the logo group into your document. Use the Move Tool (V) to help you to find the perfect position of the logo.

STEP 9 Create the search engine

To finish the top site, you are going now to add a search engine. Create a new group (menu Layer>New>Group) and name it Search engine. Then create multiple marks which will help you to insert the different elements into the form, see the picture below.

Create the search field as well as the button. To do it, use the Rounded Rectangle Tool (U) with a 4 pixels radius.

To create the zoom, select the customize tool (U) and choose in the selector, the shape search (see the picture below).

With this shape, create white zoom on the left of your search field.

To create the reflect of the search button, create a rectangular marquee around the thumbnail of the button. To do it, right click (with the mouse) button layer and choose Select the pixels. Set foreground color to the black and create a new layer, then, fill in your select with white color.

Use the Ellipse Tool (U) to create an oval form just over the button (see the picture below). Go after to the menu Selection>Switch. Press Delete key (on your keyboard).

Use again the blending mask and the gradient Foreground> transparency to shadow the left side as well as the bottom of the reflect.

To finish the search engine, use the Text Tool (T) to create the title of the button. Add a stroke around the line on your text to insert it better into your button.

STEP 10 Import of the picture

In the attached zip file, you can find several pictures as examples, select the one you prefer and import it into your Photoshop document. Use the Move Tool (V) to find the best position for the picture. (use again the marks).

STEP 11 Create the menu

Use the Rectangular Marquee Tool (M) to create an active selection over the picture. Follow the marks to select an area from the left side to the right side. Create a new layer (menu Layer>New>Layer) Fill in the selection using the Paint Bucket Tool (G). To finish, add two Layer styles: overlay gradient and stroke. Follow the setting below:

Select the Text Tool (T) and add the links into the menu (the active link is white, others are medium grey) In my example I used the Verdana font. To finish it, add a shadow to the text (menu Layer>Layer style>Shadow)

STEP 12 Create a shadow on the picture

To give a filling of depth to the menu, create a shadow under the menu (over the picture). Create a new layer (name it Shadow) then create an active selection around the picture (right click with the mouse on the thumbnail of layer) and select the pixels. Select the Gradient Tool (G) with the gradient Foreground>Transparency (see the second gradient in the selector) and create un new gradient (from the menu to inside of the picture)

STEP 13 Networks counter

Regarding the two counters, import the available icons from the zip file (RSS and Twitter) or download them from the link: http://www.iconfinder.com/search/?q=iconset%3Asocial

On each icon, add an internal shadow and a colour overlay, to do it, select the layer of the icon and go to menu Layer> Layer Style>Internal shadow. Follow the setting below:

Use now the Text Tool (T) to add the counters behind on the side of each icon. Use colour #797d80 and add a shadow on the text (menu Layer>Layer style>Shadow)

Use the Move Tool (V) to find the best position for the icons and the counters.

STEP 14 Create some icons

The top area of the website is now finished. You have to work now on the Carousel, to do it, you will create icons which will scroll pictures to the right or to the left side.
Start with the creation of a new group (menu Layer>New>Group), name it Arrow. Use the Ellipse Tool (U) to create a new black ellipse on the left of the picture. Do not hesitate to use the Ellipse Tool (Z) to apply on the area you are working with.

Add now three Layer styles on this ellipse. Select the layer of this ellipse then go to menu Layer>Layer Style>Shadow. Add now a gradient overlay and a stroke. Follow the settings below:

Select the previous defined shapes and choose the triangle with rounded rims. Set background color to the white. Create a new triangle over your ellipse. Use now the free transformation tool to turn to the left side (to activate the free transformation, press keys Ctrl/Cmd + T).

Add to the layer of the triangle a gradient overlay.

For the icon reflect, use the blending mask method, previously explained at step 9.

Duplicate the Arrow group, to do it, click right (mouse) on the group and select Duplicate the group.
To turn the triangle to the right, select the layer and go to menu Edit>Transformation>Horizontal Flip.

Use now the Move Tool (V) to place the second icon on the right. Small tips: To move an element on a big distance, keep the uppercase key pressed and press on the directional key from the right.

STEP 15 Create shadow under the picture

Duplicate the black rectangle of the carousel and rename it Shadow. Place it under the first layer.
Right click on it and select Apply Pixels on the layer. To finish, move the shape to 80 pixels to the bottom.

Go to menu Edit>Transformation> Perspective and catch the wrists from the top and move them to inside to change the shape (see picture below). Press Enter to validate. To finish, activate the free transformation and reduce the height and width of the shape.

To fluff this shadow, go to menu Filter>Alleviation> Gaussian fluff and enter values: 20 pixels. Press on button OK to validate.

Reduce the opacity of the layer to 40%

STEP 16 Add texts

It is time now to work on the main part of our template. This part is regarding the creation of two titles and a paragraph, using the Text Tool (T). Use the Myriad pro font for the titles and the Verdana 12 pixels font for the text. For the sharing bar, use the Rectangular Marquee Tool (M) and Paint Bucket Tool (G) (on a new layer).

STEP 17 Add thumbnails

Find the three thumbnails used in this example, included in the zip file. Of course, you can use thumbnails of your choice. When the three thumbnails are inserted into your document, add on each layer: a border and an external glow. Follow the settings below:

STEP 18 Add some texts

Use one more time the Text Tool (T) to add a title and a description under each thumbnail.

STEP 19 Create a button

To create the ‘READ MORE’ button, select first the Rounded Rectangle Tool (U), then draw a rectangle defined as 105pixels width x 22 pixels height (use the information window to keep these symmetry)
Add now on the layer, the layer styles: an internal shadow, a gradient overlay, a stroke. Follow the settings below:

For the text, add your title over the button, using the Text Tool (T). Add a shadow.

You can now watch the button:

Duplicate now the button and the text to place same button under each thumbnail.

STEP 20 Putting order

To avoid to be confused with the multiple layers you created, place all layers dedicated to the left side into a new group. Then, create a new group, menu Layer>New>Group and name it Left. Put all layers inside (titles, texts, thumbnails, buttons etc…).

STEP 21 Twitter Messages

Create a second group and name it Right. Place a new guide helping you to place the sidebar at 400 pixels from the right border. Use now the Text Tool (T) to place a new title on the top of the sidebar.

STEP 22 Twitter messages

To create the first block, create first some guides which will help to place it perfectly. Place a first guide, 20 pixels under the title, then a second one, 80 pixels under the title. Select now the Rounded Rectangle Tool (U) and create a rounded rectangle with a radius of 4 pixels, following the guides.

Add two layer styles on the rectangle: a colour overlay and a stroke. Follow the settings below:

Use the Text Tool (T) to simulate the last Twitter messages.

To finish, duplicate the rounded rectangle, to do it, right click (mouse) on the layer and select Duplicate the layer. Do same thing, two more times. Use after the Move Tool (V) to place the block under the Twitter messages.

STEP 23 Twitter button

To incite people to follow you on Twitter, you need for sure, a visible button . To do it, duplicate one time the biggest rounded rectangle et place it your Twitter messages list. Right click (mouse) on the layer and select Delete the layer styles. Switch the internal colour to the blue: #00a9eb.

Create a new layer over your blue rectangle and rename it Reflect. Retrieve the selection of the blue rounded rectangle (right click on the layer and click on Select the pixels). Fill in the selection with white colour (use the Paint Bucket Tool (G)). Unselect pressing on keys Ctrl/Cmd + D.

Use now the ellipse Marquee tool to cut the pixels as shown on the picture below:

Use again the new technical layer mask to shadow the left and right reflects on the button.
To do it, select the layer Reflect, then go to menu Layer>Layer Mask>Display all. Use now the Foreground gradient> transparency (Set foreground color as black) on the top (from the top to the bottom) and on the left (from the left to the right) to get this result:

To finish the button, use the Text Tool (T) to add FOLLOW US ON TWITTER and to add a stroke to your text (menu Layer>Layer style>stroke). Follow the setting below:

STEP 24 Some Assessment?

Step by step you build your template. It is time for you to look up to your work for the first time of course, remember to save your work. It would be a disaster to lose it, isn’t it? If not done, go to menu File>Save as (N.B. from my point of you, I saved my file already at the first step, and by you?)

STEP 25 Create the footer

Create a new guide at 50 pixels far from the lasts elements and create an active selection on the all base of your picture (following the guides). Create a new layer (menu Layer>New>Layer), namle it Footer. Fill in your selection with the dark grey #202020.

STEP 26 Add a gradient

Go to menu Selection>Switch. Create a new layer (menu Layer>New>Layer) name it Gradient. Select the Gradient Tool (G) (and select the second Foreground Gradient> Transparency). Create a gradient from the bottom to the top of your picture (around 40 pixels more over the footer).

STEP 27 Create the band

To make the creation of the band easier, start with the creation of several guides, some horizontal guides on the top of the footer, 10 pixels over it and 120 pixels under. Create also vertical guides, 20 pixels far from the left guide, then 60pixels far.

To finish the selection, select the rounded rectangle (change the radius to 10 pixels) and create a rectangle, following the guides (see picture below).

Add on this rectangle a gradient overlay (menu Layer>Layer style>Gradient overlay). Follow the setting below:

Duplicate now the rounded rectangle and delete the layer style (click right with your mouse and press Delete on the layer style). Activate the free transformation (press on keys Ctrl/Cmd + T) and reduce the height using the wrist of the bottom, press Enter to validate the transformation. Go now to the menu Edit>Transformation>Perspective and use the wrists of the bottom to chabge the shape as shown below:

Add a blending mask on this copy to shadow the low-section of the shape.

See result:

To finish, add your title (use the Text Tool (T)). Add on the text the layer stroke (menu Layer>Layer style>Stroke).

Use again the Text Tool (T) to add a list of links. In my example I have displayed the name of the website in white color and the URL in grey color (font Vernada 12 pixels).

STEP 28 Second block

Place all layers regarding the band and the list of links into a new group (menu Layer>New>Group) then duplicate then group. Use the Move Tool (V) to place the second band on the right of the first one.

STEP 29 Logo of the end

To finish the template, duplicate the group Logo (the one you have placed over your layout) and add the Copyright under. In my example I used again the new font Vernada, size 10 pixels and color white.

STEP 30 Template coating

That’s all, the template is now finished, use the Zoom tool to watch the whole Template and to enjoy the work done. Press keys Ctrl/Cmd + S to save your work.

See now the last picture of this tutorial

And just the pictures (in two different versions) :

Good, the first duplication of this tutorial is now completely finished. Thanks a lot to my readers, I hope to see you in my next tutorial. In next one, I will explain our cutting and encoding this template using HTML5 and CSS3.

If you like my work, the best way to return thanks is to follow grafpedia.com on Twitter or on Facebook. Even better, you can share this page with your friends with help of your social networks: StumbleUpon, FloatDesign, Twitter, Facebook.

See you soon on Grafpedia.com