|
In this tutorial, I will teach you how to create the navigation bar above.
Step1: Setting up the workspace.
Create a new image 800 x 600, and set the background color to Dark Gray #545655. Create a new layer, Layer New Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle tool  , using the dimension below
Step2:Creating the shape.
Create a rounded rectangle, make sure the color of the rectangle is Black. Should look like the image below.
The size will change depending on what you want. Right click on the rectangular layer and click Blending Options, now add the settings shown below.
Inner Glow
Bevel and Emboss
Click ok, to apply the settings.
Your Rectangle should look like the image below at this point.
Hold Ctrl and click on the layer you just created to select it.
Step3: Adding the Glass Button.
With the layer still selected click, Select Modify Contract, when the contract selection comes up change the setting to 3 Pixel. Create a new layer, Layer New Layer... (Shift+Ctrl+N). Click on the Paint Bucket  and fill the selection with #9a9b9e. Now right click on that layer and click Blending Options, now add the settings shown below.
Inner Shadow
Inner Glow
Bevel and Emboss
Contour
Contour (Mapping)
Color Overlay
Click ok, to apply the settings.
Your Rectangle should look like the image below at this point.
Step4: Adding the Metal bar.
Create a new layer, Layer New Layer... (Shift+Ctrl+N). Click on the Rectangular Marquee Tool  and create the selection shown below.
Click on the Gradient Tool  , its usually hiding behind the paint bucket. Create the gradient shown below.
With the gradient created, apply it to the rectangle as shown below. Starting from the top and ending up at the bottom.
With that, effect added you should have the image below.
Now right click on that layer and click Blending Options, now add the settings shown below.
Click ok, to apply the settings.
Finished:
That is it. How it came out to what you expected. If you have any questions or comment feel free to post a message on the forums or contact me at markc1822@pixeldigest.com
This Tutorial was Created by Mark
© 2006 pixeldigest.com. All Rights Reserved. |
create a php login script using adobe dreamweaver. Its a simple process just follow along and anyone can recreate this example.If you have any problems email us..
