Fireworks Primer

Note: There are lots and lots of image programs..beware becoming too dependent on any one program, if you're planning on doing this professionally...learn some PhotoShop, but realize that Photoshop is a tool for artists/graphic designers

Note2: It's always a good idea to save your original png image for editing later
Note3: If you're new (or not) I suggest you use Image Preview (ctrl+shift+x) to preview/optimize an image and export it from the original
Note4: If you're not artistic, Photoshop, Fireworks, Paint Shop Pro, etc. won't make you an artist...focus on the little things

1. Open Fireworks General Review

Toolbars, Tools, Panels...

2. General Image Optimization

Smaller images help your site download faster (most people are still on 56k)
Save as the "right" type (know when gif, jpg, png is appropriate...)
Crop/resize when you can
Reduce colors
In Fireworks try the Optimize Panel or Image Preview to Optimize
P7 Image Optimization Tutorial - Keep this in mind

3. Create a totally transparent single pixel shim

File-New
Set Height1/Width1 (In Pixels), Resolution=72, and Transparent Background
Ctrl+Shift+x to open Image Preview
Make sure image is a gif and index transparency is chosen
Click on Export... and export file as clear.gif

4. Creating a simple transparent image [Transparency/Aliasing example]

File-New
Set Height200/Width200 (In Pixels), Resolution=72, and White Background
Choose the Ellipse tool from the Tools area
On the Properties bar at the bottom of the screen (File menu - Windows - Properties if it's not there) select solid next to the Paint Bucket, and anti-alias from the Edge menu.
While holding shift, click and drag to draw a circle that's 150x150 (using shift will make a perfect circle, perfect square...)
Click on the color pallete by the Paint Bucket (Fill tool) and select a bright yellow
Press V on the keyboard to change to the Select tool and reposition the circle to the "middle" of the box using the mouse or arrow keys (remember that all images on the web are boxes)
Ctrl+Shift+x to open Image Preview
Make sure image is a gif and index transparency is chosen
Just under index transparency select the color/approximate color of the matte that the image will have for a background
Click on Export... and export file as transparentyellow.gif
Add it to a page with the background color you indicated on the matte
I used a matte of purple...see how it looks on white, purple and black

5. Photo fix [Photo] (Right-Click...Save Target as...Save it to the desktop)

This image needs to be fixed - it's a .bmp file (Microsoft format) and huge
Navigate to the Desktop
On Desktop Right click on codybed.bmp and view Properties (@909kb)
File-Open-codybed.bmp
Modify-Canvas-Rotate 90cw
Crop Area around Cody & View-Magnification 100%
Modify-Canvas-Image Size-set width to 300px (Use Constrain Proportions)
Ctrl+Shift+x to export image as codybed.jpg
Right click on codybed.jpg and view Properties to see new file size
The combination of resizing, cropping and proper filetype should greatly reduce the file size of the image...on the web you want as small as you can get.

6. Making a Screen Capture with Annotation [image when finished]

Decide whether you want the full Screen (Prt Sc) or just the active Window (Alt + Prt Sc)
Let's go to the scils page at scils.rutgers.edu
Use Alt+Prt Sc to capture what's in the active window (this will just copy to the clipboard)
Switch to Fireworks
File-New
Leave height/width, set resolution: 72 with a white background
After the new image has been created Ctrl+V to paste the screen capture from the clipboard onto the new image
Choose the selection tool (Black Arrow) and while holding shift use the handle in the lower right corner to "scale" the image smaller by clicking and dragging up to the left (using the shift key constrains proportions). Scale to about 3/4 of the original size.
Crop the image so the background no longer shows
Use the Arrow tool (In with the Rectangle/Ellipse tool) to create a solid thin black arrow somewhere on the white of the image
Once you've made it choose the selection tool (black arrow) if not already chosen and move the arrow close to the "Library and Information Science" header on the page
Choose the Skew tool (from the set of tools under the selection tool) and rotate the arrow so it points at an angle towards the heading (Note: you looking for the cursor to appear as a rounded arrow before you click and drag)
Use the Select tool to get the arrow in close
Next click on the Text Tool (Big A) and click somewhere on the white part of the screen.
Use the Properties area to change the text style to: Century Gothic, size 24, red and bold
Type the words "Look Here"
Use the Selection to to position if necessary
Ctrl+Shift+x to export image as scilscapture.jpg

7. Creating a Background Image(2) [image1 when finished] [image2 when finished]

1st Image

File-New
Set Width 1024/Height 2, Resolution=72, and White Background
Zoom to 600 and scroll all the way to the left
Choose the Line Tool and in the Properties area set the color to Black, size to 10, style to hard line
Make sure the ruler is viewable (if not click View on the menubar, come down and click on ruler
Position the cursor so it's about 10px from the left, click and drag down to draw the line (it'll look big, but remember we're zoomed to 600%)
Position the cursor so it's about 30px from the left, click and drag down to draw the line
Let's change the color of this line...In the Properties area change the color to a light pink
Let's make one more line...Position the cursor so it's about 50px from the left, click and drag to draw the line, change the color back to black.
Ctrl+Shift+x to export image as background1.gif
(To see this work you have to add this to a page in the body tag using css)

2nd Image

File-New
Set Width 20/Height 20, Resolution=72, and White Background
Zoom to 800%
Choose the Line Tool and in the Properties area set the color to Black, size to 1, style to hard line
Make sure the ruler is viewable (if not click View on the menubar, come down and click on ruler)
Position the cursor so it's about 4px from the top, click and drag to the right to draw the line
Once drawn, decrease the opacity to 40%
Position the cursor so it's about 12px from the top, click and drag to the right to draw the line
Once drawn, change the color to a light pink
Ctrl+Shift+x to export image as background2.gif
(To see this work you have to add this to a page in the body tag using css)

8. Create a simple Banner (feel free to play around with color/font) [image when finished]

File-New
Set Width 468/Height 60 (standard ad size)(In Pixels), Resolution=72, and White Background
Use the A (text) tool to add "YourFirstName's Resume" (e.g. Steve's Resume) (Century Gothic, 36,#0033FF )
(Hint - set everything first)
Use Select tool to reposition it
Use the line tool to draw a 2px line below it (color #663300)
Use the line tool to draw a 1px line below that (color #CC3366)
Try Ctrl+ to zoom and Ctrl- to zoom out
Ctrl+Shift+x to export image as banner.gif

9. Text to a Path [image when finished]

File-New
Set Width 728/Height 90, Resolution=72, and White Background
Choose the Ellipse tool and create an Ellipse that takes up about 3/4 of the image size (make sure the fill color is something other than white so you can see it)
Choose the Select (Black Arrow) tool and move the ellipse so that only the top 1/2 is on the canvas
Choose the Text Tool and change properties to size 24, color (some kind of orange), Kristen ITC
Type "Here comes the sun, it's gonna be a groovy day" on the image
Choose the Select tool and, while holding shift, click on the ellipse you created before (both the ellipse and text should be selected)
On the menu bar, click on Text and then click on Attach to Path
You'll have to work with the text offset in the Properties area to get it to Center...negative number to move text left/positive to move text right
Now use the Select Tool and click away from the text OR go to Select on the menu bar, click and click on Deselect
On the properties bar now...change the canvas to a light yellow
Ctrl+Shift+x to export image as sunny.gif

10. A Simple Mask effect (dl this image to work with: mooseface.jpg) (this is just one way to do this)

"Example 1 "

File-Open mooseface.jpg
From the menubar choose View-Magnification-100%
On the right hand side of the screen make sure you see the layers panel (if not open panels using the arrow on the middle right of the screen)
Choose the Oval Marquee tool and set Feather to 40 in the Properties panel
Draw an oval around Moose's eyes
In the Layers Panel on the lower right click the Add Mask icon
Scale, Crop, Filter, etc. to your heart's content
Ctrl+Shift+x to export image as moosemask.jpg
(Mine looks like this)

"Example 2"

Reopen mooseface.jpg
Choose the Text tool (Big A) and set properties to Berlin Sans FB, 350, Bold
Type BAD (all caps)
In Properties Area set Kern to -10 to bring the text closer together
Use Select Tool to position text over the eyes as best you can
Shift Click on moose's face to select both images.
On the menubar, click Modify-Mask-Group as Mask (Bad should now have Moose looking through at you)
Right now the image is really too "light"
Choose the subselect tool (white arrow) and click on the word BAD
On the Properties area select Path Outline and Show Fill and Stroke
Change the stroke to Black, 2, UnNatural-Paint Splatter
Ctrl+Shift+x to export image as moosebad.jpg
(Mine looks like this)