Graphics Overview: Using Photoshop V22.0004 - Computers in Principle & Practice I

1. Graphics Overview: Using Photoshop V22.0004 - Computers in Principle & Practice I By Deena Engel with Sana’ Odeh - V22.0004

2. Computer graphics boil down to two basic types: (bitmaps and vectors ) • Bitmap (or raster) graphics: • Bitmap graphics are stored as a series of tiny dots called pixels. • Each pixel is assigned a color, and when they are viewed all together, they form the picture. • Bitmap graphics can be edited by erasing or changing the color of individual pixels. • There are many different bitmap file formats: • TIFF for print; Photoshop's PSD and BMP; and • GIF, JPG, and PNG for the Web. 2. Vector graphics: • Unlike bitmaps, vector graphics are not based on pixel patterns, but instead use mathematical formulas consisting of lines and curves that make shapes. • Vector graphics are ideal for illustrations, line art, and type. • However, with the exception of Macromedia's Flash and Shockwave formats, most browsers do not support vector graphics. • As a result, vectors have to be converted to bitmap (rasterized) before being displayed on the Web. • Some vector graphics file formats include: EPS; Illustrators' AI and WMF; and PICT for the Mac.

3. Types of graphics • Photographic images: • Continuous tones, 24 bit color, no text, few lines and edges • Graphics, Logos, Line art and Screen Captures: • Solid colors, up to 256 colors, with text or lines and sharp edges

4. Image mode (RGB, indexed color, Gray scale, CMYK) • RGB: • Uses millions of colors. Flexible for editing. • Use when working on editing or creating an image (millions of colors). • Save file as .psd . Remember when saving in PSD, this will produce a large file and will not be viewed on the web. The PSD file is good to use while editing file. • Layers are available in this mode and not in gif or jpg, or png (they are compressed/ flattened files) • Jpg/png24, uses RGB but NOT gif. • CMYK: • The CMYK model is based on the light-absorbing quality of ink printed on paper. - Pure cyan (C), magenta (M), and yellow (Y) pigments should combine to absorb all light and produce black. For this reason these colors are called subtractive colors. • Use when working on images for print and save as .tiff and use high resolution (200-600). • Indexed color mode: • 8bit or 256 colors. Used with .gif files. Not flexible to use while editing and you will get chunky result

5. Resolution • Resolution • The resolution of an image describes how fine the dots are that make up that image. • The more dots, the higher the resolution (better quality). • Resolution for the screen/web (dependant on monitor size): • When displayed on a monitor, the dots are called pixels. • A 640-by-480-pixels on screen is capable of displaying 640 distinct dots on each of its 480 lines, or about (640 X 480) 300,000 pixels. • Use 72 - 200 resolution for web (Note: if use higher resolution than 72, your file size will increase and dimensions of height and width as well) • Resolution for printer: • A 300 dpi (dots per inch) printer is capable of printing 300 dots in a line “1 inch” long. • This means it can print 90,000 (300 X 300) dots per square inch • Use 200- 1200 resolution for printing

6. Working with mode: To change your image over to RGB mode: - select Mode from the Image pull down menu and choose RGB Color. To resize image: go back to the Image pulldown and select Image Size. Enter in the size you want (either the pixel dimension or in inches - make sure the resolution box reads "72") and click OK.

7. Graphic format for the web/screen: GIF: Graphic Interchange Format • First graphic format for the web created by CompuServ • Standard gif is 8bits or 216 colors • Transparent gif: GIF89a (No background color: blends into any background since it doesn’t have any background color of is own) • Gif uses “LZW” (Lemple-Zev-Welch) compression. • This compression takes advantage of the repetitions in data streams. • LZW is efficient for storing simple graphic, flat colors, Banners, logo’s (images with little color shading)..

8. Graphic format for the web: • Jpeg or JPG: Joint Photographic Experts • 24 bits... Millions of colors • used for photograph and complex images • Uses Lossy compression method: • which compresses shades of tones that are not visible by the eye without loss of quality • Used to compress photographs

9. PNG (png8 and png 24): • PNG: Portal Network Format • Types of PNG: • Png_8: 8 bits.. 256 colors, good for simple graphics .. Not too many shades of colors • Png_24: 24 bits or millions of colors. Good for complicated images such as photographs. • Lossless compression scheme and better compression than gif

10. Format for Print/editing/scan: Tiff : (great quality image used for print) • TIFF - Image File Format (.TIF files). • TIF files are large, huge even, but it's the price we pay, it's how large the data is. • TIFF is the most universal format, about any program on any platform will handle TIFF. • TIFF has been the format of choice for use for master copies of scanned data for years. • TIFF was developed by Aldus, before Adobe bought them, and is the most widely supported format across other platforms. • Not used on the web • Great for print (good quality), but remember that it’s a large file

11. PSD: standard Photoshop file(.psd) • Uses millions of colors (RGB: red, Green, & blue) • (0-256 shades of red, 0-256 shades of Green, 0-256 shades of blue) • Great for editing / work in progress • Saves with layers / helpful while editing a file • Very Large file • PSD file format will not work on the web … (except in Safari under Mac OS X... Which will display a flattened version of your image.)

12. Other formats: These formats are not commonly used on the web (as they are not supported by all browsers) • BMP (Windows Bitmap) • BMP will handle 24 bit data but it cannot be compressed. • BMP uses RLE (Run Length Encoding) to compress 8 bit data, which is effective in graphics, but much less effective in continuous tones like photos. • PICT (Macintosh Quickdraw) PICT is used in page layout and graphics programs; it creates large files and is not suitable for exchange with Windows programs.

13. Browser color palette: • Browser Safe palate ( web): • Browser uses 256 colors (8 bits). • 40 colors are reserved for its own use • 216 colors are used by the browser • Dithering: browser tries to substitute colors if not part of its palate • Interlace: browser will display image gradually • Anti-alias: blending of pixel colors on perimeter of hard-edge shapes. Smooth edges and not jagged

14. Photoshop tips for the web

15. Graphic format for the web/screen: • File formats to use: gif, jpg or png • To save for the web using Photoshop: • From the FILE menu, select SAVE FOR WEB and then select the desired web format from the window that comes up. • Make sure you select “0” dithering colors (minimal loss of color)

16. General Photoshop tips (such as after scanning) • To reduce image size and resolution: • From the image menu, select “image size” • You can also use the “Crop” tool to remove parts of the image along the perimeter • You can change the orientation of the image: • From the image menu, select “Rotate canvas” • To restore some lost information after resizing image (or scanning) • Apply “unsharp mask”: from “filter menu” choose sharpen then select “unsharp mask” • You can also try to adjust colors (after scanning or changing size of image): • Image menu: select adjustments, then try the following • Curves • Auto levels • Auto contrast • Variations

17. Useful Chart when working with image (web vs print)

18. Overview of Photoshop tools Move object tool - Rectangular marquee tool - press to select Elliptical Marquee tool - Crop tool - used to Shrink image. You can also use to enlarge image -Pencil tool: free hand drawing (uses foreground color) - Press on same tool to select a “Brush” tool - Paint bucket tool - used to paint large area of canvas. It uses colors in the foreground -Type tool - Eye dropper tool -to select a foreground color from image -Foreground color - used when using type, paint bucket, pecil, paint brush -Background color - used when “cut” from edit menu