Working with Images

1. Working with Images William Pegram April 1, 2013

2. Resizing Images • For both web and print work, when working with images that you don’t create yourself in a graphics program, by far the most common action is resizing images • When resizing for the web, you normally want to use 72 pixels per inch; for print, at least 300 pixels per inch

3. Exporting from Image Created in Graphics Program to the Web • Graphics program will provide a choice of gif and jpg format and allow you to compare the appearance and file size of the two alternatives • General rule: jpg for photographs, gif for everything else, • When you do the export, you can also choose the quality • Tradeoff between perceived quality and image file size within each format • Jpg – quality setting between 1-100 (100 largest file size, best quality) • Gif – number of colors (256, 128, 64, 32, 16, 8, 4, 2); Fireworks uses a default setting of 80 for quality because higher values often don't noticeably improve quality but considerably increase file size

4. GIF Image Format • gif • Limited to 256 colors • Supports transparency • Supports animation (animated gif) • "Lossless" compression – but if original has more than 256 colors, going to 256 colors loses information • Compression algorithm takes advantage of areas of constant color

5. JPG Format • Any jpg can have over 17 million colors (256 possibilities in Red x 256 possibilities in Green x 256 possibilities in Blue) • No transparency, no animation • Better format for photographs than gif because of lots of colors in photographs • Compression algorithm is lossy (one loses information) so if one is making a series of changes in a jpg, best to make all changes before saving rather than saving as one goes along

6. Vector and Bitmap Graphics • Vector graphics represent shapes in a mathematical way where bitmaps represent the color of each individual pixel • Vector graphics can be blown up without loss of quality whereas enlarging a bitmap can lead to pixelated look • Fireworks groups tools into vector and bitmap categories

7. Vector Tools in Fireworks • Line • Pen • Rectangle/ellipse Tools – Holding down shift key constrains to a square and circle, respectively

8. Bitmap Creation Tools in Fireworks • Brush tool • Pencil tool

9. Bitmap Selection Tools in Fireworks • If one creates an object in Fireworks, it is easy to select that object (using the Selection tool) to move, copy, or alter the object • However, often one is working with an existing image that has been "flattened" and thus one can't simply click on something to select it – the entire image is simply one bitmap object • Thus bitmap selection tools must be used to select portions of the image for moving, copying, or altering

10. Bitmap Selection Tools • Marquee tools • Lasso tools - • Magic Wand tool