Graphics - Photoshop Tutorial, Study Guides, Projects, Research of Photoshop

Download Graphics - Photoshop Tutorial and more Study Guides, Projects, Research Photoshop in PDF only on Docsity!

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.

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

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

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

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

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

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 (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) CMYK:mode used for printing Save file as: .tiff Format: Gif or png
• 256 colors (mode: index) Resolution: 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