Creating a Glass Style Navigation Bar Using Fireworks
Written by Website Tutorials
Thursday, 12 June 2008
This tutorial provides a basic guide to creating a nice "glass" style navigation bar with a simple rollover effect using Adobe Fireworks CS3.
Creating A Glass Style Navigation Bar Using Fireworks CS3
Fireworks CS3 is the latest release of the popular web image editing software package and is the first from its new owners Adobe. Formerly released by Macromedia, Adobe Fireworks CS3 sees some significant enhancements including its new role as the replacement for Image Ready, commonly used by Photoshop users to prepare images for web deployment. Among other things Fireworks CS3 now natively understands Photoshop CS3 layers and most of its filters/effects as well. It also adds a new level of simplicity to splicing a design ready for web usage.
However, it is not only its new relationship with Photoshop that makes Fireworks CS3 standout. It has also had numerous feature enhancements of its own, including a much more stream lined method of creating nice navigation bars with simple rollover effects from just a few clicks.
This tutorial provides a basic guide to creating a nice "glass" style navigation bar with a simple rollover effect.
To begin, create a new document setting the width and height to the dimensions you would like your navbar to be. Here I have used 780px(w) x 28px(h). Now draw a rectangle using the same dimensions as the document(don't worry about its colour at this stage) and center align it using the "align" panel.
With the box you've just drawn selected, scroll down in the "assets" panel and select one of the black glass style effects.
In the "filters" section of the "Properties" panel select the + symbol and choose Adjust Color -> Color Fill. Then choose the colour you would like to use and makes it opacity about 50%. Play around with various colour and opacity combinations unitl you acheive the desired result.
Create text boxes for the various button headings you want and evenly space them out.
Create some soft lines to divide the text and create button zones.
In the frames panel, select the options button and choose "Duplicate Layer".
Place the layer after the current frame.
Select the second layer from the Frames menu and then switch back to the "Layers" panel.
Select all of the text boxes and lines and turn them into a group for easy layer adjusting.
Create a new box that sits nicely behind and within the first text section. Choose the same style that you used for the background and adjust its fill mode to be "Overlay" of about 40%. You can also adjust its brightness and contrats to give it more of a variation to the background.
Repeat this for the remaining buttons.
Using the "slice" tool, create slices that evenly cover each button. Make sure the slices go right to the edges and are roughly the same width as each button section.
Once you have created all the slices, right click on each one and choose "Add Simple Rollover Behaviour".
Now choose File -> Export to save your new navigation bar.
Navigate to where you would like to export the file to and save as "HTML and Images". Remember to also save your working PNG file so you can edit it later if necessary.
Once you have done that you simply need to insert the created html into your webpage using an HTML editor such as Dreamweaver. This procees is made very simple using Adobe Dreamweaver as it natively understand Fireworks HTML and places it in the appropriate places in an HTML document. If you do not use Dreamweaver you will need to manually insert the HTML however that is another tutorial on its own.
If you found this tutorial helpful, you can bookmark it with your favourite tracker.
