[Ash]

In this tutorial we well be making this website template then code it in dreamweaver.


Photoshop

Step 1
Open Photoshop make a new document using 900 x 696. then fill it with A1DD55.

Step 2
Make a new set and create a new layer inside that set. Name that set banner and name the layer banner background.

Step 3
Now on the Banner background layer use the rectangle marquee tool and create a box and fill it with 9DCE55. You should now have this.
Outcome so far

Step 4
On the banner background layer apply these settings.
Gradient Overlay 1
Gradient Overlay 2
Then duplicate the layer and name it background overlay.

Step 5
Download this pattern open it and save it as a pattern by clicking Edit, define pattern. Then close it and apply these settings to the background overlay layer.
Pattern Overlay
Then Change the opacity of that layer to 16.

Step 6
Now for the text inside the banner. For this I used a font called Microstyle Bold Extended ATT. You don't have to use it but a thicker text the better.
Type the name of the website in your chosen text. I also added a . infront and behind of my text for added effect. When your happy with the text change the color too A2B255 and apply these settings.
Outer Glow
Outer Glow Color Picker
Inner Glow
Inner Glow Color Picker
Bevel and emboss
Contour
Stroke

Step 7
Now we should have this:


Make a new set and name it navigation then inside it make a rectangle under the left side of the banner and name it navigation bg.
Now apply the same layer style as what the banner background layer has on it.

Step 8
Duplicate that layer and call it navigation overlay and apply the same effects as background overlay in the banner set. You should now have this


Step 9
Now it's time to add some text onto the layers we just created so we can use them for links when we slice it. Inside the navigation set make a new set and call it text. I used the same font for this in a size 20.93 and i also used the color A2B255 which is the same as the banner text. I made links to Home, Forum, Tutorials, Contact, Gallery, Download and affiliates. You can chose whatever links you like.

Step 10
Now just apply the same layer stile as what the banner text has on it to the links text. and thats the navigation sorted. Now duplicate the navigation set 3 times naming it latest tutorials, latest downloads and affiliates. Delete all text layers inside those newly created sets and move the whole set down til you get this:


Step 11
Inside the latest tutorial set type latest tutorials or whatever you want and then make 6 small boxes of any color as they will be replaced but save room underneath them for another text layer that will say more. Do that for all the new sets. so you get this.


Step 12
Now the layers pallet should look like this: Layers Pallet Notice I have the two bottom layers inside a set called style. You don't have to do this. I just did it so I know where everything is.

Step 13
Now this is the last photoshop step before slicing. On this step you need to make another new set and call it content. Then make a layer inside it and call it content bg and make a box next to the navigation which is the same length as the whole navigation, latest tutorials, etc etc. Then use the same style as you did in the for the other backgrounds and apply it. Then duplicate and use the same layer style as the overlay layers and change the opacity to 16. which you should leave you with this.


So now we're ready to slice it and code it to make it into a actual website.

First off select the slice tool.

And then draw around the header as if you we're making the rectangle again. like so:

Now do the same for the navigation. It will look like this.
Sliced navigation. To do this just draw boxes around the text layers and zoom in to make sure you don't overlap them.
You will need to slice around the more text you added as that will become a link. Also slice around the boxes where the tutorials/downloads/affiliates. When those are fully sliced it will look like so:
Preview

Now it's almost ready to code. You need to do two more things. One of those is to make a slice thats just a bit smaller than the actual background so it's like your making that image as a frame. So it looks like this
Preview

Now thats all sliced you need to save it for the web so click File, and save for web. A window will open up which opens the sliced image into a preview pane where you can click on every slice. The ones you have not clicked on are like the have a layer of white over them thats transparent then make the preset which is in the top right of that new window to be GIF 128 Dithered. That window looks like this:
Save for web
Now click save. and save it to where ever you want but make sure the file that you can name is called index. Open the index file in your chosen web editor I am using dreamweaver. This is what you should see. So in dreamweaver click anywhere on the white patch and press ctrl and A. Then click the align center button on the toolbar below which gives you this. But the white is still there so click on any area of the white patch again and click the "Page Properties" button and use these settings. Then click apply which gives you this.

Now to make it so you can type on it. Click the content area which will highlight the biggest image inside the template. which for me is images/index_11.gif. You want to copy the file path for that image then click into the green background. Re click the image and press the delete key. If you now look into the formatting toolbar there should be a space for a file path and it will have BG written next to it. paste the image source inside that white space. Now type something I will use some text from this website. http://www.lipsum.com/ It may stretch the page and move the pixels around so just click into the space where the images moved from and it shall fix it. That gives me this http://www.aleric.co.uk/Tutorial/index4.html And thats you done Hoped you liked it.