08: Static Interactive Media Component: Graphics

1. 08: Static Interactive Media Component: Graphics

2. Why graphics are an essential part of interactive media • This is a visual medium. • Graphics applications are used to make/size/stylize: • Buttons • Charts and Diagrams • Photographs • Interface Design

3. Types of Graphics • Bitmapped or raster or pixel-based images. • Created/edited in Photo Editing applications like Adobe PhotoShop • Vector-drawn images. • Created/edited in Drawing programs like Adobe Illustrator • 3-D graphics. • Created/edited in 3-D programs like Maya, 3D Studio Max, LightWave

4. BITMAPPED GRAPHICS

5. What is a Bitmap Graphic • Made up of pixels • Each pixel is one color • Pixel – short for picture element. • Computers store bitmapped images as the description of the pixels

6. Pro/Cons of Bitmap Images • Pro: can create a photorealistic representation. • Pro: can be displayed within a web browser. • Con: file sizes can get large • Con: finite number of pixels – will not look great at every size. Introduction to Interactive Media

7. Line art is 1-bit color Types of Bitmapped Images • Line art • Each pixel is either black or white • Grayscale • Each pixel is a shade of grey • Color • Each pixel is a color.

8. Image Resolution • How many pixels in an area. • Stated in or ppi (pixel per inch) or dpi (dots per inch)

9. Resolution Example Introduction to Interactive Media

10. Image Resolution • Higher resolution • Captures more detail. • Pixels are smaller and closely packed. • Produces sharper, more accurate images. • Lower resolution • Captures less detail. • Pixels are larger. • Images appear fuzzy. • High resolution yield large file sizes but better image quality.

11. Common Resolution Settings • Dimensions of an image depend on the resolution of the output device. • Monitors have low resolution: 72 ppi (Mac) or 96 ppi (PC). • Printers have higher resolutions: 300 dpi to 2400 dpi. So do images for print or images for web tend to be larger?

12. Resampling Bitmapped Image • Downsampling: reducing the pixels in the file can produce smaller images that maintain good quality. • Best Practice: • Capture at highest possible spatial resolutions when possible and downsample as needed for various uses of the image.

13. Resampling Bitmapped Image • Upsampling used to enlarge the physical dimensions of an image on a given device. • Software creates additional pixels for the image. • Algorithms interpolate the pixel and color to add. • Can significantly degrade the original image.

14. Bitmapped Image Quality • Image quality depends on color resolution and bit depth • Resolution = density of pixels per inch. • Bit depth = number of colors each pixel can display (remember example from color lecture?)

15. Bitmapped Image Sources • Paint (or Photo Editing) programs • Specialized software for creating bitmapped images. • Photoshop • Paint • Digital cameras • Number of pixels sampled by the camera is the camera's spatial resolution. • Measured in megapixels.

16. Bitmapped Image Sources • Scanner • Capture existing or original art image • Capture 3-D objects • Stock image databases • Royalty free • Licensed usage • Screen grab • Save image on monitor to a bitmapped file • Spatial resolution is generally low

17. Bitmapped File Formats • Common bitmap file formats are: • PSD (PhotoShop native format) • TIFF (good for print – lossless compression) • JPEG (can be used on web) • GIF (can be used on web, 8 bit format, supports transparency, can have multiple frames to create animated sequence) • PNG (can be used on web – developed by W3C due to license fee associated with GIF)

18. Bitmap Image Manipulation Software • Adobe PhotoShop is dominant application for Bitmap image manipulation. • Alternatives: • GIMP – open source alternative • Aperture – made by Apple

19. VECTOR GRAPHICS

20. Vector Drawn Graphics • Vector: a line with length, curvature, and direction. • Vector graphics: images created from mathematically defined shapes. • Draw (or illustration) programs: software used to create vector graphics.

21. Anatomy of a Vector Graphic • Vector shapes can be comprised of a stroke and a fill. • They can also exist without either. (use Outline mode in Illustrator to see all shapes created). Introduction to Interactive Media

22. Vector Drawn Graphics • Vector Based Drawing Tools: • Fixed shapes • Bezier curves • Freehand drawing tools • Interactions between simpler objects can be used to create more complex objects • Grouping joins individual shapes. • Ungrouping restores image to separate shapes. • Boolean tools causes interaction between two shapes. Introduction to Interactive Media

23. Pro/Cons of Vector Images • Pro: can be scaled and look crisp and clean at any size • Pro: smaller file size • Con: can not be displayed within a web browser. • Con: difficult to use vector graphic to generate a photo realistic effect. Introduction to Interactive Media

24. How do you go from vector to bitmap and vice versa • Autotracing: bitmap -> vector • Rasterizing: vector -> bitmap Introduction to Interactive Media

25. Vector File Formats • Files are saved in native format or general purpose formats. • Native format: dependent on the application. • For Adobe Illustrator files - the format if .AI • General purpose: can be used in many applications. • EPS—Encapsulated Postscript.PDF— Portable Document Format. Introduction to Interactive Media

26. 3-D Computer Graphics Introduction to Interactive Media • Produce the Illustion of Depth on a Flat Surface

27. What is a 3-D Graphic • Created in a 3-D space • Vector based model • 2-D bitmap images produced from views of the 3-D model. Introduction to Interactive Media

28. 3-D Graphics • Four interconnected steps in creating 3-D images: • Modeling • Surface definition • Scene composition • Rendering Introduction to Interactive Media

29. Step 1: Modeling • Process of specifying the shape of the 3-D object. • Many different approaches to modeling Introduction to Interactive Media

30. Modeling Techniques • Four modeling techniques: • Polygon modeling • Spline modeling • Metaball modeling • Formula modeling Introduction to Interactive Media

31. Modeling Techniques • Modelers have ability to: • Extrude: extend a 2-D shape through space to create a 3-D object. • Lathe: rotate a 2-D line on an axis. Introduction to Interactive Media

32. Step 2: Surface Definition • Surface definition: where textures are applied to the model's surface. • Menu choices of surfaces include wood, glass, metal, skin. • Can vary the appearance of surfaces with color, opacity, reflectivity. • Custom surfaces include: • Image maps • Bump maps. Introduction to Interactive Media

33. Step 3: Scene Composition • Objects are arranged, backgrounds introduced, environmental effects added, and lighting established. • Lighting choices in a scene include: • Omni lights • Directional lights • Spot lights • Volumetric light. • Adjust lighting with brightness, color, and attenuation. Introduction to Interactive Media

34. Step 4: Rendering • Computer creates the scenes specified by the artist. • Two main approaches: • Pre-rendering • Used primarily for still graphics, animation, and video with limited interactivity. • Real-time rendering • Used for highly interactive 3-D applications such as video games. Introduction to Interactive Media

35. Final Render • Final rendering translates 3-D information to a 2-D image. • Rendering engines apply effects to the finished product such as shadows, reflections, bumps, transparencies and lighting considerations. • Successful rendering requires processing power, time, and artistic talent. Introduction to Interactive Media

36. See how 3-D Modeling Works • http://www.youtube.com/watch?v=oldRd36hpxg&feature=related Introduction to Interactive Media