the visibooks guide to fireworks 8 2006

TABLE OF CONTENTS
i
Table of Contents
Fireworks Basics 1
Create GIFs 10
Create JPGs 15
Resize graphics 19
Flip and rotate graphics 23
Formatting Graphics 33
Crop graphics 34
Reduce file size of GIFs 43
Reduce file size of JPGs 49
Use the Export Wizard 53
Change resolution 58
Lighten/darken graphics 62
Creating Graphics 71
Draw and paint 72
Create text graphics 86
Replace colors 96
Create shapes 101

TABLE OF CONTENTS
ii
Advanced Techniques 107
Make GIF backgrounds transparent 108
Enhance and correct graphics 112

FIREWORKS BASICS
1
Fireworks Basics


In this section, you’ll learn how to:

• Create GIFs
• Create JPGs
• Resize graphics
• Flip and rotate graphics






FIREWORKS BASICS
2
1. Open a web browser, then go to:

www.visibooks.com/books/fw8

Right click the Download Fireworks 8 Fireworks Graphics link.

2. When the menu appears, click Save Target As.

3. When the Save As window appears, navigate to the My
Documents folder.

FIREWORKS BASICS
3
4. Click the button.



This will save FW8Graphics.zip in the My Documents folder.

5. Close the browser.

6. Click the button, then My Computer.



FIREWORKS BASICS
4
7. When the My Computer window appears, double-click the My
Documents folder to open it.



8. Create a folder called Fireworks Graphics in the My
Documents folder.

FIREWORKS BASICS
5
9. Double-click FW8Graphics.zip.



Your screen will look like this:




FIREWORKS BASICS
6
Tip:
If your screen doesn’t look like above, your computer isn’t
opening the
.zip
file. Just go to:


www.winzip.com

and download a copy of WinZip. You can install it and use it free
for 21 days.

10. Under Folder Tasks, click Extract All Files.

FIREWORKS BASICS
7
11. When the Extraction Wizard window appears, click the
button.



12. When the Select a Destination screen appears, click the
button.



FIREWORKS BASICS
8
Navigate to the Fireworks Graphics folder.



Then click the button.



FIREWORKS BASICS
9
When the Extraction Complete screen appears, click the
button.



The graphics contained in the .zip file should now be listed in the

Fireworks Graphics folder:



FIREWORKS BASICS
10
Create GIFs

Open graphic

1. Open Fireworks.

Tip:
If the Start screen shows, check the
Don’t show again

checkbox.





FIREWORKS BASICS
11
2. On the Menu Bar, click File, then Open.



3. When the Open window appears, navigate to the Samples
folder at:

C:\Program Files\Macromedia\Fireworks 8\Samples







FIREWORKS BASICS
12
Save as GIF

1. Double-click FlashLite_Japan.



2. On the Fireworks Menu Bar, click File, then Save As.






FIREWORKS BASICS
13
3. When the Save As window appears, navigate to the Fireworks
Graphics folder.

4. In the Save as type drop-down list, click GIF [*.gif].



5. Click the button.


FIREWORKS BASICS
14
6. Click the graphic’s button to close it.



7. When the alert window appears, click the button.










FIREWORKS BASICS
15
Create JPGs

1. On the Menu Bar, click File, then Open.

2. When the Open window appears, navigate to the Samples
folder at:

C:\Program Files\Macromedia\Fireworks 8\Samples

3. Double-click the Data-Driven Graphics Wizard folder to open it.



4. Double-click the sample_Images folder to open it.




FIREWORKS BASICS
16
5. Double-click the power file.



It should open and look like this:



FIREWORKS BASICS
17
6. On the Fireworks Menu Bar, click File, then Save As.

7. When the Save As window appears, navigate to the Fireworks
Graphics folder.



8. In the Save as type drop-down list, click JPEG [*.jpg; *.jpeg;
*.jpe].



FIREWORKS BASICS
18
9. Click the button.

10. Click the graphic’s button to close it.

Web graphic file types

GIF
Short for Graphical Interchange Format. GIF-format graphics are
used for most Web graphics. They are limited to 256 colors, but
remain sharp.

JPG
Short for Joint Photographic Experts Group. JPG-format graphics
are used mostly for photographs. They include millions of colors,
but get blurrier each time they’re saved.

FIREWORKS BASICS
19
Resize graphics

1. On the Menu Bar, click File, then Open.

2. Open azalea.jpg from the Fireworks Graphics folder.



It should look like this:




FIREWORKS BASICS
20
3. Place your cursor on the graphic.

The pixel size is 600 x 398:



This is a bit large for use in a typical Web page.

4. On the Menu Bar, click Modify, Canvas, then Image Size.




FIREWORKS BASICS
21
5. When the Image Size window appears, type:

200

in the Pixel Dimensions Width box.



Tip:
Since the
Constrain Proportions
checkbox is checked,
the
Height
automatically adjusts to
133.

6. Click the button.

Its pixel size is now 200 x 133:




FIREWORKS BASICS
22
7. On the Menu Bar, click File, then Save As.

8. In the File name box, type:

azaleasmall.jpg



9. In the Save as type drop-down list, click JPEG.



10. Make sure the Fireworks Graphics folder shows in the Save in
box.

Then click the
button.

11. Close azaleasmall.jpg without saving changes.