Designing good looking clean and functional Web layouts is an essential part of a Web Designers life. In this tutorial we are going to create a clean and professional Web layout in Photoshop from scratch. Along the way you can learn useful methods to create designs. So get started!

Preview of Final Results

website template

Create a Professional Web Layout Photoshop Tutorial

Resources

Step 1 : Mockup

Before we start designing, we need to plan out the requirements, looks and the functionality. Then we need to fit these ideas into a layout to execute them visually. Mockups and wire frames are greatly useful to create layouts with lot of flexibility. It is a best practice and highly encouraged in the Industry.

I put the below one together using only grey tones. That way we eliminate color from the scene at this point. So that we can concentrate on the layout as a whole and avoid messing up with colors. That gives much freedom to quickly alter and rearrange things. A mockup can be as detailed as you want. For this purpose I am going with the below one. Just briefly defining the layout and what goes where.

img(1a)

Step 2 : Set up the Canvas

So we have a blue print for our layout. Let’s actually put the design together! We are going to create a 960 pixel wide layout. Create a new document at 1200 x 1500.

img(1)

This is a 960 pixel wide layout, so we need define the work area by adding guidelines. Press Ctrl+A to select the entire document.

img(2)

Go to Select > Transform Selection. Shrink the selection down to 960 pixels wide. That is the work area of the layout.

img(3)

Add guide lines to the selection.

img(4)

We need to create some padding between the border and the content that we will add later! With the selection active again choose Transform Selection. Resize the selection to 920 pixels wide. That means 20 pixels of padding each side totaling 40 pixels of padding.

img(5)

Add guides to the selection.

img(6)

Step 3 : Create the Header

Let’s create the header of the layout! Make a selection that is 465 pixels in height.

img(8)

Fill the selection with a gray value first and later use the Layer Styles to add colors and gradients. Follow this throughout the design to maintain a visual hierarchy.

img(9)

Add Gradient to the header. Double click on the layer thumbnail. Select Gradient Overlay. Create the below 2 color gradient. Use the settings.

img(10)

It should look like this.

img(11)

Next need to add a highlight to the header. Create a new layer by pressing Ctrl+Alt+Shift+N. Pick a soft brush with a diameter of 600px. Pick #19535a for brush color. Just click once on the center of the header.

img(12)

Make a selection from the top that is 110 pixels in height.

img(13)

Hit Delete key to delete the selected portion. That looks like below.

img(14)

Shrink it vertically by pressing Ctrl+T.

img(15)

We need to make sure that the highlight spot is perfectly centered to the header. Select layers, header and highlight and press “V” to switch to Move Tool. On the Options Panel select Align Horizontal Centers button.

img(16)

Create a new layer, draw a one pixel highlight line using the Pencil Tool with color #01bfd2.

img(17)

Hide the edges smoothly using a gradient mask. Pick the Gradient Tool, create the below gradient in the Options Panel.

img(18)

Apply the above gradient.

img(19)

Step 4 : Create Texture Pattern

Now create a simple checker pattern and apply to the header. Pick the Pencil Tool, set the brush size to 2 pixels and add two dots that are touching each others corners. Turn off the background and select the dots. Choose Edit > Define Pattern.

img(20)

Create a new layer and place it below the highlight layer. Select the area we want to apply the pattern. Press Shift+F5 to load the Fill dialogue box. Choose the pattern that is just created. And OK.

img(21)

The selection is filled with the pattern. Take a closer look.

img(23)

Blend the pattern smoothly into the header. Add a Layer Mask to the pattern layer. Pick a soft brush and paint with a large soft brush. Pick #ffffff for brush color. Reduce the brush Opacity to about 60% and paint. If you find it too strong then adjust the layer opacity individually.

img(24)

Nicely blended.

img(25)

Subscribe
Notify of
guest
110 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Hina

Useful tutorial

A K Sharma

Hi Dear

It was a wonderful tutorial that I have seen on the web . I tried to copy the entire process but I faced a problem in maintaining the proportions of the type size. your size set for the logotype with size 40 is so big in my Photoshop that I discard the Idea of keeping same size and I used the font size according to my assumption.

I used 14 pt to maintain the size of the logo type to fit on the top . I reduced the size of the “Home” to “Contact”, means navigation bar to only 4 pt to look good.

Now would you please help me in explaining how did it happen and what is wrong with this size ?

I will be really thankful to your for your co-operation

Photoshop Tutorials Staff

Go to Image > Image Size and make sure that your document is 72dpi. Here’s an explanation: https://www.photoshoptutorials.ws/photoshop-tutorials/font-big-small-photoshop/

DELA NOVITASARI

Good evening, finally I got a tutorial about photo manipulation in photshop, this tutorial is very good for me and people who visit this website, thank you for the tutorial, stay safe and keep it healthy.

Andika Aprianus

Thank you for the article. You explained it well, very detailed at each stage of the stages, I might be a little layman with Photoshop. but this article made me looks more skilled. the best is the results have been provided.
I hope you make a new tutorial with themes that may be more different and different concepts. thank you

Veeru

Nice tutorial Thank you

faris

Hi, im a beginner at photoshop. And i’m stuck at making highlight line at step 3. I can’t change the line color to gradient. It keep the color i choose before i draw the line

Photoshop Tutorials Staff

Sorry I don’t quite understand which part you’re stuck on. Can you elaborate on what you’re doing?

youssef

Hello, you can fix that by ading a mask to the layer itself.

Make sure that you click on the gradient tool(G) then go to the layers panel and choose the line layer and add a mask to it. then click on mask and apply the gradient with same colors in the tutorial above.

It will very helpfull for you to understand how mask works, so i reccomand you learn a bit about it,

Goodluck.

bIMLESH

good job

Cristos

The tutorial is very great
Thanks
But how can we add the HTML an links

Anonymous

thank you!!

Albert Sandoval

This tutorial is great for using photoshop.

ClipartFreak

Thanks! A tutorial how to get html css code for this template would be great!

AAG

There are so many free theses out there for web layouts, I am not even sure I would spend the time it takes to create my own :)

Галина

Thank you! Great lesson! Very informative!

Ajish Cheriyan

Wow, its really amazing what you did. Great tutorial, I like to us the information for my future website designs.

newspeed

its awesome, thank you!

Sadia

Hi,

I understand this is a design tutorial…but is there a tutorial for turning the design into an actual website with the coding and stuff?

$hiv

No step for how to add guidelines,for selection !!!

Mari

This tutorial is really nice…Can anyone tell me how to convert these psd files to codings….and run it on my browser……………….?

Katherine

I’m really lost with this step “Blend the pattern smoothly into the header. Add a Layer Mask to the pattern layer. Pick a soft brush and paint with a large soft brush. Pick #ffffff for brush color. Reduce the brush Opacity to about 60% and paint. If you find it too strong then adjust the layer opacity individually.” … is there another tutorial I should look at to understand layer masks? Thanks!

Saif

Some technical change or creative steps can improve the design than what are shown here as tutorial. I believe tutorial are just an example or way, if someone can walk well maintaining that way and look around the road, the learner can make something more appealing design. BTW…this was help thought. Thanks :)

Shohel Rana

This is a great tutorial indeed on creating professional and eye catching website layout. Thank you for sharing.

seth

thanks for this tutorial

Graphic Experts

I’m so late to your post but the post is really immortal. I enjoy your post. Thanks

Anonymous

great tutorial

margaret karanja

I was unable to use the colors but i have achieve the procedure with
differents colors

Free Photoshop Actions

Sign up to our weekly newsletter and get 10 free Photoshop Actions.

Special FX Photoshop Actions