Web Design Tutorial – Learn How to Design a Website From Scratch in Photoshop

- - Tutorials

In today’s tutorial i will teach you how to design a clean, beautiful and pixel perfect website using adobe photoshop(i’am using photoshop CS5 but you can use any version of Photoshop), you will learn so many useful techniques which will help you in your personal or commercial projects, so let’s get started!

Final Result

Final Result

Resources :

– Icons by streamlineicons.com.
– Fonts : Lato and Honey Script fonts.

Tutorial :

Before we go any further we need to change two settings, the first one is the global lighting, go to “Layer > Layer Style > Global Light”.

Change the Angle to 90° and click OK.

The second setting is “snap to pixels”, To get pixel perfect shapes we need to make sure that the “snap to pixel” option is always checked before we start a new project, if you are using photoshop CS5, Activate “Rectangle tool” by pressing “U”, then click the “Geometry Options” arrow in the option bar(see the image below) and check “Snap To Pixels”.

If you are using photoshop CS6, go to “Edit > Preferences > General”, and check “Snap Vector Tools and Transforms to Pixel Grid”.

Setting up the document :

Start by creating a new file, go to “file > New” or hit Ctrl + N.

Set the canvas width to 1500px, height to 2500px, Resolution to 72 and the Color Mode to RGB.

We need to define our work area before we continue, by adding guides to the canvas, for that go to “View > New Guide”.

For the first guide set the “Orientation” to Vertical and position to 210px.

And for the second guide set the “Orientation” to Vertical and position to 1290px.

We should have an outlined and centred space which going to act as our work area.

Press Ctrl + R to show the rulers, drag two additional vertical guides and place them 10px from the inner side of the two guides we added previously.

Groups & Layers Organisation :

groups and Layers organisation is the key to keep everything clean and easy to manage, for that purpose create 4 groups.

Right click on the first group and Select “Group Properties” from the menu that appears.

Rename the group to “Header” and choose red color.

Follow the same process for the rest of the groups(Billboard, Body and footer groups) as shown in the image below.

Header Design :

Select the “Header” group then activate the rectangle tool by pressing “U”, draw a 1500x100px rectangular shape, fill it with the color #f4c995 and reduce the opacity to 30%.

Logo design :

Press “U” then select the “Polygon Tool” from the option bar, set the sides to 8, the color to #fef8f1 and draw a 55x55px polygon shape. I used “Champagne & Limousi” as a font for my logo, write you website name and use the following settings for the characters :

– Font size : 30pt
– font weight : bold
– Anti-aliasing : sharp
– Color : #fef8f1

Write the navigation menu and apply the following settings to the characters :

– Font size : 16pt
– font weight : bold
– Anti-aliasing : sharp
– Color : #fef8f1

Make sure to align your logo and the navigation menu with the guideswe added previously.

Billboard :

Select the “Billboard” group, pick the “Rectangle Tool” and draw a 1500x600px rectangle, fill it with the color #eca151 and rename it to “Billboard_Base”.

Now lets add an image to the billboard, go to “File > Place” select an image, rename it to “Base_Image”, place the image right above the “Billboard_Base” layer.

Select the image layer “Base_Image”, set the blend mode to “Soft Light” and reduce the opacity to 30%.

Right click the layer “Base_Image” and choose “Create Clipping Mask” from the menu.

Now we are going to add a caption to the billboard section, select the “Horizontal Type Tool” by pressing “T”, write your caption and set the character settings as following :

First Line :
– Font : Lato
– Size : 40pt
– Font Weight : Black
– Anti-aliasing : Sharp
– align : center
– color : #ffffff

Second Line :
– Font : Honey Script
– Size : 50pt
– Font Weight : Light
– Anti-aliasing : Sharp
– align : center
– color : #ffffff

Select the two text layers and press Ctrl + G to group them, then rename the group to “caption”.

Place the caption 175px below the header, and center it with the document.

Services Section Design :

Now we are going to create the services icons, create a new group(right below “caption” group) and rename it to “Services”, by using the rectangle tool(“U”) draw a 820x4px rectangle, fill it with the color #575451, and align it to the center.

Pick the “Ellipse Tool”(“U”) and draw three cercles 160x160px each, fill the cercles with the color #575451 and align them vertically and horizontally as shown in the image bellow.

Gourp each cercle on its own group and rename the groups to “S1″, “S2″, “S3″.

Activate the move tool(“V”) and select the thee cercles layers then click on the “distribute horizontal centers” icon to get the same space between each cercle.

Place your favorite icons inside the cercles, in my case i’am using the amazing set of icons made by streamlineicons.com you can buy the awesome set of icons from here or you can download the free samples package.

Now we are going to use a technique to perfectly Align the icons in the center of the cercles, activate the “Move Tool”, go to the layers panel, hold Ctrl key and click the vector mask of the gray cirlce to make a selection.

