Web Design Tutorial – Learn How to Design a Clean Agency Website

- - Tutorials

In this web design tutorial i will teach you, how to design a beautiful agency website from scratch, i will use adobe photoshop CS5 to design the agency website, you will learn some useful techniques we discussed in previous tutorials, this is the part one of a tutorial series on how to design and code a website from scratch.

Final Result

Final Result

Recourses :

– Images by unsplash.com
– arial & Raleway fonts
– Logos by gertvanduinen.com

Setting up The Document :

Before we dive in, we need to change some default settings in photoshop to get a better final result, we need to change the text unit from points to pixels, to do that go to “Edit > Preferences > Units & Rulers..”

Change Type unit from Points to Pixels.

The sescond option we need to change is the global lighting, go to “Layer > Layer Style > Global Light”.

Change the Angle value to 90°, then click OK.

Now we need to activate the third option which is snap to pixel, this options allow us to get pixel perfect shapes, to activate it press “U” key, if you are using photoshop CS5 click the “Geometry Options” arrow in the option bar(see the image below) and check “Snap To Pixels” option.

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

Press “Ctlr + N” to create a new document, name the document e.g. Heros, set the width to 1500px and the height 2525px.

To keep our document, well-organised we will use groups with colors, go the layers panel and create seven groups as you can see in the screen below, and name each group as following, Header, Slider, Services, Projects, Clients, Call to Action and Footer, right click on a group and select “Group Properties…” from the menu, give it a color, do the same thing for the other groups.

Next we need to set our work area in the canvas using guides, to keep the elements well aligned, in this step we need three vertical guides, we will add more later, go to “View > New Guide…”, and set the following two guides :

For the first guide set the orientation to vertical and the position to 200px.

For the second guide set the orientation to vertical and the position to 1300px.

For the third guide set the orientation to horizontal and the position to 90px.

Header :

