Fireworks Basics

Opening an Image or Creating a New Image

• MAC: Double-click on “My Computer”, find the Macromedia Fireworks folder and open the application
  

• WINDOWS: From START, click PROGRAMS and Macromedia Fireworks.
  

• From the file menu... click OPEN. Using the dialog box that appears navigate to the file you wish to open. This may be a scanned image, an image from a digital camera, an image from the internet, etc.

  

• If you wish to create a new image then you need to go to the file menu and click NEW. Choose the size of Canvas and the background color you want and click OK.

  

 

Text:

• One of the most useful things about Macromedia Fireworks is its ability to easily create text effects. 3-D effects, drop shadows, fills, etc.
  

• To make text effects choose the Text Tool from the Toolbar.
  
  

• Click somewhere on your newly created palette or on an existing picture. (See the first part of this tutorial).
  

• The “text editor” window will appear. In this window you are able to change the font, size, style, alignment, tracking, kerning, color, etc.
  
  HINT: The controls use a slide bar to change the settings. Just click on the arrow to the right of whatever you wish to change and then drag the slider up or down.
  HINT: The text in the text box must be highlighted to make changes to it!
  
  

• When you have the text the way you want it then click OK.
  

• You will now see the text on the palette. If you do not like something about the text you can double-click on it and the “text editor” will reappear for you to make changes.

Effects:
These effects can be applied to any object or text that has been imported into Fireworks or any object made within the program.

On your desktop there should be a palette that has five (Fireworks 3) tabs. These tabs are “Optimize”, “Object”, “Stroke”, “Fill”, and “Effect”. The last three of these are used for changing effects.

Stroke: Clicking on the “Stroke” tab will present options for the type of line you want surrounding your letters.

- There are many kinds of strokes available, from pencil to watercolor to none.
- The outline of your letters will change depending upon which brush you choose
- There are also many different settings for each brush available.

Play with them all and see what happens!


Fill: Clicking on the “Fill” tab will bring up the options for what the letters are filled with

.

- If you choose solid from this list you may change the color of the fill using the small box to the right of the first box on the top of the window.
- You are also able to fill the letters with a variety of other designs and patterns by choosing pattern or one of other choices.

Below is an example of a pattern fill with "blue wave" and what it does to your text.



Have Fun!


HINT: If you want a texture to show on your text or button you must make sure that the percentage to the right of the texture box is not at 0% or you will not be able to see it! Also, the texture works better with dark, solid colors.


 

Effects: Clicking on the Effects tab will bring up the options for effects that can be applied to the letters or any other graphic shape or picture you want.



- There are many choices located under this tab. It is best if you try them all so you are aware of which will create the desired effect




- Each time you choose an effect from the menu it will appear on the main palette. If you don’t like an effect chosen you can check the box to the left. The effect will only appear when this box is checked.



- If you want to work with the options of each effect then click on the “i” and that box will appear.
- Here is an example of a couple effects and what they do to the text.



HINT: It is possible to change the color of the outer bevel, drop shadow and glow. Just click on the “i” and then look for the color palette on that box.

Creating a Button:
Creating buttons using Fireworks is extremely easy and quick.

1. Open a new image, as previously described.
   
2. From the tools palette choose a box tool.
   
   Hint: If you hold the box tool button down you are able to change the shape of the object the tool will draw from a square to a circle or polygon!
   
   
3. Draw a box, circle, or polygon on the palette.
   
4. Now you are able to do all the effects that you learned in the text section of the directions. Have Fun!
   
5. Once you have the button the way you want you can create the text that you want to appear on the button. Follow the directions for text. You are able to add effects to the text for your button in addition to effects for your actual button.
   
   
   Hint: If you want text on your button. Create the button first then create the text and drag the text on top of the button!
   

Exporting Text or Buttons:

• Now that you’ve made your cool buttons and text you need to export them so you can use them in another application.

• First you need to make sure you are only exporting the things you need. You don’t need tons of white space around your image, it’ll just take more room and time to load on your webpage!
  

• Go to the Modify menu and choose TRIM CANVAS.
  

• Now you are ready to export your picture!
  

• Look at the palette that you’ve been using to create effects, there is a tab on it that is called OPTIMIZE. Click this tab. The window should now look like this.

  
  

• This is the window where you will practice weighing quality against size.
  
• The default export setting is a GIF. If you click on this button you will see other choices. If you are preparing a picture for the web you should use GIF if there aren’t many colors, such as in a button or title, or JPEG if there are a great many colors, such as in a photograph.
  
  HINT: You cannot make the background (whitespace around the button) invisible using a JPEG format. If this is important choose GIF. To make a background invisible click on the button that says “No Transparency” then choose “Index Transparency”.
  
  

• If you are not going to put the image on the web then you probably want to use a TIFF/PICT (MAC) or BMP (Windows).
  

• The best policy for getting the perfect balance between size and quality is to try some different combinations. To do this you need to click the “2-Up” or “4-Up” tab located at the top of your palette screen.

  
  

  HINT: If you click on “4-Up” you can see 4 different views and try 4 different adjustments on a picture. Make sure you click on the picture you wish to change before you make changes in the “Optimize” window.
  

• This will allow you to see the changes you made in relation to the original. What you want to do is change the settings on the Optimize pallette until the picture has an acceptable look and an exceptable loading time. Lowering the number of colors is a good way to make file sizes smaller on GIF and lowering the quality percentage is a good was to make file sizes smaller on a JPEG.
  

• The bottom of the window is displays information about the changes you make in the optimize window. The file type, the size, how long it will take to load that image on a 28.8 modem, etc. are all displayed so you can decide if you need to lessen the quality.
  

• A good rule of thumb is to try to keep all images under 3 seconds loading time. However, if you have a complex picture that is very important just try to keep it is as small as possible while still retaining the quality desired.
  

• Once you have the file the way you want then you need to go to the FILE menu and choose EXPORT.
  

• Choose where you want to save your image, name the image, and click “EXPORT”.
  
  

  HINT: If you are planning to use the picture in something other than a webpage the file size and loading time are not important. You want to have the highest quality possible so you don’t need to play the size vs. quality game!

©Christi Boggs 2002