introduction to media on the web john h. krantz hanover college apa advanced training institute july...
Post on 21-Dec-2015
218 views
TRANSCRIPT
![Page 1: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/1.jpg)
Introduction to Media on Introduction to Media on the Webthe WebJohn H. KrantzJohn H. Krantz
Hanover CollegeHanover College
APA Advanced Training InstituteAPA Advanced Training Institute
July 2005July 2005
![Page 2: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/2.jpg)
OutlineOutline
BackgroundBackground How displays generate imagesHow displays generate images File TypesFile Types Visual Perceptual FactorsVisual Perceptual Factors
ImagesImages AcquiringAcquiring
![Page 3: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/3.jpg)
The General BeastThe General Beast
![Page 4: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/4.jpg)
Screen Mosaic Triad Screen Mosaic Triad ArrangementArrangement
![Page 5: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/5.jpg)
Interlaced ProjectionInterlaced Projection
![Page 6: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/6.jpg)
The Electron BeamThe Electron Beam
0
0.1
0.2
0.3
0.4
0.5
-6 -4 -2 0 2 4 6
![Page 7: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/7.jpg)
Seeing the FlickerSeeing the Flicker
Flicker and Apparent Motion are different phenoFlicker and Apparent Motion are different phenomena!mena!
![Page 8: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/8.jpg)
Graphics vs. ImagesGraphics vs. Images
Some definitions: mine for clarity here:Some definitions: mine for clarity here: Graphics Def: computer generated or drawn Graphics Def: computer generated or drawn
by you.by you. Image: scanned, captured, take photograph Image: scanned, captured, take photograph
or an graphic file not generated by you.or an graphic file not generated by you. Difference: Difference:
In a graphic, you can directly manipulate the In a graphic, you can directly manipulate the elements because you drew them – Spriteselements because you drew them – Sprites
In an image, you can manipulate pixels but not In an image, you can manipulate pixels but not directly the elements. This has a great impact.directly the elements. This has a great impact.
![Page 9: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/9.jpg)
Images or Graphics on the ScreenImages or Graphics on the Screen
Pixels: smallest picture elementPixels: smallest picture element Pixels are not screen dots!!!Pixels are not screen dots!!! Several dots (at least three, one of each color) make Several dots (at least three, one of each color) make
up each pixel)up each pixel)
Bitmat: An array of information that contains the Bitmat: An array of information that contains the information for the image.information for the image. It is a 3 dimensional arrayIt is a 3 dimensional array Width x Height x 24 (8 for each color)Width x Height x 24 (8 for each color) So can be hugeSo can be huge (.bmp and .tif or .tiff are most common bitmaps)(.bmp and .tif or .tiff are most common bitmaps)
![Page 10: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/10.jpg)
Graphic and Image FormatsGraphic and Image Formats
Bitmap (bmp, PCT, Tiff) – big, not good for Bitmap (bmp, PCT, Tiff) – big, not good for webweb
Graphic Interchange Format (Gif) can animate Graphic Interchange Format (Gif) can animate 8 bits of color – palette or lookup table or LUT – 8 bits of color – palette or lookup table or LUT –
no loss of spatial informationno loss of spatial information Can be some legal issues – make sure the Can be some legal issues – make sure the
generator legally can generate GIF’sgenerator legally can generate GIF’s Generally best compression for simple graphics – Generally best compression for simple graphics –
bad for photosbad for photos Can generate transparent regionsCan generate transparent regions Can AnimateCan Animate
![Page 11: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/11.jpg)
Graphics and Image FormatsGraphics and Image Formats
JPGJPG Generally better for images and photosGenerally better for images and photos Spatial not color compression, can distort image Spatial not color compression, can distort image
spatially and more loss with each savespatially and more loss with each save Now can animate as well.Now can animate as well.
![Page 12: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/12.jpg)
Example JPGExample JPG
![Page 13: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/13.jpg)
BMP vs JPEG File SizesBMP vs JPEG File SizesBoth images are the same relative size.
.BMP900kb
.JPEG High Quality ~700kb
![Page 14: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/14.jpg)
ImageJImageJ
Free at: Free at: http://rsb.info.nih.gov/ij/index.htmlhttp://rsb.info.nih.gov/ij/index.html OverviewOverview
Java programJava program Interface a bit awkward because it is freeInterface a bit awkward because it is free Expandable via plug-insExpandable via plug-ins
Covers all basic editing and many advanced - Covers all basic editing and many advanced - very advanced very advanced
Scientific quality image editorScientific quality image editor Used in many technical applicationsUsed in many technical applications
![Page 15: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/15.jpg)
Chromatic IssuesChromatic IssuesThe The TrichromaticTrichromatic Theory TheoryColor Opponent TheoryColor Opponent Theory
Color PickerColor PickerThe Color GamutThe Color Gamut
GlareGlareColor BlindnessColor Blindness
![Page 16: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/16.jpg)
The CIE Color SystemThe CIE Color System
A set of Equations that A set of Equations that allow predictions ofallow predictions ofmatching.matching.
Used in photo printing,Used in photo printing,TV and film.TV and film.
Wyszecki & StilesWyszecki & Stiles(1967)(1967)
The Color GamutThe Color Gamut The range of colors The range of colors
reproducible by any reproducible by any systemsystem
![Page 17: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/17.jpg)
The Effect of Illuminance on The Effect of Illuminance on GamutGamut
0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
0 0.2 0.4 0.6 0.8
x
y
In DarkWith Lights onWith Lights on and 30% Luminance Level
![Page 18: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/18.jpg)
One Color StudyOne Color Study
0.00
20.00
40.00
60.00
80.00
100.00
120.00
140.00
160.00
180.00
200.00
Color
Per
ceiv
ed C
olor
Tem
p
![Page 19: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/19.jpg)
IlluminanceIlluminance
Agostini & Bruno (1996)Agostini & Bruno (1996) Accuracy of the perceived stimulus is affected Accuracy of the perceived stimulus is affected
by the amount of illuminance.by the amount of illuminance. D. F. Neri (1990)D. F. Neri (1990)
Combination of light and gamut changed Combination of light and gamut changed chromaticitychromaticity
Request close windows and turn off Request close windows and turn off unnecessary light unnecessary light
Do not use subtle color differencesDo not use subtle color differences
![Page 20: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/20.jpg)
Color BlindnessColor BlindnessDescription
![Page 21: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/21.jpg)
Color BlindnessColor Blindness
![Page 22: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/22.jpg)
Color BlindnessColor Blindness
![Page 23: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/23.jpg)
Color BlindnessColor Blindness
![Page 24: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/24.jpg)
How to handleHow to handle
Screening questions?Screening questions? Large sample and random assignmentLarge sample and random assignment Pre-test on color blindPre-test on color blind
![Page 25: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/25.jpg)
AliasingAliasing
Technical definition:Technical definition: When an image contains frequencies beyond the When an image contains frequencies beyond the
range of the sampling matrix, the wrap-around and range of the sampling matrix, the wrap-around and occur as lower frequencies, distorting the imageoccur as lower frequencies, distorting the image
![Page 26: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/26.jpg)
AliasingAliasing
Description of aliasingDescription of aliasing Generally try to draw and image that has Generally try to draw and image that has
too fine of detail or sharp edgestoo fine of detail or sharp edges Causes “jaggies”Causes “jaggies” And pixel artifactsAnd pixel artifacts
That is you can notice the pixels That is you can notice the pixels
![Page 27: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/27.jpg)
Aliasing and Pixel Aliasing and Pixel EffectsEffects
![Page 28: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/28.jpg)
Putting a Graphic in a WebpagePutting a Graphic in a Webpage
<p align="center"><img border="0" <p align="center"><img border="0" src=“imagename.gif" width="170" src=“imagename.gif" width="170" height="238“ alt = “ATI Image”></p>height="238“ alt = “ATI Image”></p>
![Page 29: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/29.jpg)
AcquiringAcquiring
ScanningScanning Flatbed gives best quality.Flatbed gives best quality. Use 35 MM film for pictures – best resolutionUse 35 MM film for pictures – best resolution Scan at a high level and sample down laterScan at a high level and sample down later Any model seems good this day.Any model seems good this day.
![Page 30: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/30.jpg)
Scanned ImageScanned Image
![Page 31: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/31.jpg)
Digital CamerasDigital Cameras
No loss in ScanningNo loss in Scanning CCDCCD 3.1 Megapixel at least if need photo quality 3.1 Megapixel at least if need photo quality
and largerand larger They can get huge these daysThey can get huge these days Can use lower image if only need webCan use lower image if only need web
But do not sacrifice image qualityBut do not sacrifice image quality
Easy to downloadEasy to download Can be good in low lightCan be good in low light
![Page 32: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/32.jpg)
Low Light Digital ImageLow Light Digital Image
![Page 33: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/33.jpg)
Taking Photos DigitallyTaking Photos Digitally Focusing: Automatic and ManualFocusing: Automatic and Manual
Regular focus Regular focus Macro – allows focusing up closeMacro – allows focusing up close Spot Focus: focus is determined by pointSpot Focus: focus is determined by point
Shutter SpeedShutter Speed Zoom: Zoom:
Do not use digital zoom – if need more zoom, do Do not use digital zoom – if need more zoom, do it on computer laterit on computer later
On my camera: default is digital zoom off except On my camera: default is digital zoom off except for moviesfor movies
![Page 34: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/34.jpg)
Taking Pictures (cont.)Taking Pictures (cont.)
White Balance, controls for our color White Balance, controls for our color constancyconstancy Effect of the IlluminantEffect of the Illuminant
Flash: Flash: often I keep it off.often I keep it off.
Image Size: Image Size: I keep at standard (full pixel density, some I keep at standard (full pixel density, some
JPG compression). Balance between image JPG compression). Balance between image quality and ability to store on disk ~ 1 quality and ability to store on disk ~ 1 Meg/pictureMeg/picture
![Page 35: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/35.jpg)
Use of FlashUse of FlashFlash No Flash
Watch for reflections. Can get inexpensive table camera tripods.
![Page 36: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/36.jpg)
Brightness and ContrastBrightness and Contrast
Visual MeasuresVisual Measures Visually separate but tied together on computerVisually separate but tied together on computer
![Page 37: Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005](https://reader036.vdocument.in/reader036/viewer/2022062516/56649d645503460f94a47216/html5/thumbnails/37.jpg)
AssignmentAssignment
Take series of images that you might want Take series of images that you might want shown in sequences as part of a studyshown in sequences as part of a study