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.
To Download the PSD File of this template, go to
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
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.
To start, I filled this color in the background.
After that, I apply some noise. This would give it the eye catching look.
Another layer applies Gradient mask on the Background layer. That shows some Glow effect and consequently creates an astonishing effect.
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.
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.
Time for Navigation bar. Same method here, made a path and converted into a marquee selection.
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.
Now we add featured area large thumbnail on the right, and also some description on the left.
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.
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.
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.
Add image on this block.
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.
Now we take on the next section – the content area. We added block in this section and give a minor stroke to this block.
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.
In this block we add a button of Read More. Use this Gradient to make a good looking Read More button.
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.
After some working, you should reach here.
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.
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.