1 / 37

Introduction to Media on the Web

Introduction to Media on the Web. John H. Krantz Hanover College APA Advanced Training Institute July 2005. Outline. Background How displays generate images File Types Visual Perceptual Factors Images Acquiring. The General Beast. Screen Mosaic Triad Arrangement.

malpass
Download Presentation

Introduction to Media on the Web

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. Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005

  2. Outline • Background • How displays generate images • File Types • Visual Perceptual Factors • Images • Acquiring

  3. The General Beast

  4. Screen Mosaic Triad Arrangement

  5. Interlaced Projection

  6. The Electron Beam

  7. Seeing the Flicker • Flicker and Apparent Motion are different phenomena!

  8. Graphics vs. Images • Some definitions: mine for clarity here: • Graphics Def: computer generated or drawn by you. • Image: scanned, captured, take photograph or an graphic file not generated by you. • Difference: • In a graphic, you can directly manipulate the elements because you drew them – Sprites • In an image, you can manipulate pixels but not directly the elements. This has a great impact.

  9. Images or Graphics on the Screen • Pixels: smallest picture element • Pixels are not screen dots!!! • Several dots (at least three, one of each color) make up each pixel) • Bitmat: An array of information that contains the information for the image. • It is a 3 dimensional array • Width x Height x 24 (8 for each color) • So can be huge • (.bmp and .tif or .tiff are most common bitmaps)

  10. Graphic and Image Formats • Bitmap (bmp, PCT, Tiff) – big, not good for web • Graphic Interchange Format (Gif) can animate • 8 bits of color – palette or lookup table or LUT – no loss of spatial information • Can be some legal issues – make sure the generator legally can generate GIF’s • Generally best compression for simple graphics – bad for photos • Can generate transparent regions • Can Animate

  11. Graphics and Image Formats • JPG • Generally better for images and photos • Spatial not color compression, can distort image spatially and more loss with each save • Now can animate as well.

  12. Example JPG

  13. BMP vs JPEG File Sizes Both images are the same relative size. .BMP900kb .JPEG High Quality ~700kb

  14. ImageJ • Free at: http://rsb.info.nih.gov/ij/index.html • Overview • Java program • Interface a bit awkward because it is free • Expandable via plug-ins • Covers all basic editing and many advanced - very advanced • Scientific quality image editor • Used in many technical applications

  15. Chromatic Issues The Trichromatic Theory Color Opponent Theory Color Picker The Color Gamut Glare Color Blindness

  16. The CIE Color System • A set of Equations that allow predictions of matching. • Used in photo printing, TV and film. • Wyszecki & Stiles(1967) • The Color Gamut • The range of colors reproducible by any system

  17. The Effect of Illuminance on Gamut In Dark With Lights on With Lights on and 30% Luminance Level

  18. One Color Study

  19. Illuminance • Agostini & Bruno (1996) • Accuracy of the perceived stimulus is affected by the amount of illuminance. • D. F. Neri (1990) • Combination of light and gamut changed chromaticity • Request close windows and turn off unnecessary light • Do not use subtle color differences

  20. Color Blindness Description

  21. Color Blindness

  22. Color Blindness

  23. Color Blindness

  24. How to handle • Screening questions? • Large sample and random assignment • Pre-test on color blind

  25. Aliasing • Technical definition: • When an image contains frequencies beyond the range of the sampling matrix, the wrap-around and occur as lower frequencies, distorting the image

  26. Aliasing • Description of aliasing • Generally try to draw and image that has too fine of detail or sharp edges • Causes “jaggies” • And pixel artifacts • That is you can notice the pixels

  27. Aliasing and Pixel Effects

  28. Putting a Graphic in a Webpage • <p align="center"><img border="0" src=“imagename.gif" width="170" height="238“ alt = “ATI Image”></p>

  29. Acquiring • Scanning • Flatbed gives best quality. • Use 35 MM film for pictures – best resolution • Scan at a high level and sample down later • Any model seems good this day.

  30. Scanned Image

  31. Digital Cameras • No loss in Scanning • CCD • 3.1 Megapixel at least if need photo quality and larger • They can get huge these days • Can use lower image if only need web • But do not sacrifice image quality • Easy to download • Can be good in low light

  32. Low Light Digital Image

  33. Taking Photos Digitally • Focusing: Automatic and Manual • Regular focus • Macro – allows focusing up close • Spot Focus: focus is determined by point • Shutter Speed • Zoom: • Do not use digital zoom – if need more zoom, do it on computer later • On my camera: default is digital zoom off except for movies

  34. Taking Pictures (cont.) • White Balance, controls for our color constancy • Effect of the Illuminant • Flash: • often I keep it off. • Image Size: • I keep at standard (full pixel density, some JPG compression). Balance between image quality and ability to store on disk ~ 1 Meg/picture

  35. Use of Flash Flash No Flash Watch for reflections. Can get inexpensive table camera tripods.

  36. Brightness and Contrast • Visual Measures • Visually separate but tied together on computer

  37. Assignment • Take series of images that you might want shown in sequences as part of a study

More Related