Fireworks Bitmap Graphics Hands on practice notes Topics of discussion 1. Saving files in Fireworks (PNG formats) - Review 2. Basic Panels Tool, Property, Layer & Optimize - Overview 3. Selection/Editing Panels - Overview 4. Shortcut keys Reminders 5. Raster tools 6. Optimization as JPG/GIF 7. Terminology Basic Panels to note in Fireworks (Review) Raster Tools Carolyn Tan 2/5/2013 1
Selection & Edit tools Working with Raster Tools in Fireworks Firework Raster Tools 2/5/2013 Carolyn Tan 2
Exercise 01 Importing & editing images in Fireworks 1. Open a new document (Ctrl/Cmd N) Canvas Size 800 by 400 px; 72dpi 2. Import 2parrots.jpg into Fireworks from the resources folder 3. Note cursor icon (You have 2 options) o 1. Click on the document window. What do you get? o 2. Click hold and drag, then release. What do you get? 4. Select the object. 5. Replicate the object using o copy paste, o duplicate tool and o clone tool from the Edit Menu. What are your observations? 6. Practice the following using the selection tool, watching the property and layer panel o Resize, scale, skew distort EXERCISE 02 Using the Bitmap tools Marquee selections 1. Select the image 2. Click on the marquee tool. Note Property panel. What are the options available? 3. Click hold and drag to make a selection. Practice copy and pasting using the short cut keys. 4. Apply hard edge, anti-aliasing and/or feathering options before you select any marquee options 5. Make additional selections with a. Lasso tool b. Magic wand tool c. Selection Menu> Select similar d. Selection Menu> Select inverse e. Selection Menu> Feather Exercise 03 Working with inserting new layers & Using the brush & pencil tools 1. Layer Panel: Note that image will be edited if new layer is not inserted. Insert A New layer if you wish to create a new BMP layer with the pencil or brush tool. ON THE LAYER PANEL, LOCK THE LAYER THAT YOU DO NOT WISH TO EDIT BY CLICKING THE BOX NEXT TO THE EYE ICON. It will turn into a lock icon. 2. Property Panel: Upon clicking on each of the brush or pencil tool, note options available. Experiment with the various options on the new layer you created. Exercise 04 Deleting objects 1. Eraser tool 2. Selecting with selection tool/marquee and deleting Exercise 05 Retouching bitmaps 1. Edit your graphic with the following tools Rubber Stamp tool lets you copy or clone one area of an image to another. Property panel options Source Aligned affects the sampling operation. When Source Aligned is selected, the sampling pointer moves vertically and horizontally in alignment with the second. When Source Aligned is deselected, the sample area is fixed, regardless of where you move and click the second pointer. Use Entire Document samples from all objects on all layers. When this option is deselected, the Rubber Stamp tool samples from the active object only 1. Blur tool decreases the focus of selected areas in an image 2. Smudge tool picks up color and pushes it in the direction that you drag in an image 3. Sharpen tool sharpens areas in an image 4. Dodge tool lightens parts of an image 5. Burn tool darkens parts of an image 6. Red-eye Removal tool reduces the appearance of red eye in photos (You may want to work on a photograph of a person with this example) 7. Replace Color tool paints over one color with another color Firework Raster Tools 2/5/2013 Carolyn Tan 3
Exercise 06 Working with live effects from property panel 1. Select image any apply live effects from the property panel (See diagram below) Exercise 07 Working with blend modes through the use of layers View examples and definition of blendings located at class website http://swc2.hccs.edu/tan/wafall07/fireworkslectures/04ablendmodes/blendmodes.pdf Exercise 08 Optimizing your files as JPG/GIFs 1. Select the optimize panel. Then select the type of file you would like to optimize your working copy as. 2. Select File Menu>Export 3. Name your file and Select save as type>images only (You will learn how to export them as HTML in the next lesson) Firework Raster Tools 2/5/2013 Carolyn Tan 4
Note that there are 2 preview panels where you can view your optimized files. 1. Fireworks Preview panel (comparison with different settings -2up/4up) 2. Browser preview (F12 to preview in primary browser or Ctrl/Cmd F12 for secondary browser) Preview panel in Fireworks (4-up preview) Firework Raster Tools 2/5/2013 Carolyn Tan 5
Terminology (Reference Link and resource information http://www.wepopedia.com and http://www.mich.com/~fandreae/glossary2_f.html#s) Anti alias In computer graphics, antialiasing is a software technique for diminishing jaggies - stairstep-like lines that should be smooth. Jaggies occur because the output device, the monitor or printer, doesn't have a high enough resolution to represent a smooth line. Antialiasing reduces the prominence of jaggies by surrounding the stairsteps with intermediate shades of gray (for gray-scaling devices) or color (for color devices). Although this reduces the jagged appearance of the lines, it also makes them fuzzier Feathering Feathering is the process of softening the edges of an image in the foreground so that it blends into the background image with less contrast Pixel Short for Picture Element, a pixel is a single point in a graphic image. Graphics monitors display pictures by dividing the display screen into thousands (or millions) of pixels, arranged in rows and columns. The pixels are so close together that they appear connected. The number of bits used to represent each pixel determines how many colors or shades of gray can be displayed. For example, in 8-bit color mode, the color monitor uses 8 bits for each pixel, making it possible to display 2 to the 8th power (256) different colors or shades of gray. On color monitors, each pixel is actually composed of three dots -- a red, a blue, and a green one. Ideally, the three dots should all converge at the same point, but all monitors have some convergence error that can make color pixels appear fuzzy. The quality of a display system largely depends on its resolution, how many pixels it can display, and how many bits are used to represent each pixel. VGA systems display 640 by 480, or about 300,000 pixels. In contrast, SVGA systems display 800 by 600, or 480,000 pixels. True Color systems use 24 bits per pixel, allowing them to display more than 16 million different colors. Pixel is a measurement of how a monitor displays an image. The resolution of an image displayed on a monitor is determined by its ppi, or the number of pixels contained within one square inch of monitor space. Midtones An area of medium brightness, neither a very dark shadow nor a very bright highlight. A medium gray tone in a print. Shadows Dark areas Highlights A very bright area in a scene, print, or transparency; a very dense, dark area in a negative. Also called a high value. Masking The act of blocking out light from selected areas of an image for various purposes; for example, to cover the edges of a piece of printing paper during exposure to produce white borders. Hue, Saturation, Value, Tints, Shades (Refer to Notes on Color theory) Firework Raster Tools 2/5/2013 Carolyn Tan 6