Professional Business Web Template

In this tutorial I am going to show you how to design a template for your site.

Before we start, I would like to make a few rules:
1. This is for only viewing rights, do not submit this to any other site with out Deathcult's or Razor's approval.
2. Even though this is a tutorial, don't copy it exactly; use your own touches to make it better than the one you are learning from.
3. If possible make sure to give credit to the creator of this template which is me (Deathcult)
4.I would like to give credit to hw0rdz for making all the edits

This will be the template you will be making:



Now that you have seen the rules lets get started:

Step 1:This is not required if you are not planning on selling it to other people, but if you do plan on selling your templates make sure to organize them by folders which will make it easier for you when you want to edit later on:



Step 2: This is one of the hardest things for someone new to making templates, the proper size of the template, The size of the template depends on the type of template you are going to be making, For this tutorial I am going to start off with the size of 769pixels for the width and 650pixels for the height, If you do not use the whole canvas that is OK, you can always crop it later on. Make sure to use the same settings as below:




Step 3: After you completed the step above and clicked okay you will have a transparent canvas/document, go to your layers pallette if your layers palette is not showing go to Windows in the taskbar of Photoshop and click layers on the drop down box. Now you should see a box like the picture below if you see that you done it
right. Now that you see the layer palette look at the bottom of your layer palette, you should see a folder looking icon. If you do not see it refer to the picture below:



Step 4: After you have clicked the folder icon, you should see a folder pop up. Rename it to what ever you want I usually just call it Background like below, if you do not know
how to rename it, just click on the text of the folder(on the layer palette) it should become editable:



Step 5: When you have a layer in your new folder then you're ready to go, if you do not know how to, then look at the picture below to find out:



Step 6: Now let start making your template, first get your paint bucket tool and chose a color that you will want your background to be, I will choose #ffffff which is white.
Then use your paint bucket tool and put it over the document and click on it, it should change from a transparent to a white like the picture below:



Step 7: Now I am going to show you how to make your side bars: first make a new document by going to File>new. The size is up to you, but make sure you use at least 650pixels for the height because it will not look right if you do not, use 65pixels for the width, then fill it with any color, then go to blending options and use these settings:

If you did it right it should come out to something like this:

Note: do not mind the black around it; I had to use a black stroke so you could see it.

Now to make the bulge on the right side of the template, get your rectangular marquee tool and select a small area on the sidebar like so:


Then go to File>new then use 6pixels for the width and 12pixels for the height then make an image like this but make sure you zoom to 1600 before you work on the image.



You can not copy this image because it will not work, the image is too big



After you're done all of that, you should have something like this:

Make a new layer then go to image>apply image, then select it hitting Ctrl A then hit Ctrl C (to copy it) then go to your template you are making then hit Ctrl V (to paste it) What you just did was simply copy the image from one file, and paste it into the template file.

Step 8: Now that you have your sidebar, you now know your boundaries. On the template, I put the sidebars on the edge, but that is up to you, when you're working with yours.

Step 9: Now that you have your sidebars done, the next step is to work on the logo,
this is what mine looks like:


Now that you've seen the logo, let me show you how I did it

Step 10: Now like before, make a new folder and call it navigation. After you do that, take our your Rectangular marquee tool and make a small square, It can be whatever size your banner is going to be. I am using 212 for width and 112 for height, but it is up to you, what ever fits your template. Now, fill it with what ever color you want I chose a dark red which worked really well with my template.


Step 11: Now that you have your basic banner going on, now it's time to add some minor stuff to it. To add the glossy effect, get your rectangular marquee tool out again, and select the top half of the banner, fill it white now use these settings:



Now that you have those setting yours should look like this, but I added extra detail to it:


Step 12: Next it for the Navigation make a new folder and call it navigation like the Picture below:



Now that you have a picture like mine, shown above, take our your rectangular marquee tool and make a selection like mine:


After that, fill it with any color. Now go to that layer you just filled, go to blending option and use these settings below:


You should have something like below:


Now it is time for adding extra details like scanlines and indents
Note:If you do not know how to make scanlines, I will tell you how.

First: Make a new document with the info below:


Now get your pencil and use settings like below:


After you got that zoom to 1600% using the button like this:

Now make a pattern like this:
(Note: this is what is looks like when you have zoomed in 1600%)

Now go to Edit>Define pattern and save it to what ever you want and hit okay, and there you go. Now it is time to go back and add it to your navigation.