With the “Move Tool” selected, select the icon Layer in the layers panel, and click on the “Align Horizontal Centers” then “Align Vertical Centers” icons in the option bar to center the icon with cercle as shown in the image below, repeat the same technique to align the two other icons.

Long Shadow Effect :

The easiest way to create the long shadow effects on the icons is by duplicating and moving the icon left and bottom, for that press Ctrl + J to duplicate the icon layer and place it under the original icon layer.

Change the duplicated icon color to #4f4c4a and press Ctrl + G to create a group, rename the group to “Long Shadow”

Select the icon layer inside “Long Shadow” group, hold “Alt” and keep pressing “Down Arrow” key and “left Arrow” key to duplicate the icon until the the shadow covers the cercle.

right click the “Long Shadow”, then select “Convert To Smart Object” from the menu.

Right click the smart object “Long Shadow” and choose “Create Clipping Mask”.

Repeat the process for the two other icons, until you get the same result as shown the image below.

Create two 10x10px cercles, fill the two cercle with the color #575451, and align them vertically and horizontally between each two icons.

Select the “Horizontal Type Tool” from the toolbar or press “T” key, add the title and the description underneath the long shadow icons, align everything vertically and set the character settings as fallowing:

The title :
– Font : Lato
– Size : 25pt
– Font Weight : Blod
– Anti-aliasing : Sharp
– align : center

The description :
– Font : Lato
– Size : 14pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– align : center

Body :

Call To Action :

Create a new group inside the “body” group, and name it “Call_To_Action”.

Press Ctrl + R to show the rulers, drag a guide and place it 80px underneath the services section.

With the “Call_To_Action” group selected, Select the “rectangle tool” from the toolbar or press “U”, draw a 1500x460px rectangle, and fill it with the color #f7f7f7.

Place your image on top of the rectangle, align it and press Ctrl + Alt + G to create a clipping mask.

Hold Ctrl and Click the victor mask of rectangular shape layer in the layer panel to make a selection.

Click the “create new layer” icon to create a new layer, rename it to “Shadow”, and place it below the image clipping mask.

With the “Shadow” layer selected, select the “Brush Tool” from the toolbar or press “B”, choose a 190px “soft round” brush, set the color to #c7c7c7 and draw a small shadow with the edges of the brush over the bottom edges of the selection to make a nice shadow effect like the image below, then press Ctrl + D to Deselect.

Add the title and a small description, then set the character settings as below:

The title :
– Font : Lato
– Size : 30pt
– Font Weight : Bold
– Anti-aliasing : Crisp
– Align : Left
– Color : #646363

The description :
– Font : Lato
– Size : 16pt
– Font Weight : Regular
– Anti-aliasing : Crisp
– Align : left
– Color : #7e7e7e

Now we are going to add a “Sign Up Now” button, draw a 220x50px rounded rectangle using the rounded rectangle tool(“U”), rename the shape layer to “Sign_Up_Btn”, fill it with the color #eca151 and place it 50px underneath the description text.

Right click the “Sign_Up_Btn” layer, then choose “Blending Option” from the menu that appears(or double click the layer).

Slect “Drop Shadow” style and Apply the setting shown in the image below.

Finally add the text to the button, and set the character settings as below.

– Font : Lato
– Size : 20pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : Center
– Color : #ffffff

Testimonial :

Now we are going to create the testimonial section.

Hit Ctrl + R to show the rulers, drag a guide to the canvas and place it 80px underneath the call to action section.

By clicking the “Create New Group” icon in the layer panel, Create a new group inside the “Body” Group, and name it “Testimonials”.

With the “Testimonials” group selected write the title, align it and apply the following settings to the title characters:

– Font : Lato
– Size : 30pt
– Font Weight : Bold
– Anti-aliasing : Crisp
– Align : Center
– Color : #646363

Hit Ctrl + R to show the rulers, then drag a new guide 60px under the testimonials title.

Activate the rounded rectangle tool, set the radius to 2px.

Create a new group inside the “Testimonials” group, and name it “Testi_box1″.

Draw a 300x240px rectangle align it with the guides we added previously and fill it the color #f9f8f8.

Select the rounded rectangle vector mask in the layer panel.

With the rounded rectangle vector mask selected, activate the Ellipse tool, hold Ctrl and draw a 70x70px cercle, as the image below.

Now we will create the image holder for the testimonial author, for that press “U” than select “Ellipse Tool” from the option bar, make sure the rectangle vector mask is deselected.

Draw a 60x60px cercle at the bottom right of the rectangle.

Go to “File > Place”, choose a picture, give it a name and place it above the cercle shape layer.

Select the image layer and press Ctrl + Alt + G to create a Clipping Mask.

Inside the testimonials box add a text paragraph and the name of the author at the bottom, then apply the following settings for the characters.

Testimonial paragraph:
– Font : Lato
– Size : 16pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : left
– Color : #b5b5b5

Author name:
– Font : Lato
– Size : 13pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : left
– Color : #7e7d7d

Now duplicate two times the “Testi_box1″ group and rename them to “Testi_box2″ and “Testi_box3″.

