How to Design a Classic Corporate Web Template in Photoshop

AD

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

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

Photoshop Tutorial

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.

Photoshop Layout Tutorial

Step 2

To start, I filled this color in the background.

Designing Web Layout

Step 3

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

Designing Photoshop Layout

Step 4

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

Designing Stylish Template

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.

Stylish Web Layout

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.

Photoshop Tutorial

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.

Photoshop Layout

Step 9

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

Web layout Tutorial

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.

Photoshop Tutorial

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.

Tutorial of Photoshop

This is what we are making.

Free Web Layout

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.

Web Layout

 

Step 13

Add image on this block.

Tutorial Photoshop

Step 14

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

Free Photoshop Tutorial

Result – So Far

This is what we have made so far.

Easy Web Layout Tutorial

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.

Photoshop Template Tutorial

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.

Stylish Photoshop Template

Step 17

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

Free Layout

Free Web layout

Step 18

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

Photoshop Layout

This is the result of one block of content area.

Free Web Design

Step 19

After some working, you should reach here.

Tutorial of Photoshop

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.

Stylish Web Layout

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.

Photoshop Tutorial

Final Result

Photoshop Tutorial

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.

create free website wix below post

Further Related Readings

Comments
  1. isshmen May 17, 2011 at 1:32 pm

    Wow. Great tutorial.
    Thanks !

  2. shumaila May 18, 2011 at 3:00 am

    nice work……………………..

  3. mark May 19, 2011 at 12:02 am

    now- I have to ask this question (even if it’s a dumb question) ..

    where did the photographs come from? are they some sort of stock photographs or were they taken by you?

    1. Tayyab May 19, 2011 at 2:12 am

      @Mark

      We thank you for being sincere to all those artist who are selling their goods online, and not letting anyone steal it. We really appreciate that.
      The photographs we use is either royalty-free stock, or they are taken from posts shared on Designzzz. Sometimes, the authors also use images which they own.

  4. Gurvinder Singh November 30, 2011 at 6:12 am

    I am really thankful to you
    This is great tutorial for me..

    1. Jawad December 1, 2011 at 7:14 am

      Hello Gurvinder,

      very glad to know I was helpful 🙂

  5. Sajid December 6, 2011 at 11:49 pm

    nice tutorial. bt how i put images in adobe photoshop that you used in templates.

    1. Jawad December 7, 2011 at 6:30 am

      Hi Sajid,

      I have provided link-backs to all the pictures, you can easily download them. You can also use any other pictures

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved