Web Design Tutorial - Learn How To Design An Agency Website

22/5/2014
Web Design Tutorial Learn How to Design an agency website.
TUTORIALS
FREEBIES
ABOUT
CONTACT
Web Design Tutorial Learn

How to Design a Clean
Agency Website
Pixel Hint - May 21, 2014 - Tutorials
Popular Posts
MAR 11
2014
In this web design tutorial i will teach you, how to design a beautiful
Giveaway 5x Dribbble
Invite + 1 Year Dribbble Pro
Account Subscription.
agency website from scratch, i will use adobe photoshop CS5 to

design the agency website, you will learn some useful techniques we
MAR 1
discussed in previous tutorials, this is the part one of a tutorial series
2014
on how to design and code a website from scratch.
http://pixelhint.com/web-design-tutorial-learn-how-to-design-clean-agency-website/
Web Design Tutorial Learn

How to Design a Website
From Scratch in Photoshop
1/56
22/5/2014
MAY 8
2014
APR 15
2014
Magnetic Free HTML5

Responsive Photography
Website Template
Crafty Free HTML5

Responsive Template
Type keyword and hit enter...
Find Us On Facebook
2/56
22/5/2014
Final Result
- th i s d e a l i s a va i l a b l e fo r l i m i te d ti m e o n l y -
Download Source Files
Recourses :
- images by unsplash.com.
- fonts : Raleway & Arial.
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..
3/56
22/5/2014
Change Type unit from Points to Pixels.
4/56
22/5/2014
The sescond option we need to change is the global lighting, go to

Layer > Layer Style > Global Light.
5/56
22/5/2014
Change the Angle value to 90, then click OK.

6/56
22/5/2014
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.
7/56
22/5/2014
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.
8/56
22/5/2014
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.
9/56
22/5/2014
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 :
10/56
22/5/2014
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.
11/56
22/5/2014
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
12/56
22/5/2014
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.
13/56
22/5/2014
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.
14/56
22/5/2014
Write the navigation menu, and align it with the right guide as shown
below.
Slider :
Now its 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.
15/56
22/5/2014
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.
16/56
22/5/2014
Create a new group inside the Slider group, and name it

Pagination.
17/56
22/5/2014
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.
18/56
22/5/2014
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 iam using a
dummy sentence, make sure to center it vertically and horizontally with
19/56
22/5/2014
the slider.
Services :
Lets 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
20/56
22/5/2014
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.
21/56
22/5/2014
Inside the Services group create a three new groups, and name
them as following S1, S2, S3(abbreviation of Service3).
22/56
22/5/2014
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.
23/56
22/5/2014
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.
24/56
22/5/2014
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.
25/56
22/5/2014
lets 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.
26/56
22/5/2014
Align the S2 and S3 groups with the guides as you can see in the
image below, and change the titles.
27/56
22/5/2014
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

28/56
22/5/2014
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
29/56
22/5/2014
Create a new group named read more, and place it inside the
Projects group.
30/56
22/5/2014
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
31/56
22/5/2014
Size : 14px
Font Weight : Regular
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.
32/56
22/5/2014
Create a new group inside the Projects group and name it P1

(abbreviation of Project1).
33/56
22/5/2014
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.
34/56
22/5/2014
Go the layers panel, right click the shape layer we just created, and
select Blending options from the menu that appears.
35/56
22/5/2014
36/56
22/5/2014
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 its color to #e3e3e3, make sure to center it and align it
vertically.
37/56
22/5/2014
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
38/56
22/5/2014
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
39/56
22/5/2014
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.
40/56
22/5/2014
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.
41/56
22/5/2014
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
42/56
22/5/2014
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).
43/56
22/5/2014
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.
44/56
22/5/2014
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
Align : center
Color : #ffffff
45/56
22/5/2014
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 :
46/56
22/5/2014
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
47/56
22/5/2014
name each groups as shown in the image below.
Select the Rights group we just created, place the logo in the
canvas, change its color to #e7e6e6 and align it with guides.
48/56
22/5/2014
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 lets add the title for the social media section, select the
Horizontal Type Tool by pressing T, set the font to raleway, the font
49/56
22/5/2014
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.
Lets get back to the social media section, with the horizontal type
50/56
22/5/2014
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.
51/56
22/5/2014
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 iam writing in my
example a fake address 1012 14th Street Northwest
Washington, DC 20005 and make sure to align it.
52/56
22/5/2014
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.
53/56
22/5/2014
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 wellorganised.
In the next part 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, thanks for your time and see you
soon.
54/56
22/5/2014
LIKE IT
GET FREE UPDATE !

Join our mailing list today and
receive exclusive web design
tutorials and high quality free web
resources.
55/56
22/5/2014
Ghostery blocked comments powered by Disqus.
Previous Post
Copyright 2014 pixelhint.com - All Rights Reserved.
56/56

Web Design Tutorial - Learn How To Design An Agency Website

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design Tutorial - Learn How To Design An Agency Website

Uploaded by

Copyright:

Available Formats

22/5/2014

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn

agency website from scratch, i will use adobe photoshop CS5 to

discussed in previous tutorials, this is the part one of a tutorial series

on how to design and code a website from scratch.

Web Design Tutorial Learn

Web Design Tutorial Learn How to Design an agency website.

Magnetic Free HTML5

Crafty Free HTML5

Type keyword and hit enter...

Web Design Tutorial Learn How to Design an agency website.

Download Source Files

Setting up The Document :

Web Design Tutorial Learn How to Design an agency website.

Change Type unit from Points to Pixels.

Web Design Tutorial Learn How to Design an agency website.

The sescond option we need to change is the global lighting, go to

Web Design Tutorial Learn How to Design an agency website.

Change the Angle value to 90, then click OK.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Press Ctlr + N to create a new document, name the document e.g.

Web Design Tutorial Learn How to Design an agency website.

To keep our document, well-organised we will use groups with colors,

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

center it horizontally with the shape we add in the step before.

Create a new group named Navigation and place it inside the

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Create a new group inside the Slider group, and name it

Web Design Tutorial Learn How to Design an agency website.

With The Pagination group selected, press U to activate the

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Select The S1 group in the layers panel, press T to activate the

Web Design Tutorial Learn How to Design an agency website.

Create a new group and name it read more.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

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

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

We are going now to add a separator to separate the Services

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Create a new group inside the Projects group and name it P1

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Web Design Tutorial Learn How to Design an agency website.

Place a logo inside the rectangular shape we created recently, and