Graphics Overview:Using Photoshop

V22.0004 - Computers in Principle & Practice I

By Deena Engel with Sana’ Odeh - V22.0004

Computer graphics boil down to two basic types: (bitmaps and vectors )

1. 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.

Types of graphicsTypes of graphics

1. Photographic images: Continuous tones, 24 bit color, no text, few lines and

edges

2. Graphics, Logos, Line art and Screen Captures: Solid colors, up to 256 colors, with text or lines and sharp

edges

Image mode Image mode (RGB, indexed color, Gray scale, CMYK)(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

Resolution 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

Working with mode: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.

Graphic format for the web/screen: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)..

Graphic format for the web:Graphic format for the web:

Jpeg or JPG: Joint Photographic Experts 24 bits... Millions of colorsused 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

PNG (png8 and png 24):PNG (png8 and png 24):

PNG: Portal Network FormatTypes 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

Format for Print/editing/scan: Format for Print/editing/scan: Tiff : Tiff : (great quality image used for print)(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

PSD: standard Photoshop file(.psd)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.)

Other formats: These formats are not Other formats: These formats are not commonly used on the web (as they are not commonly used on the web (as they are not supported by all browsers)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.

Browser color palette: 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

Photoshop tips for the web

Graphic format for the web/screen: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)

General Photoshop tips (such as after scanning)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

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

Image type Editing image/While working on with image

Output to screen/web Output to printer

Photograph(complicated image)

Mode: RGB: best for webSave file as: .psdCMYK: mode used for printingSave file as: .tiff

Format: Jpg or pngMode: RGB-Millions of colors Resolution: 72-200The lower resolution, the lower file size

Format: .tiff or .pict- mode: CMYK-Millions of colors-resolution200-600

Line art image(simple image)

Mode: RGB: mode best for screen Save file as: .psd)

CMYK:mode used for printingSave file as: .tiff

Format: Gif or png8-256 colors (mode: index)Resolution:72The lower resolution, lower file size

Format:.tiff or pict-Millions of colors-resolution: 200-600Mode: CMYK

Scanning Scan at high resolution150-300 web200-600 print

After scanning and editing image, save for desired output as mentioned above

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

- 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

-Pencil tool: free hand drawing (uses foreground color)- Press on same tool to select a “Brush” tool

Overview of Photoshop tools