Graphics Overview:

1

• Graphics Overview
• Using Photoshop
• V22.0004 - Computers in Principle Practice I
• 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 doesnt 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, logos (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
  its 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)
Image type Editing image/While working on with image Output to screen/web Output to printer
Photograph (complicated image) Mode RGB best for web Save file as .psd CMYK mode used for printing Save file as .tiff Format Jpg or png Mode RGB -Millions of colors Resolution 72-200 The 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) CMYKmode used for printing Save file as .tiff Format Gif or png8 -256 colors (mode index) Resolution72 The lower resolution, lower file size Format .tiff or pict -Millions of colors -resolution 200-600 Mode CMYK
Scanning Scan at high resolution 150-300 web 200-600 print After scanning and editing image, save for desired output as mentioned above
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