How to Design an Elegant Small Business Web Template

FINAL RESULT

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.

Step 2

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

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.

Step 4

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

Step 5

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

Step 6

These are the color values of the gradient.

Step 7

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

Step 8

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

Step 9

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

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.

Step 11

Add a little stroke to border the bar.

Step 12

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

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.

Step 14

Some stroke around the button.

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.

Step 16

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

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.

Step 18

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

Step 19

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

Step 20

This is the shape we are looking to make.

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.

Step 22

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

Step 23

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

Step 24

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

Step 25

The footer is simple as 1 2 3.

FINAL RESULT

This is what you have made. Be proud