29.10.2009 -
link not working at the end
Create an effective layout, then learn how to manually code it in Dreamweaver without the use of slicing! 100% Expandable.
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.
Bring up the blending options:
Gradient
Overlay
And then check "Reverse".
You should now have something similar to below:
Make a new layer and call it "top shine". Make a selection similar to the size below and fill it with white.
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.
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".
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:
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:
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".
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:
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.
Select the "Elliptical Marquee Tool" and make a selection like below and press delete. This will create a top curve to the orb.
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.
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.
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.
Fill in the selection with white and deselect.
Bring up the blending options:
Drop
Shadow
Gradient Overlay
Stroke
And press OK.
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.
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.
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").
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).
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.
zymic the best!!!!!! hosting and comain
5 Star Tut.
Glad to found Zymic.
Keep it up...
link not working at the end
Awesome tutorial, fantastic job
Woah! Awesome tut thanks.
View all user comments for this tutorial.