Align the duplicated groups with the guides we added previously.

Select all the duplicated groups in the layers panel.

Activate the move tool or press “A”, then click “Distribute horizontal centers” icon, To get the same space between the boxes.

Newsletter Section :

In this step we are going to create the newsletter section, we will use patterns for the background with a nice orange color.

Press Ctrl + R to show the rulers, then drag a vertical guide 80px below the Testimonial boxes.

Create a new group inside the “Body” group and name it “Newsletter”.

With the “Newsletter” group selected, activate the “Rectangle Tool” by pressing “U”, draw a 1500x180px and fill it with the color #eca151.

Next will add the pattern overlay to the background, but first we need to load the pattern file to photoshop.

Go to “Edit > Preset Manager”.

Select “Patterns” from the “preset type” drop down menu, click “load” select the pattern file(sub_pattern.pat is included with the downloadable source files at the top of this tutorial) and click Done.

Right click the rectangle shape layer, then select “Blending Options” to open the layer style box.

select “pattern overlay” style, select the “sub_patter” pattern for the pattern option and apply the following setting.

Press “T” to activate the “Horizontal Type Tool”, add your text, align it with the guides and set the characters setting as below.

– Font : Lato
– Size : 53pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : left
– Color : #ffffff

Activate the rounded rectangle tool from the toolbar, set the radius to 50px and draw a white 600x60px rounded rectangle.

Double click the rounded shape and add a “Stroke”(color fill code #e19646).

Select the rounded rectangle tool, set the radius to 50px, draw a 150x40px rounded rectangle and fill it with the color #575451. make sure to align the shape 10px from to and 10px from the right.

Add a line of text, and set the character settings as following.

– Font : Lato
– Size : 17pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : Center
– Color : #ffffff

To make a separator between the name and email fields, select the “Rectangle Tool”, draw a 1x60px rectangle, fill it with the color code #e4e4e4, then align it to the center of the white rounded rectangle.

Press “T” to select the “Horizontal Type Tool”, add titles to the name and email fields and set the character settings as following.

– Font : Lato
– Size : 14pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : left
– Color : #e4e4e4

Footer :

Final Step is the Footer section, we are going to keep it very very simple.

Select the footer group from the layers panel, press “U” to activate the “Rectangle Tool”, draw a 1500x415px rectangle and fill it with the color #393939.

Place the logo(color code i used #333333) in the center of the document and move it 80px underneath the newsletter section.

Select the “Horizontal Type Tool” by pressing “T”, add the navigation menu and copyright text 40px below the logo then apply the following settings the characters.

Navigation menu text:
– Font : Lato
– Size : 16pt
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : Center
– Color : #a6a6a6

Copyright text:
– Font : Lato
– Size : 13pt
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : Center
– Color : #a6a6a6

Activate the “Rectangle Tool”, draw a 370x1px rectangle, fill it with the color #333333 and place between the navigation menu the copyright text.

Finally make sure the layers and groups are organised and use the “crap tool” from the toolbar to crop you document and remove the unwanted white space.

Final Result

And “voila” congratulations you just made a stunning and pixel perfect website in photoshop, please share with us your result in the comment section bellow.

If you have any question Please feel free to ask us in the comment section bellow, we will do our best to answer your questions and don’t forget to subscribe to our newsletter to get the latest news, tutorials and free stuff on pixelhint.

Get Free Update !

Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.

  • Kristina

    Bravo! Very nice tutorial! Any chance to be tutorial, how convert this psd to html5 & css3? :)

    • http://Pixelhint.com/ Pixelhint

      We are going Start a new series of tutorial, from designing a beautiful website in photoshop to converting it to HTML5/CSS3, stay tuned :)

      • Kristina

        Super!! :)

        • http://Pixelhint.com/ Pixelhint

          Make sure to subscribe to our newsletter, so you can receive our emails when we publish new tutorials.

          • Moises morales

            When you gonna start the new tutorial about converting to HTML/CSS3?

          • http://Pixelhint.com/ Pixelhint

            Next week(wednesday) we are going to publish the first part tutorial on how to design and code a website from scratch.

  • Jesse

    Thanks so much for this tutorial!

    • http://Pixelhint.com/ Pixelhint

      You are welcome Jesse :), thanks for you comment.

  • Francis

    This was a very good tutorial. I am quite pleased to have found and completed it, without too much of a fuss.

    • http://Pixelhint.com/ Pixelhint

      We are happy to hear that, and thank you so much for your comment

  • Joe Vanilla

    Thanks guys, that was great!

    • http://Pixelhint.com/ Pixelhint

      You are welcome @Exv1st:disqus

  • Budi Indra

    thankkss…

  • bucur

    Thanks so much for this tutorial is veri good.

  • Janet

    why did you set the angle of global lights to 90° ?

    • http://Pixelhint.com/ Pixelhint

      @janet we set the global lights to 90° just to avoid changing the angle each time we to apply a layer style like inner shadow…