This tutorial walks you through the process of creating graphic text using
FireworksMX then saving the image as a transparent gif.
Click on images with borders, to enlarge the image.
 1.
After downloading and installing your demo version of Fireworks MS,
launch the program ( which will be in the macromedia folder in the
programs folder. The Fireworks icon appears here.. |
2. Open a new file and
give the following specifications. 
Width=250,
Height= 50, then press the Transparent radio button, (see cursor in picture).
|
3. You will then see an empty button
like the following.
 |
4. In this first example we will just place
text on the image.
- Select the Text button on the left side of the
screen. (The letter A).
- Place the cursor over the button, then drag the
selection outline over the area of the button you wish to fill with text. In the screen
capture on the right, the selection area is the blue box outline, within
the button.
- Type the text you wish to
insert.
- You can change features by
selecting the Text Menu Item on the top of the screen, then
select editor.. to change multiple features, or select
individual items like size from the Text pull-down menu.
This will cause the Text Editor screen to pop up.
- Here you can select
the font, its' size and color,
and experiment with font spacing. Type the text you
wish to insert. If the Apply checkbox in checked you
will see what the text looks like as you make changes.
- To change any of
the font features, the
text must be selected first. The selected text will
be black in the text editor window. Play with different features
until you are happy with the result. Then select the OK button
on the bottom, you must close the text editor pop-up before you can
continue with anything else.
- Save the file by using the
Fireworks default file type: first.png
Select the File main menu item, then the Save As..
option, then enter the file name first as illustrated here:
|
5. To try some of the Styles available within Fireworks, select the Style
from the Window main menu item (or use shortcut Shift-F11
keys) to open the Styles pop-up menu. (see cursor in picture below)
- Reopen your original image first.png.
- With the text selected, explore the various font
styles, by mouse clicking on some of the various representations of ABC.
- You can also play with changing the color and size
for the basic font. To change font size, select the Text main menu
item, then size or Editor to bring up the text editor window again.
- When you are happy with what you have created save
the file as third.png again.
|
| 6.
The three images created in this tutorial appear below. Notice how the image background is
white. I would like to make the white background transparent.   
|
|
|
To convert the png files to transparent gifs, load or create a png
file such as first.png then
- select Export Preview
from the file main menu. (Or use short cut keys Ctrl+Shift+ X)
- The settings I used are illustrated in this screen
capture, note Alpha Transparency above the mouse
cursor.
- You can select the color to make transparent by
mouse clicking on the Matte square and selecting a color.
- Select Export, then save at
the export menu as displayed here,
 to save the file as a transparent gif.
|
|
