Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

a method for 3d nav buttons that can be used for roll over effects

Status
Not open for further replies.

gusperry

IS-IT--Management
Aug 15, 2000
14
0
0
US
For an Example of these nav buttons w/ a sweet rollover, check out
Starting with a blank (white) screen, click on the rectangle tool. Using the tool bar, make adjustments to rounded corners (try 25-35). Then select a color (darker than mid-range, not black).

Create an elongated rectangle to the size of your choice.

Now select the the text tool. Using the menu bar, grab a bold font with little or no serif (like Arial Bk or Eras Bt Bold). Use an off-white as your font color. Set a font size that allows you to type the text (links, home, etc) of your choosing over the rectangle you just created, small enough to leave a decent margin.

Type.

Center your text within the rectangle. Here comes the fun parts to remember, follow these steps as they are written.

1. Select the text only and then press 'Ctrl+M' for create mask.

2. Deselect the text and select the rectangle.

3. Press 'Ctrl+Shift+UpArrow' for Cut Selection. This will appear to reselect your text, pay now mind to that... Press delete.

4. Your off-white text remains. The mask and selection are now gone. Select your text. If the objects docker is not open, it can be opened through WINDOW>>DOCKERS. Once it is open, right click on the object line that corrosponds with your text. Select properties and turn the opacity down to one (Remember how to get here if you want make a roll-over).

5. Minimize your docker and select your rectangle with the your word cut out of it. Press Ctrl+M. Go to EFFECTS>>3D EFFECTS>>THE BOSS.
Play with the options, my only suggestion without going into greater detail is, keep width down as low as it goes... the filter does nothing if you turn it up. try toggling the invert button. click ok to get your new 3d button.

6. One thing, this may have 3d elements but its not exactly jumping out at you... put on a drop shadow. The drop shadow tool interface has changed a great deal from version 8 to version 9, I'd say for the worse. they tried to make it more user friendly and made it difficult to customize. This example assumes you have version 8 installed.
Select your rectangle if it is not already, create a dropshadow using the tool located in OBJECTS>>DROPSHADOW. Get the setting how you like them, I suggest a feathering that matches the size of the rectangle, if it will be used on the web, probably no more than 7 or 8. You now have 3d that says something.

If anyone wants to know how to do the roll over part, respond and say so.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top