chapter 3: images
DESCRIPTION
Chapter 3: Images. Yaqoob Al-Slaise ITBIS351. Outline. Plan your approach. “ The organizing and creative process begins with drawings in pen or pencil on paper. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/1.jpg)
Chapter 3: Images
Yaqoob Al-SlaiseITBIS351
![Page 2: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/2.jpg)
Outline
![Page 3: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/3.jpg)
![Page 4: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/4.jpg)
Plan your approach
![Page 5: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/5.jpg)
“The organizing and creative process begins with drawings in pen or pencil on
paper. Too many times we are enthused about the color and the computer graphics tools, but they can overwhelm the creative design
process”.
- Dennis Woytek, Assistant Professor, Duquesne University
![Page 6: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/6.jpg)
Organize your toolsO Many multimedia designers do not
limit their toolkits to the features of a single authoring platform.
O They employ a variety of applications and tools to accomplish many specialized tasks.
![Page 7: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/7.jpg)
Configure Your Computer Workspace
O Have more than one monitor to provide lots of screen real estate (viewing area).
![Page 8: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/8.jpg)
Making Still ImagesO Still images are generated in two
ways:
O BitmapsO Vectors
![Page 9: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/9.jpg)
BitmapsO Used for photo-realistic images and
for complex drawings requiring fine detail.
O Uses ‘Painting’ software i.e. Adobe Photoshop, Paint, etc.
O Are used in many file formats including: .BMP, .GIF, .JPG, .PNG
![Page 10: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/10.jpg)
Bitmaps
![Page 11: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/11.jpg)
Bitmap sourcesO Make a bitmap from scratch with a
paint or drawing program.
O Grab a bitmap from an active computer screen with a screen capture.
![Page 12: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/12.jpg)
Bitmap sourcesO Capture a bitmap from a photo or
other artwork using a scanner to digitize the image.
O Once made, a bitmap can be copied, altered, e-mailed, and otherwise used in many creative ways.
![Page 14: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/14.jpg)
Morphing
![Page 15: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/15.jpg)
Vector DrawingO A vector is a line that is described
by the location of its two endpoints.
![Page 16: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/16.jpg)
Try @ HomeType the following in Notepad:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="-100 -100 300 300"> <rect x="0" y="0" fill="yellow" stroke="red" width="2002" height="100"/> <text transform="matrix(1 0 0 1 60 60) " font-family=" 'TimesNewRomanPS-BoldMT' " font-size="36">SVG</text> </svg>
Save as (.svg) file then open on an HTML 5 compatible browser
![Page 17: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/17.jpg)
SVGO SVG: Scalable Vector Graphic
O Small in size and can be scaled without distortion.
O Supported by mobile browser as an alternative to Flash.
![Page 18: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/18.jpg)
Converting between Bitmaps and Vectors
O From Vector to Bitmap Easy to do with drawing software
O Bitmap to Vector Autotracing ( Can cause great inflation of file size!)
![Page 19: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/19.jpg)
3D Drawing and Rendering
![Page 20: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/20.jpg)
Z axis
![Page 21: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/21.jpg)
Working in 3DO 3D applications
create scenes.
O Scenes consist of numerous objects, the more objects in the scene, the more complex and realistic the scene is.
O Objects are created by modeling them.
![Page 22: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/22.jpg)
3d Modeling
![Page 23: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/23.jpg)
Making models realistic
O Texturing: Applying images as a skin to models to make them look real.
![Page 24: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/24.jpg)
Making models realistic
O Lighting: Setting the mood of the scene or to simulate the environment in a realistic manner.
![Page 25: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/25.jpg)
Making models realistic
O Rendering: When the computer uses intricate algorithms to apply the effects you have specified on the objects you have created.
![Page 26: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/26.jpg)
Computerized Colours
![Page 27: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/27.jpg)
Additive ColoursO a color is created by combining
colored light sources in three primary colors: red, green, and blue (RGB).
![Page 28: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/28.jpg)
Subtractive ColoursO Colour is created by combining
colored media such as paints or ink that absorb (or subtract) some parts of the color spectrum of light and reflect the others back to the eye.
O Subtractive color is the process used to create color in printing (CYMK).
![Page 29: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/29.jpg)
CMYK
![Page 30: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/30.jpg)
Computer Colour Models
O RGB hexidecimal
![Page 31: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/31.jpg)
Computer Colour Models
O HSB (Hue, Saturation, Brightness)
![Page 32: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/32.jpg)
Computer Colour Models
O HSL (Hue, Saturation, Lightness)
![Page 33: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/33.jpg)
Colour PalettesO Palettes are mathematical tables
that define the color of a pixel displayed on the screen
Microsoft Macintosh Web Safe
![Page 34: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/34.jpg)
Color Depth
![Page 35: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/35.jpg)
Dithering
![Page 36: Chapter 3: Images](https://reader035.vdocuments.us/reader035/viewer/2022062223/56814ace550346895db7e6fb/html5/thumbnails/36.jpg)
Image FormatsFormat
Color Depth
Compression
Transparency
Uses
.JPG 24 bit (16.7 million
colours)
Lossy Does not support
• Rich color photogra
phs• Gradients
• Web images
.BMP 24 bit Lossless Does not support
• Native format for Windows
.PNG 8 bit – 24 bit Lossless Supports • Logos• Free format
• Does not support
Animation .GIF 8 bit (256
colors)Lossless Supports • Logos
• Animation