Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Digital Imaging


Published on

  • Be the first to comment

Digital Imaging

  1. 1. Introduction to Digital Images Jun Yang
  2. 2. Types of Digital Images <ul><li>Raster image, is mapped as spots of color, or pixels. </li></ul><ul><li>Vector use mathematical formulas to describe outlines and fills for image objects. </li></ul>
  3. 3. Digital Images: Resolution <ul><li>Number of pixels used to represent an image, arranged in rows and columns (the density of pixels in an images) </li></ul><ul><li>It’s measured in ppi or dip (points per inch or dots per inch) </li></ul>
  4. 4. Resolution and Size <ul><li>Higher Resolution </li></ul><ul><li>= Larger File Size </li></ul><ul><li>= Better Quality </li></ul>
  5. 5. Digital Images: Resolution <ul><li>Web images: 72 ppi </li></ul><ul><li>On-screen: 96 ppi to 150 ppi </li></ul><ul><li>Printing: 300 ppi for non-professional printing </li></ul>
  6. 6. Digital Images: File Formats <ul><li>Web Formats (compressed format) </li></ul><ul><ul><li>JPG: for photos </li></ul></ul><ul><ul><li>GIF: for line </li></ul></ul><ul><ul><li>arts/illustrations </li></ul></ul><ul><ul><li>PNG: yield a much sharper output when compared with JPG, </li></ul></ul><ul><li>Printing Formats (uncompressed) </li></ul><ul><ul><li>TIFF </li></ul></ul><ul><ul><li>PICT-Mac format </li></ul></ul>
  7. 7. Preparing Pictures For Web <ul><li>Image File Size </li></ul><ul><li>Detail (/Color Depth) </li></ul><ul><li>Image Quality (Resolution) </li></ul><ul><li>Pixel dimensions </li></ul>
  8. 8. Preparing Pictures For Web <ul><li>Basic Rule for Website Graphics </li></ul><ul><li>Use jpeg or png for photos and gif for logos </li></ul><ul><li>Optimize image file sizes/Basic Editing </li></ul><ul><li>Last: Embed the picture to a web page </li></ul>
  9. 9. Embed images for the web HTML Code <img src=“lamp.gif” height= width= align=“right” alt=“lamp”>
  10. 10. Tips for using web images <ul><li>Always Optimize images before use in web pages </li></ul><ul><li>Use Thumbnails to link to large images </li></ul><ul><li>Don’t use graphics of text where in-line text will serve. </li></ul><ul><li>Re-use the same graphics throughout the site. </li></ul><ul><li>Allways use WIDTH and HEIGHT attributes to declare the dimensions of the image. </li></ul><ul><li>Shoot for a file size of 30 to 100 KB per image. </li></ul>
  11. 11. Digital Images: Graphic Editors <ul><li>Picasa (free) </li></ul><ul><li>Gimp (free) </li></ul><ul><li>Adobe Photoshop </li></ul><ul><li>Adobe Photoshop Element </li></ul><ul><li>Macromedia FireWorks </li></ul>
  12. 12. Editing Images <ul><li>Three of the most common image editing tasks: </li></ul><ul><li>Cropping </li></ul><ul><li>Resizing </li></ul><ul><li>Removing red-eye </li></ul><ul><li>We will learn other image editing tasks in Photoshop module. </li></ul>
  13. 13. Digital Images <ul><li>For higher quality images from web, try the Advanced Search feature of </li></ul><ul><li>Checking the “Creative Commons” box. </li></ul><ul><li>Look for images you can use free of charge (check the licensing information first). </li></ul><ul><li>Microsoft site has free graphics for academic use. </li></ul>