Today we learn how to make a personal blog / website template. Its layout and color scheme will suit personal and small business sites. This is a simple Photoshop tutorial and even beginners should be able to follow it easily. 

It’s hardly a surprise that we will be making this template in Adobe Photoshop and after a few days we’ll publish the PSD file for everyone to download it. Stay tuned to our postings by Subscribing to our RSS or Following us on Twitter.

Final Result

Web Design Photoshop Tutorial

Step 1

Let’s start with the obvious step of opening a blank file. Today I’m giving it a size of 1200 x 1200 pixels. This is only because this template will contain a background image in surrounding margins of the web design. The design will be in the center part which will be about 900 pixels and the rest is marginal space.

Tutorial of Photoshop

Step 2

Now we fill the background with color # d9c3a2. The result should be like the image below.

Free Web Template

Step 3

I was going to remove the logo design, but let’s put in the tutorial, you might derive some design inspiration out of it.  I have created a bulb looking path shape and filled it with red color. In the image below, I’m adding a drop shadow to that shape. You can find the values in the reference image.

Photoshop Layout

Step 4

It’s time for some Bevel effect to make it look a little more 3D.

Design Photoshop Layout

Step 5

Let’s do some finishing touches, and for that we add a gradient. Here are the values.

Elegant Layout

Step 6

These are the color values of the gradient.

Photoshop Template Tutorial

Step 7

And last but not the least, a small 1px stroke to make it look above the template.

Free Tutorial of Photoshop

Step 8

Time to add company name, this will accompany the logo.

Free Photoshop Tutorial

Step 9

After adding the company slogan, we should be getting this result. If you got the same, let’s move forward.

Free Web Layout

Step 10

Navigation Bar is next. We make a space for it in the usual manner, we create a path with Rectangle Tool and then we convert into a marquee selection by pressing Ctrl + Enter and the selection with plain white color.

Free Photoshop Tutorial

Step 11

Add a little stroke to border the bar.

Web Layout Design

Step 12

Filling a little gradient in the background wouldn’t be a bad idea.

Free Template of Photoshop

Step 13

Just the way we created space for the navigation bar, now we are creating its buttons. Color number is written in the image below.

Design Free Web Layout

Step 14

Some stroke around the button.

Free Web Layout

Step 15

Time for the search bar. I drew two shapes, one for the “search” button and one for the search text box.  Method of drawing and filling it with white color is the same as the previous steps.

Free Design of Web Layout

Step 16

After filling the navigation bar with options, below is the final look of the navigation bar, with a mouse hover effect.

Free Photoshop Template


Step 17

Now we are taking on the Featured Area. I believe a featured area is necessary for almost all websites. It enhances visitor’s experience and allows them to view the important things easily. I’ll create the space for this area using the same old technique of making a path with Rounded Rectangle Tool and converting it to a selection and filling in the color depicted below.

Free Web Layout

Step 18

Let’s add a little drop shadow, these are the little graphics that make a template look catchy.

Template Designing

Step 19

Now some stroke, it is essential that you give every object a border so that it looks more visible.

Free Stylish Template

Step 20

This is the shape we are looking to make.

Tutorial of Photoshop

Step 21

And after some effort, this is what we intend to make. A thumbnail and a description paragraph added. You can also make it a slideshow by using some JavaScript or Flash.

Free Web Template Photoshop Tutorial

Step 22

This is almost done, now we are making a background for the headings in the content area.

Free Design Photoshop Tutorial

Step 23

And the usual Drop Shadow effect we have been using should be applied here as well.

Free Photoshop Web Layout

Step 24

And now we have added all the usual content. Below is the result image.

Free Elegant Photoshop Tutorial

Step 25

The footer is simple as 1 2 3.

Free Tutorial of Photoshop Web Layout

Final Result

This is what you have made. Be proud 🙂

Web Design Photoshop Tutorial

PSD of this layout will be offered after 2 days – so you’d better stay in touch by Subscribing to our Free Rss Feed or Follow us on  Twitter.

Pin It