SEARCH
  Tutorials Photoshop Web Layout How to Create a Clean Website Layout in Photoshop

How to Create a Clean Website Layout in Photoshop

YuriBril Web Layout May 24, 2013

Hi Guys!

We're a huge web design resource and actually we were freaking boring till some day. But that's something we're already working on. And rest assured that today's tutorial will bring you some useful web design skills.

This is an intermediate level tutorial and some may seem to be tricky, but why not have a try? Let's get the ball rolling :)

But before we start check this useful resources that will help you to create stunning web design layout:

First of all,look at the final result of our tutorial. Today we're going to create this lovely website layout:

Clean Website Layout in Photoshop

To design a web layout like this,you should download the "Linecons Free - Vector Icons Pack"

By the way, you can download a free template based on this design: Free Business Template.

Step 1

Let's start at the beginning. Just fire up your Photoshop and create a new document (CTRL+N). See the parameters below.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 2

Now you should add some pattern to your background.

Layer Style -> Blending options-> Pattern Overlay. Look at the screenshots below:

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 3

We want to create an awesome design, yeah? That's why we should use a grid system for designing. You can easily create a solid visual and structural balance of websites with grid-based designs.

Put some grids to your design with intervals of 60px and 20px.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 4

So... now it is time to design the menu of your future website. Use the Rounded Rectangle tool to create it (radius - 3px). The width of your menu is 940px, the height is 34px.

I think that it is an easy task to create a website's menu. To be sure, look at the images below:

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. Use the settings that you can see on the screenshots:

Clean Website Layout in Photoshop

Blending options-> Inner Shadow

Clean Website Layout in Photoshop

I chose the #6bafff color for this menu bar.

Clean Website Layout in Photoshop

Step 5

Let's add some text to our menu. Use the Horizontal Type Tool for it.

You can create your design with any font you like. I used the Aller [bold] font. The size is 14px.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 6

All the menu buttons are links and the designer should show how their hover state looks like. So, create are rectangle (the color that I've used for it is #5a90e5).

Clean Website Layout in Photoshop

Our result:

Clean Website Layout in Photoshop

Step 7

Every decent website has a search form. Let's create it too :)

Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26px

Clean Website Layout in Photoshop

Add some inner shadow: Blending Options-> Inner Shadow

Clean Website Layout in Photoshop

Blending Options-> Color Overlay, color- #5a90e5

Clean Website Layout in Photoshop

Use our favorite Photoshop tool one more time :) Create one rectangle with dimensions 41px and 32px

Clean Website Layout in Photoshop

Blending Options -> Drop Shadow
Blending Options -> Inner Shadow

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Blending Options -> Color Overlay (color - #6bafff)

Clean Website Layout in Photoshop

Now it is time to use icons that we've downloaded at the beginning of this tutorial. Open the "Linecons Free - Vector Icons Pack and find the search icon there. Just apply some bells and whistles to it.

Clean Website Layout in Photoshop

Here is our final result for the search form:

Clean Website Layout in Photoshop

Step 8

Social media connections are very useful and important for every website. That's why today we'll also learn how to create a simple Facebook button. Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button

Clean Website Layout in Photoshop

Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size - 16px

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Choose the Pen Tool and cut off half of this square.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Edit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle

Select all your "Facebook" layers and merge them (Ctrl+E).

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Blending Options-> Inner Shadow:

Clean Website Layout in Photoshop

Blending Options-> Color Overlay (#c1cac5 )

Clean Website Layout in Photoshop

Now add the "follow" text to our Facebook button and play with its blending options.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Try to create your Facebook logo for this button. For example, you can create the "F" letter, decorate it with a blue color (#5a90e5).

Clean Website Layout in Photoshop

Play with Blending options (add a white shadow)

Clean Website Layout in Photoshop

WOW! We did it :) Look at the final result of our menu bar:

Clean Website Layout in Photoshop

Step 9

Create a new shape: width 940px, height 372px

Clean Website Layout in Photoshop

As always, add some shadow:

Clean Website Layout in Photoshop

And a border: Blending Options-> Stroke (20px, color- #6bafff)

Clean Website Layout in Photoshop

Step 10

To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 11

Use a bunch of free icons again. I've selected the following icons: "settings","bubble", "photo","world"

Add them to our design (don't forget to use the grid), distance - 180px

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 12

Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px.

Clean Website Layout in Photoshop

Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Copy the styles of this layer and add it to all your icons:

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

WOW! Look at this amazing result!

Clean Website Layout in Photoshop

Step 13

Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 14

Create a Read More button with the help of the tools that we've used before.

Blending options-> Inner Shadow, Drop Shadow, Color Overlay (#919392).

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 15

Add the "Read more" text to our button.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 16

Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 17

Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.

Use the Rounded Rectangle tool to create a square (hold down the Shift button).

Radius - 3px, width and height - 138px.

Clean Website Layout in Photoshop

Go to Blending options -> Stroke to create a border with the settings below:
Size- 20px, color #919392

Clean Website Layout in Photoshop

Copy and paste this element 5 times :) Place these squares with the interval of 20px.

Clean Website Layout in Photoshop

Step 18

With the help of a clipping mask, insert the image into the square.

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

As you can see, you really can use this block for all sorts of purposes. Result:

Clean Website Layout in Photoshop

Step 19

The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.

Now it is time to design a cool footer for our cute website layout. Let's make it bright :)

Add some gradient, for example #3a8df1 - #6bafff, and inner shadow

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Step 20

We'll add three blocks into our footer: Quick links, About Us and Follow Us

Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:

Clean Website Layout in Photoshop

Clean Website Layout in Photoshop

Use the Arial Regular font for the text in the About Us section (12px).

Clean Website Layout in Photoshop

The text for the Quick Links section - 22px.

Clean Website Layout in Photoshop

Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter

Clean Website Layout in Photoshop

Woohoo! We did it! The final result of our tutorial:

Clean Website Layout in Photoshop

More useful information here:

Freebies: Free HTML Template

Download this free business HTML template here and don't forget to push share buttons, because sharing is sexy ;)

ABOUT THE AUTHOR

Yuri Bril

I'm crazy about design and other creative stuff. Plus I love making fun of my colleagues.If you have any questions visit my Facebook page.

subscribe to newsletter