Navigation extra Step: Now go to the navigation bar you made, there should be nothing butt the gradient we made earlier, now go to your layers palette and ctrl+click. Now make a new layer and go to Edit>Fill, now use these settings:
After you have done that, you should have something like this

Now use these settings:

Now you should have something like this:


Now that you have that, it is time for the indents like promised. Make a new layer and make something like I did on my template:


Now set that layer to 'soft light' with the opacity to 100%. Now go to your blending options, then add a drop shadow and use these settings:



Now you need your eraser. Erase all the top parts like I did, so it looks like its fading.
After that this is what I got:




Step 13: Now this is going to be our content, which on this template has our 'about us' and the 'latest projects' area on the template. Since your background is going to be the same color as your content header, and there is going to be nothing separating them, use someway of numbering them. If you look on the template above, you can see I made red squares and added numbers to them, also shown in the image below:


Now to separate the content titles and the banner/navigation bar, I created a line which I used the rectangular marquee tool for, and made another bold line and I filled it with the color I wanted. I chose a dark red and black. That is all you have to do for the content

Step 14: Now its time for the projects list, this is going to be harder than the content but still easy. First do the same thing with the content area and that was to add a red box and a line I suggest you copy and pasting both of them where you do not have to make it twice. The next step is creating the boxes...

How to make your boxes:
First start off by getting your rectangular marquee tool and make a rectangle with a width of 119 pixels and a height of 73pixels. Now fill that with black and go to the layers palette and put your mouse over image on the layer palette you just filled black, hold 'ctrl' on your keyboard and click. Your black image should be selected. Now go to Select>Modify>Contract and select 3 pixels (I did) or you can change it to what ever size you want. Look at the picture below for more details


Now you should have something like this


Do not mind the white around the image; just pay attention to the black

Now that you have that, make a new layer over the black layer, and fill it with #343434 after you do that, (make sure your box is still selected) now go to Select>Modify>Contract and set that to 2, and fill that with #dfdfdf

After you have done that, just merge all of those three layers. Now if you want more than one, just hit ctrl+J to copy it

Now its time for the last part and that is the copyright. Just copy the same thing as on my template above, but to make it look better use these settings


This is the outcome with extra detail:


After you've done everything, you can see that I have added extra detail to the template. Most beginners might not understand it, but I hope the more experienced people to gfx make sure to check out www.ddgfx.com for more tutorials and make sure to give credit to -Deathcult and Razor for making this possible.

Sorry that I never got to correct the grammar. But its fine. Great tutorial, I learned a lot.

no prob. someone else done it for me

Thanks for sharing DC! Nice in-depth design.

Razor did you submit it or did you want me to.

Thanks very nice tutorial.

i really liked this tutorial becuase i am starting to html and java..but i was wondering if there is a tut somewhere that explains how to take a web template such as yours or the one i made and set it up into a working web site..thanks if any know...btw here was my result...

(actual size is 1000x800)

ohh..i saw razors but the link was down >_<

could you tell me what font did you use for:



and



and



and this writing: "We are a new webdesign firm...."

Thanks a lot already, great turorial hope i get to know which fonts u use!

Most of these look like standard windows fonts. Just cycle through your font list in Photoshop until you get what you like.

Cool, accepted on G-T and P2L.

woot and to answer your post DreamisTiC for the banner i used a font called impact its a default and on the text i used a text called verdana with the size of 9 or 8 "cant remember" and the AA to none

This tutorial is a rip from the original free template download given out at the akpro site...
http://www.akpro.net/v3/templates.html
(its the last template, called 'template 01')
Here is the free download of it:
http://www.akpro.net/v3/downloads/templates/AK-temp1.psd

Those of you who are doing this tutorial, don't bother, you can get the real version there...
Its sad that ddgfx is hosting and supporting such tutorials...

i'm going to notify the admin of akpro...

Thank you for posting that and have looked into it. The two templates are close, and it is obvious that this was inspired by that business template on akpro, however, to say that this is a rip of that one is not true. I just went and had a look at its .psd and there is a vast difference in the two. Same style and feel, different templates. This template is not a rip...

Yea, I just did the same exact thing, it's not a rip, it was an inspiration. Thus, it is legal...all DeathCult did was make a written tutorial out of it, and you simply supplied a .PSD file - not a tutorial. A rip is if he stole your tutorial, and credited it to himself. So good luck guys, I know what this is like.

RaZ is right. The templates have a similar look and feel, but are different.

It's not even the same .psd.... Theres are many vast differences in the entire template.