If Bree is online you can chat with her here!! If not, leave a message!! She'll get back to you ASAP!!
©1999-2001 All Rights Reserved Webbildr.com This site is best viewed with Microsoft Internet Explorer
|
Navigation Tube
To make this tube you will be using Image Ready. Image Ready has a marquee tool that Photoshop does not have, that is, the rounded rectangle marquee.
- File---> New ---> 500 x 50 pixels (white or transparent background).
- Make a new layer. Choose two contrasting colors for your color chips. If your background is white do not use white as one of your colors! Black and Gray are good colors to use if you want this to look like metal. The darker color should be the foreground color and the lighter color should be the background color.
- Select the Rounded Rectangle marqee tool. Make sure the options are set to "new selection", no feather, anti-alias is checked, Fixed width 450 pixels x 40 and radius should be set to 30 degrees.
- Click inside your document and you have a tube outline. Move it so it's centered.
- Click on the "f" at the bottom of the layers palette -- the layer effects menu pops out. Choose "Gradient Overlay" from the list.
- In the gradient overlay pallete, make sure the options are set to Normal, 100% opacity, Reflected, 90 degrees, Reverse is checked.
- Now select the paint bucket and dump it inside the shape. cool huh?
- Go Select-->modify--->contract 5
- Save your work (save as a .psd file)
- Make a new layer
- Make sure you are on the new layer. Click on the "f" at the bottom of the layers palette. Choose "Gradient Overlay" from the list.
- In the gradient overlay pallete, make sure the options are set to Normal, 100% opacity, Linear, 90 degrees. Use the paint bucket to apply the gradient
- Click again on the "f" at the bottom of the layers palette. Choose "Inner Shadow." Make sure that the options are set to Multiply, 100%, Distance 5, Angle 120 degrees, Choke 30%, and size 5.
- Make a new layer.
- Select the marquee tool again. This time set the fixed size to 70 wide and 20 high. Click inside the tube.
- Click on the "f" at the bottom of the layers palette. Choose Gradient overlay. The settings should be Normal, 100% opacity, Linear, 90 degrees, and check the reverse box. Use the paint bucket to apply the gradient.
- Drag this layer to the new layer icon and create 4 copies. Each time you create a copy it will stack itself on the original, so you'll have to use the move tool to spread them out and distribute them across the tube.
- For easy identification, be sure to rename the new layers.
- Next link these layers together.
- Now go Layers--->Align Linked --->Vertical Center.
- Then Layer--->Distributed Linked -->Left
- Finally you can add text to each layer.
- Be sure you are at the very topmost layer.
- Using the text tool, click on the left most button and type "home."
- Click on the next button and type whatever you like. Do the rest of the buttons.
- Now you will align the text on the buttons. Select the layer with the button on the far left. Now link the layer that has the text for it (this is the one you named "home"). Don't click on the layer itself, just the box that will link it to the button layer.
- Now that you have these two layers linked, you go Layer-->Align Linked--->Horizontal Center, and then Layer -->Align Linked--->Vertical Center.
- Do this for each button. Each button should have the associated text layer linked to it.
- Save this file as a .psd file (so you can make changes if you like).
- Now Layer --->Flatten Image.
To make this an image map:
- Choose the rectangular image map tool (it's on the left side of the toolbox, third one down from the top). Place your cursor at the top left of the Home button. Click and drag a rectangle shape around the button. Don't try to resize the box with the tool you have. It will just draw another box. If you need to resize or adjust the box, go back to the image map tool in the toolbox and click and hold until you see the pop out menu and choose image map selection tool. You can use that tool to make adjustments.
- In the Image Map Palette (if you can't see it, go Windows--->Image Map Palette), Change the name to "Home," the URL should be "index.html" , don't put anything for the target, and Alt could be anything you like but "Home" would be a good choice.
- Repeat steps 1 and 2 for each button.
- Then click on the 4 up tab and adjust your settings. Then "Save optimized for web." Save HTML and image.
- Once you have the html you can copy and paste the html for the image map into whatever page you like.
|