Introduction to Digital ImagingHarrisburg Area Community CollegeWeb 130 – Web Design and MultimediaWeek 10 & 11 – Digital AudioProfessor – Jun YangStudent – Gary McDowell Company LOGO
Outline1. Why Use Images?2. Bitmaps and Vectors3. Resolution4. File Formats
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.
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
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 resultsScaling 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.
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
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
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