First Select the Header group, then press “U” to activate the “Rectangle Tool”, draw a 1500x90px rectangular shape, fill it with white(#ffffff) color and place at the top as shown in the image below.

Grab your logo, align it vertically with guide we added previously, and center it horizontally with the shape we add in the step before.

Create a new group named “Navigation” and place it inside the header group.

Select the “Horizontal Type tool” by pressing “T”, set the font family to Raleway, the font weight to Regular, set the size to 14px, change the anti-aliasing method to Sharp, set the color to #5e5e5e and alignment to right.

Write the navigation menu, and align it with the right guide as shown below.

Slider :

Now it’s time for the slider, Select the Slider group in the layers panel, activate the “Rectangle Tool”, and draw a 1500x750px rectangle, and place it right below the header.

Grab an image you like, and place it above the rectangular shape we created recently.

Go to the layers panel, select the slider image layer, click right and select “Create Clipping Mask”.

Create a new group inside the “Slider” group, and name it “Pagination”.

With The “Pagination” group selected, press “U” to activate the “Rectangle Tool”, then select the “Ellipse Tool” from the option bar, set the fill color to white(#ffffff), draw four 12x12px circles with a space of 15px between each circle, and place them 80px from the bottom of the slider, make sure to center the circles horizontally.

To make the active state for the slider navigation, select three circles in the layers panel, and reduce the opacity to 70%, as shown below.

Now we are going to add the caption to the slider, to do that select the “Horizontal Type Tool” by pressing “T”, set the font family to raleway, the font weight to bold, font size to 50px, the color to #5b5b5b and the alignment to center. write the caption in my example i’am using a dummy sentence, make sure to center it vertically and horizontally with the slider.

Services :

Let’s move to the services section, we need to add one more vertical guide and six horizontal guides to our canvas, follow the steps we discussed previously to add the guides, the following are the guides we need :
– for 1st guide set the orientation to horizontal and position to 760px
– for 2nd guide set the orientation to vertical and position to 533px
– for 3rd guide set the orientation to vertical and position to 583px
– for 4th guide set the orientation to vertical and position to 795px
– for 5th guide set the orientation to vertical and position to 835px
– for 5th guide set the orientation to vertical and position to 1047px
– for 5th guide set the orientation to vertical and position to 1087px

Next Select the “Horizontal Type Tool” by pressing “T” key, set the font family to raleway, the font weight to Bold, font size to 50px, alignment to left, change the fill color to #5e5e5e, and then write the title for example “What We Do”, align the title with the guides we added previously as shown in the image below.

Inside the “Services” group create a three new groups, and name them as following “S1”, “S2”, “S3″(abbreviation of Service3).

Select The “S1” group in the layers panel, press “T” to activate the “Horizontal Type Tool”, set the font family to raleway, the font weight to semibold, font size to 20px, set the alignement to left, and change the color to #5e5e5e, write the service title for example “We Design.”, and align it with the guides we add previously.

With the The “Horizontal Type Tool” still active, set the font family to raleway, change the font weight to regular, the font size to 14px, set the alignment to left, and change the color to #8d8c8c, add a short description and place 40px below the title as you can see in the image below.

Create a new group and name it “read more”.

Pick the “Horizontal Type Tool” by pressing “T”, use relway as the font, set the font weight to regular, the font size to 13px, the alignment to left, and change the color to #6d6d6d, then write “read more” for example all lowercase, place it 30px below the short description.

let’s add a small arrow to read more text, with the “Horizontal Type Tool” selected, use the same font setting as the step before just change the font family to arial, then add the arrow charactere “→” and place 5px to right of the read more text.

Duplicate all the layers inside “S1” group, to “S2” and “S3” groups.

Align the “S2” and “S3” groups with the guides as you can see in the image below, and change the titles.

Projects :

Now time for the projects section, first we need to add two more Horizontal guides at 1050px and 1150px.

We are going now to add a separator to separate the “Services” section from the “Projects” section, select the “Projects” group, press “U” to activate the “Rectangle Tool”, set the fill color to #f5f5f5, draw a 1100x1px shape and place it 100px right below the “Services” section.

Pick the “Horizontal Type Tool” from the toolbar, write the title for example “Our Work”, make sure to align the title with the guides we added previously, as the image below and set the characters settings as following :
– Font : raleway
– Size : 50px
– Font Weight : Bold
– Anti-aliasing : Sharp
– Align : left
– Color : #5e5e5e

Create a new group named “read more”, and place it inside the “Projects” group.

With the “Horizontal Type Tool” still active, write the following “read more”, align it with the guides and place it 40px below the title as shown in the image below, apply the following settings to the characters:
– Font : raleway
– Size : 14px
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : left
– Color : #6d6d6d

Use the same settings for the characters as the previous step, add the arrow character “→” and place it 10px to the right of “read more” text as you can see below.

Create a new group inside the “Projects” group and name it “P1″(abbreviation of Project1).

Press “U” to pick the “Rectangle Tool”, set the fill color to #f2f2f2, draw a 333x300px rectangle and align it with the third left guide as shown in the image below.

Go the layers panel, right click the shape layer we just created, and select “Blending options…” from the menu that appears.

Select the stroke effect and apply the settings shown in the image below(color #eeeded).

Place a logo inside the rectangular shape we created recently, and change it’s color to #e3e3e3, make sure to center it and align it vertically.

Duplicate the “P1” group in the layers panel, rename it to “P2”, align it with the right vertical guide, and use a different logo.

Clients :

Next Step is working on the Clients section, we need to add two additional horizontal guides at 1550px and 1650px.

Select the “Clients” group, press “U” to select the “Rectangle Tool”, change the fill color to #f5f5f5, draw a 1100x1px and place it 100px below the “Projects” section.

Pick the “Horizontal Type Tool”, use the raleway as a font, set the size to 50px, the font weight to bold, set the alignment to left, change the color to #5e5e5e, write the title for example “Our Happy Clients.”, and align it as shown in the image below.

Grab the clients logos place them in the canvas and then align them.

Select the Logos layers in the layers panel, press “V” then click the “Distribute horizontal centers” icons.

Call To Action :

Next we will create the Call To Action section, first we need to add another horizontal guide, so go “View > New Guide…” set the orientation to horizontal and the position to 1840px.

Select the “Call To Action” Group in the layers panel, pick the “Rectangle Tool”, set the fill color to #fafafa, draw a 1500x327px rectangle and align it with the horizontal guide we added recently.

Press “T” to select the “Horizontal Type Tool”, use the raleway font, change the font size to 25px, set the font weight to Bold, the alignment to center, change the color to #5e5e5e, and write the call to action title, for example “Ready To Start Your Project?”, place it 100px from the top of the rectangular shape we created in the step before and center it with the canvas.

Create a new group inside the “Call To Action” group and name it btn(abbreviation of button).

Select the “btn” group in the layers panel, press “U” to select the “Horizontal Tool”, then select the “Rounded Rectangle Tool” from the option bar, set the radius to 2px, change the color to #ff4242, draw a 250x55px, center it horizontally and place it 50px below the call to action title.

Pick the “Horizontal Type Tool”, write the following sentence “yes we are ready”, make sure to align it and apply the following settings to the characters :
– Font : raleway
– Size : 18px
– Font Weight : Regular
– Anti-aliasing : Sharp
– Align : center
– Color : #ffffff

Keep the same characters settings as the step before, only change the font to arial, add the following arrow character “→”, place it 10px to the right side of the “yes we are ready” sentence as shown in the image below.

Footer :

Next we are going to design the footer section, pick the “Horizontal Tool”, set the color to white(#ffffff), draw a 1500x357px rectangular shape and place it right below the call to action section.

We need two more guides, add two horizontal guides at 2267px and 2335px.

Create Three new groups, place them inside the “Footer” group and name each groups as shown in the image below.

Select the “Rights” group we just created, place the logo in the canvas, change it’s color to #e7e6e6 and align it with guides.

Pick the “Horizontal Type Tool”, select raleway as the font, set the font weight to regular, the font size to 12px, the alignment to left, change the color to #8d8c8c, write the rights text e.g. “© 2014 copyright pixelhint – All rights reserved” and align it with the last horizontal guide and the first left guide.

Now let’s add the title for the social media section, select the “Horizontal Type Tool” by pressing “T”, set the font to raleway, the font weight to bold, the font size to 18px, set the alignment to left, change the color to #5e5e5e, write the title for example “Stay Tuned” and align it as shown in the image below.

Follow the same process as the step before, and add the titles to the “About us” and “Address” sections.

Let’s get back to the “social media” section, with the “horizontal type tool” still selected, use the raleway font, change the font weight to regular, the font size to 14px, the color to #8d8c8c, write the social media names e.g. “Facebook”, “Twitter” , “Google Plus”, place each one 30px under the other and 35px from the left.

Add the social media icons, and align them with guides as you can see in the image below.

Next we are will add links to the “About” section, select the “About Us” group, pick the “Horizontal Type Tool”, use the same setting for the font as the step before, add the following links as an example “Our Company”, “Our Team”, “Blog”, place each one 30px below the other, and align the with guides we added previously.

Last but not least, the address section, select the “Address” group in the layers panel, press “T” to select the “Horizontal Type tool”, we are going to use the same font setting as the previous step, use the raleway font, set font size to 14px, the font weight to bold, alignment to left, use #8d8c8c for the color, write the address i’am writing in my example a fake address “1012 14th Street Northwest
Washington, DC 20005” and make sure to align it.

Go to “window > Character” and change the line height to 40px.

With the “Horizontal Type Tool” still selected, keep the same characters settings, only change the font weight to bold, add the phone number e.g.”(202) 737-1499″, place it 30px below the address and align it with the last horizontal guide.

These are the steps to create a simple, clean and beautiful website from scratch using photoshop, we used various techniques to achieve the clean look and to keep our work environment clean and well-organised.

In the part two of this tutorial, i will teach how to convert the template we designed in this tutorial, from a PSD template to HTML5/CSS3 template, with cool animations using JQuery.

Subscribe to the newsletter in the box below, to get notified when we publish the part two of this tutorial, if you have any question let me know in the comment box below.

Part two – Learn how to convert a PSD template to HTML5/CSS3

Get Free Update !

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

  • Chandra shekar

    It must be very informative post for the beginners.

    • Absolutely @disqus_W36qvCB9vZ:disqus.

  • Nithya

    Is i can download photoshop free of cost?,or is it payed?

    • khan

      gimp is free to use instead of Photoshop. Photoshop is pretty expensive.