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.



Published on

Introduction to Digital Imaging
Web 130
Web Design and Multimedia
Professor - Jun Yang
Student - Gary McDowell

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this


  1. 1. Introduction to Digital ImagingHarrisburg Area Community CollegeWeb 130 – Web Design and MultimediaWeek 10 & 11 – Digital AudioProfessor – Jun YangStudent – Gary McDowell Company LOGO
  2. 2. Outline1. Why Use Images?2. Bitmaps and Vectors3. Resolution4. File Formats
  3. 3. Why use Images? 1 2 3 4To show To clarify To create an Avoid usinginformation that interpretation evident images that arecan better be of information context for unrelated tocommunicated by applying information by your content!visually, such color using images Decoration mayas, maps, schemes. that your be distractingcharts and audience can and evendiagrams. associate with confusing. your tone or message.
  4. 4. Bitmaps and Vectors In a Bitmap or raster image,  Vector or object oriented visual data is mapped as spots graphics use mathematical of color, or pixels. When formulas to describe outlines enlarged on a computer and fills for image objects. screen, a bitmap image looks Vector graphics can be like a quilt or mosaic. The enlarged or reduced with no more pixels in a bitmap image, loss of data and no change in the finer the detail will be. image quality. Scanners and digital  CorelDraw, and Flash create cameras produce bitmap vector graphics. Vector images, and Photoshop is a graphics are the best choice bitmap program. for logos, and images that do Bitmap formats include: PSD, not have complicated patterns. TIFF, JPEG, PNG, GIF, PICT,  Vector file formats include: BMP EPS, AI, SVG, DXF, DWG
  5. 5. ResolutionResolution is the term used to describe the number of dots or pixelsused to display an image. Measured in ppi or dpi (points per inch ordots per inch). Higher resolution means that more pixels are used tocreate the image, resulting in a crisper, cleaner image.________________________________________________________Resizing Images:Scaling down a bitmap image usually gives satisfactory resultsScaling up a bitmap results in a blurry, poor quality image________________________________________________________Options:Web images: 72 ppiOn-screen: 96 ppi to 150 ppiPrinting: 300 ppi for non-professional printing Printed documents can require 150-1200 ppi depending on the kind of printer and the quality of image desired.
  6. 6. File Formats Originals Not Web Output Formats Recommended for Web JPG or JPEG for photos  PSD - Photoshop GIF for line art,  AI – Illustrator illustrations, and logos  FLA – Flash PNG yield much sharper  PPT – PowerPoint output when compared  Docx – MS Word with JPG  AEP – Adobe after effects
  7. 7. Tips for using Web Images Always use WIDTH and HEIGHT attributes to declare dimensions of image Shoot for file Re-use the same size 30 to graphics 100 kb throughout per image the site Always Optimize images beforeDo not use use in web pagegraphics of textwhere in-line text Use thumbnailswill serve to link to larger images
  8. 8. References Slide Reference:  Why use Images? *1  Bitmaps and Vectors *1 and *2  Resolution *2  File Formats *2  Web Image Tips *2 Music by Mike Vekris – Relaxation Narrator Gary McDowell, HACC Web Student______________________________________________________________*1 Umass Office of Information Technology, Basics of Digital Images, July 2002*2 HACC Web 130 - Web Design and Multimedia, Tips for Using Web Images, Jun Yang, Spring 2012