Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010
Introduction to Fireworks CS4 Fireworks CS4 is an image editing program that can handle both vector (line art/logos) and raster (photographic) images.
Creating a New Document To create a layout in FW CS4, click on File New. A New Document dialog box will appear. This screen contains: Width: determines how wide the image will appear. It can be measured in pixels, inches or centimeters. Height: determines how tall the image will appear. It can be measured in pixels, inches or centimeters. Resolution: determines how many pixels will be contained within the desired inch/centimeter. The higher the number, the more pixels the image will contain, thereby making the image appear clearer. The recommended resolution for web graphics is 72 (or 100 if a very high resolution image is needed). A number higher than 100 will slow down the load time of the web page. NOTE: If an image is obtained from another source, try to get the highest resolution and the largest format possible. This recommendation will allow you the most flexibility. These settings may be reduced for proper use. Canvas color: sets the default color for the background. If transparent is chosen, the background will appear as a grey/white checkerboard to allow a visual reference. The checkerboard pattern will not appear in the image once it is placed on the web page.
Tools Select The Fireworks tool pallet contains tools organized by Select (general use), Bitmap (image), Vector (line art), Web, Color, and View. Selection (black arrow): select objects to move and resize vector objects Direct selection (white arrow): select objects to move and selects individual points on vector objects to allow reshaping Scale: proportionally resizes Skew: angles the selection Distort: individual points can be manipulated 9-slice scaling tool: allows the center defined region to be scaled without distorting the other areas (allowing images to be elongated with minimal distortion) Crop: retains only the information within the crop area Export area tool: exports only the designated area to a particular file type. The original information may be retained. Selection Direct Selection Scale Skew Distort 9-Slice Scaling Crop Export Area
Bitmap Marquee/oval marquee: creates a selection area using a default rectangle or oval shape Lasso: creates a free-form selection area Polygon lasso: crates a selection area using a point-based polygon shape Magic wand: creates a selection based on similar colors Brush: creates free-form lines using an organic brush shape Pencil: creates free-form lines using a thin pencil shape Eraser: removed image information revealing the background Blur: removed sharpness/contrast between pixels/colors creating a softer focus Sharpen: increases the contrast between pixels/colors creating a sharper focus Dodge: lightens the image Burn: darkens the image by reducing brightness of the background color to reflect the blend color Smudge: blends colors together Rubber stamp: allows a portion of the image to be copied then reused throughout the image Replace color: allows a portion of the image color to be sampled then applied to other areas Red eye tool: paints the red areas of an image with grey/black (similar to replace color tool, but only replaces red) Marquee Oval Marquee Lasso Polygon Lasso Magic Wand Pencil Blur Sharpen Dodge Burn Smudge Brush Eraser Rubber Stamp Replace Color Red Eye
Vector Line: creates straight line segments Pen: creates a continuous connected line using points (straight or curved segments) Vector path: free-form continuous line Redraw path: used to modify an existing path Rectangle (variety of shapes): creates a variety of shapes Type: adds text to the image area Freeform: allows a push/pull effect on existing vector shapes Reshape: allows a vector image to be reshaped in any way Path scrubber: changes the appearance of a path with varying pressure applied to a pressuresensitive tablet or changing speed if you re using a mouse. Knife: cuts vector images apart. Does not work on autoshapes or grouped objects. Line Rectangle (variety of other shapes) Freeform Reshape Path Scrubber Pen Vector Path Redraw Path Text Knife
Web Color View Hotspot (rectangle, circle, polygon): creates an area that is intended to have interaction (clickable or roll over area). Image must be exported as HTML Slice/polygon slice: creates a place in an image that would require interactivity. Image must be exported as HTML Hide/show hotspots: turns on/off the visual hotspot indications Eyedropper: samples colors in the image to be used as fill/stroke color or added to swatches Paint bucket: fills an area with a specified color Gradient: fills an area with a gradient Stroke: outlines an image area with the specified color Fill: fills an image area with the specified color Standard screen: default layout Full screen with menus: expands the layout to fill the screen and includes all menus Full screen: expands layout to fill screen without menus Hand: allows the image area to be moved Zoom: enlarges or reduces Hotspot Rectangle hotspot Circle hotspot Polygon hotspot Hide Hotspots Eyedropper Fill Slice Polygon slice Show Hotspots Paint Bucket Stroke View options Hand Zoom
Image Options GIF Good resource for image optimization: in Fireworks http://www.adobe.com/devnet/fireworks/learning_guide/design/design_guide_pt8.html There are several formats in which to save files for use in web GIF JPG PNG Graphics Interchange Format (GIF) displays indexed color graphics and images in HTML documents. Indexed color will only display a maximum of 256 colors. Because of this, GIF is not a good format for saving photographic images that contain many colors. GIF is a good format for saving images with flat blocks of color such as logos or simple illustrations. GIF images also allow the preservation of transparency. An LZW-compressed format designed to minimize file size. JPG or JPEG PNG Joint Photographic Experts Group (JPEG) displays photographs and other continuous-tone images on the web. JPEG format supports CMYK, RGB (millions of colors), and Grayscale color modes. Unlike GIF, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. This is known as lossy compression, and can result in a loss of quality if a high level of compression is applied. In most image editing programs, the amount of compression/loss of quality may be specified. Using the maximum quality option,an image will be indistinguishable from the original photograph. However, files can be saved with lower quality settings that still produce a reasonably good image (suitable for web). JPG does not preserve transparency. Portable Network Graphics (PNG) has the best of both worlds. It was developed based on GIF, for lossless compression and for display of images on the web. Unlike GIF, PNG supports 24 bit images and produces background transparency without jagged edges; however, some older web browsers do not support PNG images. PNG format supports RGB, Indexed Color, Grayscale, and Bitmap mode images. PNG also preserves transparency in grayscale and RGB images.
Summary Photographic images JPG Logos or images with blocks of flat color and no gradients GIF or PNG8 Images using effects (drop shadows or glows) which also require transparency PNG24