1 / 18

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

Learn about the two basic types of computer graphics - bitmap and vector graphics. Understand their characteristics, file formats, and best uses in various contexts.

dcarlton
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related