Working with Images William Pegram April 1, 2013

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 2

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 (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 3

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 4

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 5

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 6

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

Bitmap Creation Tools in Fireworks Brush tool Pencil tool 8

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 9

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