Search in the document preview
Graphics Overview: Using Photoshop
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 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
Image mode (RGB, indexed color, Gray scale, CMYK)
• 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.
• 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
- 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
• 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:
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: 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:
• 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
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
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
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 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
• PICT (Macintosh Quickdraw) PICT is used in page layout and graphics
programs; it creates large files and is not suitable for exchange with Windows
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:
• 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)
• 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
• 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
Useful Chart when working with image (web vs print)
Image type Editing image/While working on with image
Output to screen/web Output to printer
Mode: RGB: best for web
Save file as: .psd
CMYK: mode used for printing
Save file as: .tiff
Format: Jpg or png
-Millions of colors
The lower resolution, the lower file size
Format: .tiff or .pict
- mode: CMYK
-Millions of colors
Line art image
RGB: mode best for screen
Save file as: .psd)
CMYK:mode used for printing
Save file as: .tiff
Gif or png8
-256 colors (mode: index)
The lower resolution, lower file size
.tiff or pict
-Millions of colors
Scanning Scan at high resolution
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
- Eye dropper tool
-to select a foreground color from image
- used when using type, paint bucket, pecil, paint brush
- 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