How to Design a Classic Corporate Web Template in Photoshop

Wouldn’t you agree it’s time you learn how to make a business web template in Photoshop? Say one with classy elegant look, suitable for any business or corporate website? This template can be adjusted to make a HTML-CSS based template or if you work with WordPress, it won’t take much effort to convert it into a WordPress theme.

Thanks for appreciating the previous two templates we shared (The DesignzzzMag and Premium Quality Web Gallery Template).

This is just a tutorial – keep in mind we intend to publish a downloadable PSD in 2 days, so it might be a good idea to stay tuned by Subscribing to our RSS or Following us on Twitter.

• Update:

To Download the PSD File of this template, go to

Free Premium Quality Classic Corporate Web Template

Before we go further remember to Subscribe to our Free Rss Feed or Follow us on Twitter to stay updated with our postings

We aim to keep up with this routine of sharing web templates for the time to come. Should you have any particular kind of design in mind, just say the word and we’ll do our best to meet your requests.

The Final Result

Step 1

Open a blank PSD file. This is the standard website size 960px wide (height doesn’t matter), and of course I am using resolution of 72.

Step 2

To start, I filled this color in the background.

Step 3

After that, I apply some noise. This would give it the eye catching look.

Step 4

Another layer applies Gradient mask on the Background layer. That shows some Glow effect and consequently creates an astonishing effect.

Step 5

Let’s create a search bar now, I selected Rounded Rectangle Tool from with Paths option selected in the properties bar. The screenshot below tells the rest.

Step 6

After drawing the path, hit CTRL + Enter to make it a marquee selection. I filled this marquee selection with solid white color, but if you want, you can add some shadow as well, looks good. And in the search box, I’m adding a Magnifying Glass symbol. You can find this symbol in the properties bar of Custom Shapes Tool.

Step 7

Time for Navigation bar. Same method here, made a path and converted into a marquee selection.

Step 8

In the space for navigation bar I have added a Solid Gray color background. Next thing to incorporate is the search bar,  company logo and slogan.

In the navigation bar buttons, a solid line on the top of the button will work as the hover effect in the menu. You can see the example below. Of course there could have been some gradients, or other graphics, but I just keep it simple.

Step 9

Now we add featured area large thumbnail on the right, and also some description on the left.

Step 10

In the thumbnail areas, keep on adding pictures as you make your template, this helps you a lot to define the color scheme. In the screenshot below, you can see I have added a picture right away.

Step 11

Our Header is complete, now we add a reel type scroll. This scroller can be used as the thumbnails for the featured area slideshow, or it can be a whole other thing, you decide. I am adding Arrow Buttons on the left and right, Custom Shapes Tool is once again being very helpful.

This is what we are making.

Step 12

Now to fill in this scroll, we add thumbnails, but before that, I have added a background of 90% black color, which is a Solid Gray of course. I have also added a small stroke, you can check the stroke values in the next step. Drawing method is same, draw a path with Rounded Rectangle Tool and press Ctrl + Enter.

Step 13

Add image on this block.

Step 14

After adding the blocks and inserting images, we get a very nice thumbnail bar.

Result – So Far

This is what we have made so far.

Step 15

Now we take on the next section – the content area. We added block in this section and give a minor stroke to this block.

Step 16

I used the same background color which we have been using, here are the stroke values. 2px in size, normal blend mode and position is Outside.

Step 17

In this block we add a button of Read More. Use this Gradient to make a good looking Read More button.

Step 18

We see the final result of Read More button and we added block for the image and insert an image.

This is the result of one block of content area.

Step 19

After some working, you should reach here.

Step 20

All that’s left is the footer, I selected a color and added some noise.  After adding the noise we get a very nice effect in our template footer.

Step 21

After inserting the regular data, such as Important Links, Contact Info, Social Media Icons and of course, Logo, we get a very beautiful footer. That shows your perfection in this whole Template.

Final Result

This is just a tutorial – keep in mind we intend to publish a downloadable PSD in 2 days, so it might be a good idea to stay tuned by Subscribing to our RSS or Following us on Twitter.

Follow Designzzz on Facebook