HomeTutorialsGraphicsFilesForumsGaming
aboutfaqContact

Back to Tutorials Gallery
Tutorial - Ebay Navigation Header

This is what you'll have upon completion:

Step 1:
Create a new document 600x53
Background color: #FFFFFF (white)

Step 2:
Select the Rounded Rectangle Shape tool: tool_rr
Set the settings to: Paths, Radius: 15 px

Step 3:
Starting from the lower left-hand side drag the rectangle to the upper right-hand side.
Right-Click and select Make a Selection. 0 Feather.
Use the rectangle marquee to select the entire bottom half of the image
*removing the rounded edges.

Step 4:
Create a new layer. Call it "Shading".
Set the Foreground color to: #EFEFEF
Using the Paintbucket tool full the selection.

Step 5:
Create a new layer. Call it "Bottom_Line"
Set the Foreground color to: #000099 (dark blue)
Using the Pencil tool Hold Shift and draw a straight horizontal line alone the bottom.

Step 6:
Set the Foreground color to: #000000 (black)
Select the Text tool and click on the canvas.
Set the text settings to: image_01

Step 7:
Type your first link title. For tutorial purposes I'll make mine the same as those on ebay.
in that case it is Buy.
The text should be 5px from the bottom line *including the tail of the y. And 14px from the left side. This will be the base for the rest of your link text.

Step 8:
Create a new layer call this Top_Line
Set the Foreground color to: #000099 (dark blue)
Using the pencil tool draw a 10-20px horizontal line.
Line this up with the top of the word Buy and move it up 5px.

Step 9:
Draw a vertical line flush with the left side from the bottom_line up to the same height as your top_line.

You're image should look like this when zoomed in on the left corner:
image_02

Step 10:
Create a new layer. Call it "side_line"
Draw another blue vertical line from the bottom_line up to the top_line
Line this up with the right side of the y from the word, and move it 13px to the right.
Draw another blue line connecting the top of the side_line to the top of the top_line.
You're image should look like this:
image_03

Step 11:
Merge all the line layers togethar.
To do this, make sure they are stacked 1 on top of the other, order doesn't matter, then go to (Layer > Merge with Previous) OR (Ctrl + E) until there is only 1 layer with the word "line" in it.

Step 12:
Using the Text tool write your next link name. In this case it is Sell.
align the word up to the right side of the right side blue line and move it 13px to the right.

Step 13:
Create a new layer. Call it "new_line"
Draw a blue line from the bottom line to the same height as the top.
align this with the right side of the last letter of your new link header. move it 13px to the right. From there draw a blue line from the top to the left connecting it to the top of the blue line above your first link header.

You're image should look like this:
image_04

Step 14:
Merge the 2 layers with the word "line" in them.

Step 15:
Repeat steps 12, 13, and 14 until all of your link headers are in place. Then move on.

Step 16:
Select the Slice tool.
Draw a rectangle from the top left of the image to the top right corner of the blue outline.
image_05

Step 17:
Draw another rectangle from the top left right corner of the first slice to the bottom right corner of the image.

Step 18:
Draw Rectangles Enclosing the blue lines. like so:
image_06

Step 19:
go to: (File > Save for Web)
Save this in your main site folder as navbar.
A new folder will be created if it doesnt already exist for all the slices with the name "images".

Step 20:
Create a new layer just above the background layer. Call it "Coloring".
With the rectangle marquee select the area from the top right of the blue line to the bottome left corner of the image.
Set the Foreground color to: #000099
Using the paint bucket tool fill in the selection.
Also make sure to change the color of the text from black to white.

Step 21:
go to: (File > Save for Web)
Save this in your main site folder as navbar_over.
A new folder will be created if it doesn't already exist for all the slices.

Step 22:
Now insert these images onto your page using the (Insert > Image Objects > Rollover)
Using the navbar_0* images as the base & the navbar_over_0* as the rollover images.
Set the navbar_01 slice as the bg of the cell above the navbar, and set the navbar_02 slice as the background for the cell to the right of the navbar.

This should be your final product

Design Portfolio Logo



Home - Websites - Logos - Banners - Tutorials
Files - Forums - Biography - Contact

thanks for visiting, please do not steal any of my images.