Zymic

Webmaster resources

Website Traffic Special

1000 visitors from $3.95 - Learn More

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Total Layout Tutorial

Create an effective layout, then learn how to manually code it in Dreamweaver without the use of slicing! 100% Expandable.

Step 1

Make a new white document 750x500 and press "D" and "X" on your keyboard.

Select the "Rectangular Marquee Tool", set the "Style" to "Fixed Size" Width: "750" Height: "112" pixels and click on the top right of your blank canvas. Make a new layer and fill it in with white and name this layer "base". Press "Ctrl + D" to deselect.

Step 1 diagram

Step 2

Bring up the blending options:

Gradient Overlay

And then check "Reverse".

You should now have something similar to below:

Step 2 diagram

Step 3

Make a new layer and call it "top shine". Make a selection similar to the size below and fill it with white.

Step 3 diagram

Step 4

Press "Ctrl + D" to deselect and change the layers opacity to "19%". This will brighten up the gradient slightly and adds a nice shine effect. You should have something similar to below.

Step 4 diagram

Step 5

Now lets add a nice orb to the header!

Make a new layer set and name it "ORB". Go to: "Layer > New > Layer Set". Now make all of the orb step layers into the ORB layer set, this will keep things clean and easy to follow in the layers pallet.

Grab the "Ellipse Tool" and make a white ellipse similar to the same size as the one below, place it just off the left hand side of the canvas and name it "ellipse inset".

Step 5 diagram

Step 6

Now right click the layer you named "base" and click "Copy Layer Style" and then right click your newest layer "ellipse inset" and click "paste layer style". Now open up the blending options and go to "gradient overlay" and un tick "reverse" and you should have something similar to below:

Step 6 diagram

Step 7

Now hold "Ctrl" and click on the layer "ellipse inset layer" in the layers pallet. This will make a selection. Now go to: "select > modify > contract" by 3 pixels. Make a new layer (still keep the selection), fill it in with white and name it "ellipse inset 2". Press "Ctrl + D" to deselect.

Right click on the layer "base" and select "copy layer style" in the layers pallet. Then go to your newly created layer "ellipse inset 2" right click and select "paste layer style".

And now open of the blending options and select inner shadow:

Inner Shadow

And press OK.

You should now have something similar to below:

Step 7 diagram

Step 8

Ctrl + click the layer "ellipse inset 2", make a new layer and select the "gradient tool" and bring up the "gradient editor" (at the top, drop down the gradient box and edit the black and white gradient). And use the colours below, press OK and click on "radial gradient".

Step 8 diagram

Step 9

With the selection still running, drag in an upwards direction with the gradient tool and then deselect. Rename the layer to "green glow orb". Set the layers mode to "overlay" which will make it a glowy green and you should have something similar to below:

Step 9 diagram

Step 10

Ctrl + Click the newest "green glow orb" layer then "select > modify > contract" by 3 pixels. Make a new layer and fill it in with white and deselect.

Step 10 diagram

Step 11

Select the "Elliptical Marquee Tool" and make a selection like below and press delete. This will create a top curve to the orb.

Step 11 diagram

Step 12

Deselect and change the opacity to "19%" and rename the layer to "top orb shine". As you can see this has made the orb look slightly more 3d and shiny. We have nearly finished with the orb part.

Step 12 diagram

Step 13

Now what i'm going to do, to finish the orb is add my own personal touch. I made a star shape with a "Z" for zymic inside it and lowered the opacity. Perhaps you can add your site logo or some sort of identity to the orb to finish it off.

Step 13 diagram

Step 14

Now with the orb side over, SAVE the psd else you'll hate yourself if you get a power cut or your pc crashes! Oh yeah I forgot to say, !save! the psd!

Lets add some sort of bar underneath the header, make a new layer and name it "header bar 1". Make sure you make the layer out side of the "ORB" layer set, seeing this isn't anything to do with the orb.

Step 14 diagram

Step 15

Fill in the selection with white and deselect.

Bring up the blending options:

Drop Shadow

Gradient Overlay


Stroke

And press OK.

Step 15 diagram

Step 16

Now we have a bottom bar, which later, can be used as a separate navigation or something. Now we need to finish the header, add your site logo / text. Use any fonts you wish.

Step 16 diagram

Step 17

We are getting close to the Dreamweaver part but first we need to save some images. Make a selection around the orb and your logo with the "Rectangular Marquee Tool" as shown below. DO NOT select the bar underneath the header. Make sure you select the full height of the top green header.

Step 17 diagram

Step 18

With the selection still running, press "Shift + Ctrl + C" to copy it. Make a new document, keep the default size and paste in your image. Now save the image as logo.gif "File > Save As" into your images folder. (If you don't have one make a new folder on your desktop i.e. "my new layout" and then make a folder inside that and name it "images").

Step 18 diagram

Step 19

Now back in Photoshop, make a selection similar to the one below (1 pixel wide). Then press "Shift + Ctrl + C" to copy it. Make a new document, keep the default size and paste in your image. Now save the image as headerbg.gif "File > Save As" into your images folder. This will become a background for the header (the background will repeat horizontally across the top header and due to the pure size of it, will save your loading times).

Step 19 diagram

Step 20

Now go back to the original layout psd and zoom right in on the gray gradient bar and make a selection similar to below (make sure it's 1 pixel wide) the same as below.

Step 20 diagram

Tutorial navigation

Tutorial comments

15.06.2008 -

communic says …

Not very good for noobs.

18.05.2008 -

jesperl96 says …

oh this took me 3hours BECAUSE NONE OF THE LINKS TO LOOK WHAT SETTINGS GRADIENT AND MORE... NEEDS... And it was for nothing!, contentbox, contentboxheader dont agree with eachother... sry for my "Little" bad english -.- (Im from sweden) thanks for nothing... and please fix that image links!

03.04.2008 -

Biobob says …

wow very cool!!! this kick starts my ambitions nicely

11.02.2008 -

loginking says …

kewl...buddy

10.01.2008 -

LiLManiac says …

the banner size is 500x80

View all user comments for this tutorial.

Tutorial statistics

Date added:
15.01.2005
Author:
Zymic
User rating:
5/5
Rate tutorial:
Total views:
22409
Total comments:
10

Advertisements