William M. Pegram
Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me

Introduction

File>Open to bring in an existing image (pick one)

Menus - File, Edit, etc. with submenus

Tools - on left, grouped by category - Select, Bitmap, Vector, Web, Color, View

Keyboard Shortcuts for tools - e.g. W for Wand, B for Pencil, P for Pen, etc. useful because you can use left hand to select tool whereas mouse then doesn't have to leave image

Screen modes - Tab key to make all menus disappear or appear (toggle)

Z - Click Zoom Tool - Alt Z to zoom out -- Can also change magnification in drop-down menu at bottom right or View>Magnification

H - Click Hand Tool - or Hold down space bar -- to move around in image vs.

Pointer tool (V or zero)- Click on image or object and can drag to new location or use arrow keys to move object 1 pixel at a time or enter x,y coordinates in property inspector and hit enter

Property inspector is context-sensitive, just like in Dreamweaver

Anytime you have copied an image to the clipboard, if you open a new blank file in Fireworks, the dimensions of the canvas will be set equal to the dimensions of the image on the clipboard.

Whgen you are creating graphics for the web, the file size can be extremely important since it will affect how long the user will have to wait for the graphics to appear. There are two principal ways to affect file size:

1) Change the size of the image - the file size is roughly proportional with the image area. To change the size of an image, choose Modify>Canvas>Image Size. Can choose to constrain proportions if you like. (In Word, when you are formatting a picture, the constrain proportions is checked by default.)

2) Change the quality of the image - this is discussed in the next section

Choosing Optimization Settings and Exporting Graphics

Click 2-up tab -- on the left is how the picture looks initially and on the right is how it looks compressed, along with the type of image (e.g. JPG), the file sizes, quality (jpg) or number of colors (gif), and download time for a particular speed

Click 4-up tab - Can close all the panels on the right for more viewing space if needed. Upper left is original; click in a quadrant to change the optimization setting for that quadrant in the Optimize Panel (Window>Optimize) -- you may want to use the Hand tool to inspect how particular parts of the image will look

If one chooses a GIF, there are a variety of palettes one can choose - In a GIF, you are limited to a maximum of 256 colors -- how these colors are chosen depends on the palette (see. p. 63):

Most of the time you will probably want to use adaptive

color depth - number of colors in gif whereas for jpeg it is quality (number from 0 to 100)

You can save optimization sessions for all four panels by clicking the Options dropdown at the right and selecting the first choice. You can click on the one you want and then select File>Export.

Drawing and Painting Tools

Pencil tool - Click on pencil and draw, single pixel stroke, hold down shift key to constrain to 45 degree lines.

Brush tool - Shift constrains to 45 degree lines. Stroke color, tip size, stroke category, edge)

Eraser tool - Again can set properties or erase tool in property inspector. Holding down shift will constrain to a straight line

Crop Tool - Click on tool and then draw rectangle. One can adjust the size of the rectangle by adjusting any of the handles that appear around the rectangle. To actually crop, double click the rectangle.

Marquee tools (Marquee and Oval Marquee Tools) Hold down shift key to make rectangle a square (rectangular marquee tool) or a circle (oval marquee tool). One can determine in the property inspector the edge for the marquee.

Lasso tools - Lasso and Polygonal lasso - for the latter, you click to define the vertices of the polygon. After you've created it, you can change the selected pixels by using the arrow keys or entering the size and position directly in the property inspector

Magic Wand Tool - Selects a contiguous area of similarly colored pixels - Tolerance setting determines what "similarly colored" means - a tolerance setting of 16 means that pixels plus or minus 16 in each of the red, green, and blue dimensions are selected.

Adding and subtracting to a selection (works with any of the bitmap tools) - To add, with an area of pixels selected, hold down Shift and start an additional selection on an unselected portion; to subtract, hold down Alt and choose an already selected portion of the object

Paint Bucket Tool - fills a selection with a solid, web dither, gradient, or pattern (tiles an existing .png image for the fill) with additional options shown in the property inspector

Drawing and Painting with Selections - When an area of a bitmap is selected, the Pencil, Brush, and Eraser tools will affect only the selected area

Selection Options from Menu - particularly important is Select Inverse

Filters (e.g. adjust color, blur, other, sharpen, third party filters such as Eye Candy 4000 LE or Alien Skin Splat LE) are destructive, they change the value of pixels within a selection whereas effects (see below) are not

Selections from edit menu - cut, copy, paste, clear

Transforming bitmap objects - Modify>Transform>Free Transform - Info panel can provide details on change

Modify>Transform>Scale - handles on each side to adjust in one dimension, at corners to adjust in two dimensions, to move image, click drag within the selection, to rotate an object, click outside the box and rotate; to change the center of rotation, click the circle in the center and drag it to where you want it to be; Double clicking will apply changes

Modify>Transform>Skew - create perspective effects - grabbing a handle on one of the sides will move that side parallel to the opposite side (rectangle into parallelogram), grabbing a handle on one of the corners will move each corner on that side an equal distance from the center (rectangle into trapezoid)

Modify>Transform>Distort - each corner can be moved independently - dragging any other handle will adjust the size of the object

Modify>Transform>Numeric Transform - Scale (percentage), Resize (pixels), Rotate

Applying Effects to Bitmap Objects - Effects are available on the right hand side of the property inspector when an object is selected with the Pointer tool - Click on plus sign to see a list to add: such as Bevel and Emboss, Shadow and Glow (drop shadow, glow, inner glow, inner shadow -- each of these have settings - Clicking the check mark next to an effect will turn it off, clicking the red X will turn it on, double click the effect name to change the settings, and click the minus sign to remove it, click drag an effect up or down to change the order in which the effects are applied. If you click the plus sign, one of the choices is Options, which allow you to save a set of effects as a style and a all on/off toggle which turns all the chosen styles on and off together. If you save a set of effects as a style, it will show up on the effects menu in the future.

Revised: February 8, 2007. Comments to William Pegram, wpegram@nvcc.edu