Zymic

Start a new document, 400 by 333 pixels and fill the background in with the colour #1E1E1E. Now make a new layer and select the polygonal lasso tool and make a selection as shown below.

Now using the paint bucket fill the selection in with white, press [ Ctrl + D ] to deselect and then open up the blending options and click on gradient overlay. [ Layer > Layer style > Blending Options > Gradient Overlay ] and use the options below:

And then go to [ Stroke ] and use the below options! And then press OK.

Now with the Zoom tool, zoom in around 400% and select the polygonal lasso tool again. Make a selection like below and zoom out and make a new layer.

Fill the selection in with white and press [ Ctrl + D ] to deselect your selection. Bring up the blending options again and select [ Bevel & Emboss ] and use the below settings:

And then go to [ Color Overlay ] and use the below options! And then press OK.

My result is shown below, yours should look similar!

We have nearly finished the top bar, all we need to do is give it some finishing touches. Select [ layer 1 ] and select the [ Eraser ] tool, select a brush size of around 5 pixels. Click each corner on the silver gradient object on layer 1 to produce something like below:

Now using the same eraser size erase 2 diagonal lines on the right hand size of the silver object, you may have to move your mouse fast and it may become very tricky. If you fail to do 2 lines like below select the polygonal lasso tool and use that to help you.

Now we need to add some text, select the [ type ] tool, choose a font you think will suit it, a pixel font looks good and arrange it similar to my example below:

Now we need to do the bottom bar. It would take ages having to repeat page 1 so we are going to do a quick short cut by duplictating layers 1 & 2 and rotating them. Select layer 1 and go to [ Layer > Duplicate Layer ] and rename it "bottom1".

Using the [Move Tool ] Drage the layer near the bottom of the canvas (keeping it inline by holding your down key on your keyboard). Position it to where you want it, the longer down the wider the content area. below is my position.

Now we need to rotate the layer, click [ Edit > Transform > Flip Horizontal ] and then [ Edit > Transform > Flip Vertical]. It should be flipped like below:

Now do the same step but with the orange duplicated layer:

We now need to do the borders of the main box. Make a new layer and select the pencil tool with the colour black. Zoom in and draw 1 line from both sides of the layers. As shown below:

Save, Save & Save! We don't want to lose all the work! We now need to crop the canvas area and get rid of the excess background. Zoom in and with the reqtangular marquee tool make a selection around the whole of the content box like below:

Now go to: [ Image > Crop ] and all but your content box should be left. As shown below:

Now we need to do the interesting part, slicing it ready for the web! Select the [ Slice ] tool, zoom in and drag inbetween the black borders and around the whole content box, as shown below. It is important not to go over any borders and try to stay inside them.

We now need to go to: [ File > Save For Web ], once it opens up choose the below options in "Optimised" and then click save. When the save box comes up save the file as image.html

Open up DreamWeaver MX by macromedia, if you don't have it, pick up a trial from www.macromedia.com

Open up image.html and hopefully everthing should be coded in tables. First off change the background colour and then center the content box.

We now need to give the content area a bg, click on the big dark grey image on the middle of the content box area and find the code: