Adobe Fireworks is a great utility for creating vector graphics for the web. You can use this application to create your blog or website’s navigation bar and other design elements. Follow this simple guide to create a high end navigation bar that will look great with your chosen website layout or template.
1. Sketch Your Navigation Bar
The first step to take once you’ve started your web design project or decided to make a website is to plan the overall design. With regard to your website’s navigation bar, this means knowing where you will place it on your site, and its dimensions, colors and features. Sketch out the navigation bar and accompanying design components to better visualize your new website.
2. Creating Your Canvas
Open Adobe Fireworks and select the ‘New Document’ option from the main menu. Enter the dimensions of your navigation bar. If practicing or unsure or your required dimensions, use a default size of 1200 pixels wide by 250 tall. 72 pixels per inch will make a suitable resolution. Save your project as a PNG or other file type.
3. Create the Background
Select your desired background color from the Tools menu at the top of Fireworks’ interface. Now choose whether you want you navigation bar to have a beveled edge. Using the rectangle tool, draw your beveled or plain background rectangle to fill the background of your navigation bar. Optionally, use the gradient tool to give your bar more depth.
4. Choose a Texture
Now that you’ve got your navigation bar background created, it’s time to choose a texture to enhance the graphical nature of the bar. Locate the drop-down texture tool at the main menu. Choose large or small Dots or another texture to fill in your newly created background rectangle. Modify the transparency value of the texture next to the Texture option on the main menu to your desired effect.
5. Create the Buttons for your Navigation Bar
One of the most important decisions for those who wish to make a website is deciding what menu buttons to display on the main navigation bar. Of course as your website grows, additional menu options can be added later in drop-down submenus, but the main navigation bar should include 5 or 6 anchor buttons for your website.
Select the rectangle tool again and draw 4 to 6 equally proportioned rectangles horizontally across your navigation bar. Fill each new rectangle with a color that compliments your background color and site scheme. Repeat step 4 with the new menu button rectangles if you wish to add texture or gradient effects.
6. Add Menu Text
At this point you should have a complete background and the base for your menu buttons in place. Select the text tool marked with a ‘T’ from Fireworks’ design tool menu. Draw a text area corresponding to your chosen text placement in your first menu button rectangle. Select your font from the drop down font selector. Keep in mind, the finished product will be saved as an image file, so you don’t have to worry about browser compatibility for your fonts. You can even download custom fonts online, as anything you type will display in your selected font and format. Type the text for your first menu button and save your work. Repeat for each remaining menu button.
7. Add Filters to Your Buttons
Your navigation bar should look pretty complete at this point, but you can further spruce it up by adding a filter effect to each button. This will allow your buttons to have a 3D appearance, and serve as obviously-interactive buttons for your users. Use your selection tool to highlight the first button on your menu. Under the ‘Filters’ option on the main upper menu of Fireworks, select the + button to add a new filter.
Select the filter most suiting for your site’s overall layout to add to your buttons. To try different filters, simply add one and remove it using the CTRL + Z function with your keyboard. Shadow-based filters tend to work best for buttons.
8. Install your Navigation Bar
Now that you have a complete, professional navigation bar for your website it’s time to save your final project. PNG files work well for web projects as they are compressed and will load quickly on your website. You can integrate the navbar directly onto your sites background by importing the image into a larger background canvas. Alternatively, use the HTML IMG tag to call for your navigation bar file where you’d like it to appear on your website. Use the HTML tag IMG SRC on your website to add links and give your buttons functionality.
Now that you’ve made a high end navigation bar for your website, it’s time to install it and create the rest of your design elements. Make sure to remember the HTML color codes you used while creating the navigation bar so that you site matches well. If desired, all of your site’s visual components can be made or edited using Adobe Fireworks.