Adobe Fireworks CS5 Tutorial: Creating a Logo Banner Page 7
Opening Existing Files and More ...
You saved your company banner logo in two separate files: logo.gif and logo.png. The logo.gif file was optimized to display on a web page. If you open it in Fireworks (Launch Fireworks, select File, select Open and choose your logo.gif) you will find that while you can add objects to it, you cannot directly edit or change the text object "Acme Web Design".
The logo.png file was saved in a file format that DOES allow you to edit objects. Close the logo.gif file and open the logo.png file. Notice that if you double click on the text you can edit and format it however you wish. It is a great idea to save your files in BOTH formats — in case you need to go back and modify an image.
Creating Buttons with Fireworks
There are a number of methods that you can use to create buttons with Fireworks. One very simple method is to create a new image with the appropriate dimensions and background color. Then add text to it.
The next section will walk you through creating a "Home" button. Close any open images in Fireworks. (Hint: When creating a series of navigation buttons for a website create the one that displays the longest text first!)
Create a new image.
Select File > New. The New Document dialog box appears.
Configure it so that the image is:
- 150 pixels wide
- 50 pixels high
- has a shade of blue for the background color.
Click OK.
Your image canvas will look similar to the one shown below:
Add the text "Home" to the button. (Hint: choose the Text Tool.from the Tool Menu, refer to earlier pages in this tutorial if needed.) Use the Properties Panel to configure text color (#FFFFFF), size (30), font (Arial), bold, and italics.
Your image canvas will look similar to the one shown below:
Use the Export Wizard and save the file on your hard drive or portable storage media as home1.gif.
Sometimes you need two versions of the same button with slightly different text colors. The easiest way to do this is to create the second button right now. Select the text, change the color, and use the Export Wizard to create the second button. Call it home2.gif.
To prepare for future modifications (you never know when your clients or project manager will change their mind), save the file as home.png to allow for easy maintenance.
Samples of home1.gif and home2.gif are shown below:
If you are thinking, "There really is a lot to learn about using graphics applications." — you are correct.
Consider taking a graphics course sometime in the future. Some technical web developers outsource their graphic work to graphic specialists.
Large-scale web projects usually have at least one graphic designer on the team. This allows the developers to concentrate on the HTML and scripting.
Happy Graphics!