1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.
-
Upload
rafe-kelly -
Category
Documents
-
view
216 -
download
1
Transcript of 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.
![Page 1: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/1.jpg)
11
LECTURE 5LECTURE 5
THE USES OF IMAGES IN MULTIMEDIATHE USES OF IMAGES IN MULTIMEDIA
Prepared by Prepared by Cik Nor Anita Fairos bt IsmailCik Nor Anita Fairos bt Ismail
![Page 2: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/2.jpg)
22
Objective
What is an image?
The types of image Bitmap Vector
3D models
Hardware used to acquire / edit images
Converting from one format to another
![Page 3: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/3.jpg)
33
What is an image?
An image is the graphical and visual representation of some information that can be displayed on a computer screen or printed out
Images come in a variety of forms: Photographs Drawings Paintings Television and motion pictures Semantics Maps etc.
![Page 4: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/4.jpg)
44
Images show us the prominent features of the objects that they represent.
These images are composed quite differently, each is an effective representation of its subject
What is an image?
![Page 5: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/5.jpg)
55
What is an image?
Images play an important part in multimediaNavigationUser interface componentsHelp systemsClip art
![Page 6: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/6.jpg)
66
Image media types
Images can be generally divided into two formats: Bitmapped or raster images Vector graphics or Metafile images
Bitmapped images are stored as an array of pixels
Vector graphics are stored as the set of graphic primitives required to represent the image
![Page 7: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/7.jpg)
77
Bitmaps Image
A pixel is the smallest element of resolution on a computer screen (Screen Resolution)
A pixel is the basic unit of a digital images. Digital image is a picture that may be stored in, displayed on, processed by a computer.
As mentioned, bitmap is composed of a matrix elements called pixels
Each pixel can be in a specific colour and each pixel consists of two or more colors.
![Page 8: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/8.jpg)
88
Bitmaps Image
The range of these colours is known as the colour depth.
The color depth determined “How much data in bits used to determined the number of colors”.
Colour depth is measured in bits per pixelRemember: a bit (binary digit) is either 1 or 0 and
that there are eight bits in a byte
![Page 9: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/9.jpg)
99
Colour depth1 bit per pixel = 2 colours (monochrome)
2 bits per pixel = 4 colours
4 bits per pixel = 16 colours
8 bits per pixel = 256 colours
Generally good enough for colour images
16 bits per pixel = 65536 colours
Better quality for photograph-like images, also known as high colour
24 bits per pixel = >16 million possible colours
Used to recreate photo realistic images, also known as true colour
![Page 10: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/10.jpg)
1010
Bitmaps Image
The more colours that are allowed per pixel, the greater the size of the image
The number of pixels is related to the size of file that required to store an image.
Remember, two factors effect the size file bitmap are:ResolutionColor Depth
![Page 11: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/11.jpg)
1111
Bitmapped images
Original imageOriginal image
Shown Shown magnifiedmagnified
![Page 12: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/12.jpg)
1212
8bytesinsize
depthcolourheightwidth
Calculating the sizeof a raster image
Where: Width of the images measured in pixels Height of the images measured in pixels Colour depth is the number of bits used for color
measured in bits per pixel
Remember: 1024 bytes = 1 kilobyte (KB) 1024 kilobytes = 1 megabyte (MB)
![Page 13: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/13.jpg)
1313
Example
A 640 x 480 pixel image in 24-bit colour would require how much disk space?
900KB
bytes9216008
7372800
8
24480640bytesinsize
![Page 14: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/14.jpg)
1414
Popular bitmap formats
Microsoft bitmap (.bmp)Used in microsoft windows
TIFF - Tagged Image File Format (.tif)Used for faxing images (amongst other things)
JPEG - Joint Photographic Expert Group (.jpg)Useful for storing photographic images
![Page 15: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/15.jpg)
1515
Popular bitmap formats
GIF - Graphics Interchange Format (.gif)Used a lot on web sites
PNG - Portable Network Graphics (.png)A new format for web graphics
PCD – Kodak photo CDA new format for store image in a compressed form
on a CD
![Page 16: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/16.jpg)
1616
Advantages and Disadvantages of using bitmap images
AdvantagesConvey detail of information quicklyReal life
DisadvantagesDepend on a ResolutionEffect to the image quality Size file is big
![Page 17: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/17.jpg)
1717
Software to create bitmap images
Popular PC packages include: Microsoft Paint
Included with microsoft windows Microsoft PhotoDraw 2000
http://www.microsoft.com/office/photodraw/ Adobe Photoshop
http://www.adobe.com/products/photoshop/main.html Paint Shop Pro
http://www.jasc.com/psp6.html Macromedia Fireworks
http://www.macromedia.com/software/fireworks/productinfo/
![Page 18: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/18.jpg)
1818
Vector images
Vector images are stored as the set of graphic primitives required to represent the image
A graphic primitive is a simple graphic based on drawing elements or objects such as shapee.g. square, line, ellipse, arc, etc.
The image consists of a set of commands (mathematical equations) that are drawn the object when needed.
![Page 19: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/19.jpg)
1919
Vector images
Storing and representing images by mathematical equations is called vector graphics or Object Oriented graphics.
Each primitive object has various attributes that go to make up the entire image
e.g. x-y location, fill colour, line colour, line style, etc.
Example: RECTANGLE : rectangle top, left, width, height, color
is ( 0, 0, 200, 200, red)
![Page 20: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/20.jpg)
2020
Vector images
CIRCLE : circle top, left, radius, colorLINE : Line x1, y1, x2, y2, color
Vector image or vector graphics can be resized without
losing the integrity of the original image.
Scaling a vector is a mathematical operation - only the attributes change, the image is unaffected
Q: Could you defined what the different between a digital image and Computer Graphics or graphics?
![Page 21: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/21.jpg)
2121
Primitive geometric drawing objects
Basic Line Polyline Arc Bezier curve
Text Font, weight
Shapes Circle Ellipse Rectangle Square Pie segment Triangle Pentagon,
hexagon, heptagon, octagon, etc Tex tText
![Page 22: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/22.jpg)
2222
Scaling vector graphics
Original imageOriginal image
V e c t o rg r a p h i c s
ShownShownmagnifiedmagnified
V e c t o rg r a p h i c s
![Page 23: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/23.jpg)
2323
Advantages and Disadvantages of using vector image
AdvantagesRelatively small amount of data required to represent
the image.Therefore, it does not required a lot of memory to
storeEasier to manipulate
DisadvantagesLimited level of detail than can be presented in an
image
![Page 24: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/24.jpg)
2424
Software to create vector images
Graphics programs are tools that allow an artist to create and edit designs used in multimedia applications.
Generally, graphics programs can be categorized as:• Drawing programs
– Creating draw type graphics– Provide freehand. Example geometric shape – Example : Adobe Illustrator, Corel Draw,
Macromedia Freehandhttp://www.adobe.com/products/illustrator/main.html
![Page 25: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/25.jpg)
2525
Software to create vector images
Paint programs- Those creating bitmaps- useful in creating original art- Example: Paint Shop Pro
http://www.jasc.com/psp6.html
Image editing programs- Making changes to existing images, such as
manipulating the brightness or contrast, applying textures, patterns.
- Examples : Adobe Photoshop, Adobe Page Maker,
![Page 26: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/26.jpg)
2626
Vector formats
Windows metafile (.wmf) Used by Microsoft Windows
SVG - Scalable Vector Graphics (.svg) A new format devised for the web
CGM - Computer Graphics Metafile (.cgm) Older format commonly used for clip art
Adobe PostScript (.ps) A page description language used to control printers
![Page 27: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/27.jpg)
2727
Vector formats
Adobe Portable Document Format (.pdf) A page description language common on the web
Drawing Exchange Format (.dfx) Store 3D image created by design program AutoCAD
Encapsulated PostScript (.epf) Professional printing: Illustration program, Adobe Systems,
Desktop Publishing programs
![Page 28: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/28.jpg)
2828
3-Dimensional Graphic models
A 3D model is a variation on the vector format
The location of a 3-dimensional object is specified using x, y and z co-ordinates
Further primitives can be found in 3D models
Cube, sphere, pyramid, etc. Camera, spotlight, texture, shading
etc.
3D model
XX
YY
ZZ
![Page 29: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/29.jpg)
2929
3-Dimensional Graphic models
3D graphics offer the photorealistics effects that have you seen in TV, Computer Games
Examples, Motion Picture films such as: Jurassic Park, Terminator 2, Lost World and Toy Story
Examples 3D programs: Carigali Truespace 3D Studio Max Infini-D
![Page 30: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/30.jpg)
3030
3-Dimensional Graphic models
![Page 31: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/31.jpg)
3131
3-Dimensional Graphic models
![Page 32: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/32.jpg)
3232
Hardware used to acquire images
Scanners and digital imaging products
Many forms of scanner Drum Flat-bed Negative / slide Hand-held
Important to check the optical resolution of the scanner
measured in dots per inch (DPI) Slide scanner
Flatbed scanner
![Page 33: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/33.jpg)
3333
Hardware used toacquire images
Digital cameraUses digital memory instead of
filmImages are transferred to
computer via a cableCan be very high resolution
Stills from a camcorder or PC “web-cam” type cameraHome products tend to be low
resolution Web cam
Digital camera
![Page 34: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/34.jpg)
3434
Hardware used tocreate / edit images
Graphics tablet and pen Preferred by digital artists Pressure sensitivity
Digitiser tablet Preferred by technical
artists Mouse has accurate
crosshair to help digitise drawings
Tablet and pen
Digitiser
![Page 35: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/35.jpg)
3535
Converting image formats
Text
Text
Text
Text
Bitm
ap
ped
imag
eB
itmap
ped
imag
eB
itmap
ped
imag
eB
itmap
ped
imag
e
Vecto
r imag
eV
ecto
r imag
eV
ecto
r imag
eV
ecto
r imag
eBitmapped font
TrueType /PostScript
Type 1 font
Optical CharacterRecognition (OCR)
Contour trace
Render as bitmap
![Page 36: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/36.jpg)
3636
Working With Graphics
Considerations and guidelines when we are working with graphics:
Choose the graphic depend on your workChoose the correct software Use minimum color depthDelivery Systems
![Page 37: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/37.jpg)
3737
How graphics/images can be used effectively
Different types of graphics are used in different ways:
Line drawing are graphical representations of physical objects. There are 3 kinds of line drawings:
Isometric - represent 3-D objects without realistic perspective
Orthographic - are 2-D representations of objects
Perspective - represent objects in their most realistic form
![Page 38: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/38.jpg)
3838
How graphics/images can be used effectively
Graphs and Tables
In just a glance, graphs can provide specific data, show general trends in data or depict the relationships between data and data trends
Diagrams
Help users conceptualize a process, flow or interrelationship. Examples of diagrams include: Flow charts, Schematic Drawings and Block Diagrams.
![Page 39: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/39.jpg)
3939
Advantages and Disadvantages of using images
AdvantagesConvey a lot of information quicklyAdd visual simulation and colourCan communicate across language bordersEnhance other media
![Page 40: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/40.jpg)
4040
Advantages and Disadvantages of using texts
Disadvantages Do not provide in-depth explanations
Graphics rarely suffice to convey a whole message in business, technical or safety settings
Can be misinterpretedGraphics should be used carefully to make sure
the message is not ambiguous or cryptic.
![Page 41: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/41.jpg)
4141
Summary
Today we have met the various types of image that are useful when creating multimedia applications
Pros and cons of bitmapped and vector images
What hardware is used to create each of these
![Page 42: 1 LECTURE 5 THE USES OF IMAGES IN MULTIMEDIA Prepared by Cik Nor Anita Fairos bt Ismail.](https://reader035.fdocuments.net/reader035/viewer/2022062717/56649e235503460f94b10529/html5/thumbnails/42.jpg)
4242
Next lecture...
We will look at digital Audio formats