LITE

MATTERS
AN INSTRUCTIONAL MATERIAL IN
MST 101D* [LIVING IN THE
INFORMATION TECHNOLOGY ERA]
 CHAPTER TWO
LESSON OBJECTIVES

At the end of the chapter, the students are

expected to:
1.Differentiate and know the proper use of the
Graphics and Multimedia.
2.Appreciate how the human and computer interact.
3.Define the basic IP and its issue in relation
with ICT.
TOPIC S

1
GRAPHICS AND MULTIMEDIA

2
HUMAN AND COMPUTER
INTERACTION

3
IPR ISSUES IN ICT
 LESSON 2.1
GRAPHICS AND MULTIMEDIA
INTRODUCTION
 GRAPHIC S
• came from the Greek word "graphikos"
which means "written"
• refers to any visual representation of
data and includes a variety of forms
including drawings, photographs, line
art, graphs, diagrams, numbers, symbols,
geometric designs, maps, and engineering
drawings
• may also include text and they can be
used for decorative or functional
purposes, including educating, informing,
illustrating, or entertaining.
WHAT IS
COMPUTER
GRAPHICS?
 COMPUTER GRAPHICS
• are any image media crafted through
computer hardware and software it is
sometimes
• referred to as computer-generated
imagery or CGI.

https://interestingengineering.com/deals/5-best-drawing-tablets-that-will-bring-out-your-inner-picasso dragons in got khaleesi green screen - Bing images

Image from https://www.artstation.com/artwork/L2GZJP
IMAGE
visual representation of a person or thing- drawn,
painted, photographed
MODELS
a 3D representation of a person, thing or of a proposed
structure, typically on a smaller scale than the original
RENDERING
process of generating an image from a 2D or 3D model
through computer programs
ANIMATION
way of adding creative, illusive actions through successive
images;
The Difference Between 2D and 3D animation? | BuzzFlick
Early computers only supported 2D
monochrome graphics, which means
they may black and white or black
and green, depending on the
monitor.

abstract, Art, Colorful, Colors, Design, Illustration, Light, Theme Wallpapers HD /

Desktop and Mobile Backgrounds (wallup.net)

Until enhanced computers began to

support color images. The first
enhanced computer only supported 16
to 256 colors. Until now, it can
now display graphics in millions of
colors to add a more realistic
Vintage Character Monochrome Photograph by Alana Thrower - Fine Art America
effect.
TWO TYPES OF COMPUTER
GRAPHICS

RASTER GRAPHICS
• digital images made up of
countless tiny squares called
pixels.
• sometimes referred to as
bitmap.
Image resolution refers
to how many pixels are
displayed per inch of an
image or PPI. It is
usually measure in DPI
or Dot per inch. Understanding Image and Video Resolution (dfman.com)

IMAGE DEGREDATION
NOTE: there are several image
compression algorithms that
may help compresses image
formats on the web like BMP,
TIFF, JPEG and GIF.
IMAGE COMPRESSION What are file extensions?
the process of minimizing the These letters (called file
size in bytes of a graphics extensions) indicate to both you
file without degrading the and your computing device how each
quality of the image to an image is stored and what software
unacceptable level. will be necessary to open and
Image Compression and its Algorithm - MechoMotive display the image file.

COMMON IMAGE FORMATS

JPEG - Joint Photographic Experts
Group
JPG - one of the formats supported by
the JPEG compression group
JPEG 2000 - a highly advanced
10 Common Image File Formats and Their Differences
compression technique and a part of
(wondershare.com) the JPEG group
COMMON IMAGE FORMATS
GIF - Graphic Interchange Format
PNG - Portable Network Graphics
BMP - Bitmap Image File
RAW files are the unprocessed photos.
TIFF - Tagged Image File Format
PSD and PSB are the two native Adobe Photoshop formats.
CR2 stands for Canon Raw Version 2
10 Common Image File Formats and Their Differences (wondershare.com)
TWO TYPES OF COMPUTER
GRAPHICS

VECTOR GRAPHICS
• uses mathematical formulae to draw
lines and curves to create images
• Scalable, there is no limit for
re-sizing the image for as long as
the rule of mathematics was identical
and applied correctly
COMMON TYPES OF VECTOR FILES
AI - Adobe Illustrator's native file format
EPS - Encapsulated Postscript
PDF - Portable Document Format
SVG - Scalable Vector Graphics
What Is a Vector File? How to Identify, View, or Edit (businessinsider.com)
What is Anti-Aliasing and Why Is it Important for Gaming? - Nerd Techy
APPLICATION OF
COMPUTER GRAPHICS
1. USER INTERFACE – it is useful in video
games, digital art and virtual reality.

2. DISPLA Y INFORMATION – it is used in

computational biology, computational
physics, information of graphics and
scientific visualization.

3. DESIG N – it i s used in graphic design,

computer-ai ded design and web design

4. SIMULATION – it is also useful in

education, information visualization and
computer simulation
 MULTIMED I A
• from the L atin w ord “multus ”
which means “many ”, an d a pl ural
word of me dium , “med ia”.

• an interactive way of presenting

information using audio, video,
and any animation in addition to
traditional media like text,
graphs, and images
10%
what they read,

20 %
what they hear,
30 %
what they see
50 %
what they hear and see.
BASIC
ELEMENTS OF
MULTIMEDIA
 Information

Information
TEXT
INFORMATION
refers to the characters used
for creating words
Information

https://www.slideshare.net/edjuma/multimedia-26889854
 GRAPHIC
refers to any non-text
information like images,
drawings, or charts

https://www.slideshare.net/edjuma/multimedia-26889854
ANIMATION
are moving images

https://www.reddit.com/r/TayTayGifs/
https://www.slideshare.net/edjuma/multimedia-26889854
 VIDEO
refers to moving pictographic
images accompanied by sounds

Human Heart Anatomy (3D Medical Animation) - YouTube

https://www.slideshare.net/edjuma/multimedia-26889854
 AUDIO
refers to any music or sound
effects

https://www.slideshare.net/edjuma/multimedia-26889854
MULTIMEDIA SYSTEM
CHARACTERISTICS
1. Multimedia systems should be computer controlled.
2. All the components of multimedia are integrated
3. The interface to the final user may
permit interactivity.
4. Information must be presented digitally.
 TYPES OF
MULTIMEDI A
PRESENTATION
LINEAR
PRESENTATION

• active content of this

presentation often progresses
without the control for
navigation of the user
NON-LINEAR
PRESENTATION

• offers interactivity to the

users where they can control
the progress of the
presentation
What is Hypertext and Hypermedia (bccfalna.com)
 FORMS OF
MULTIMEDI A
1. ONLINE
2. OFFLINE
3. HYBRID
 Graphics References:

https://www.explainthatstuff.com/computer-graphics.html
https://www.britannica.com/topic/computer-graphics https://techterms.com/definition/pixel
https://www.printcnx.com/resources-and-support/addiational-resources/raster-images-
vsvector-graphics/ https://etc.usf.edu/techease/win/images/what-is-the-difference-between-
bitmap-and-vectorimages/ https://nerdtechy.com/what-is-anti-aliasing
https://learn.g2.com/raster-graphics https://techterms.com/definition/rastergraphic
https://www.explainthatstuff.com/computer-graphics.html
https://www.linkedin.com/pulse/application-computer-graphics-niropam-das Multimedia
References: https://users.cs.cf.ac.uk/Dave.Marshall/Multimedia/node10.html
https://www.tutorialspoint.com/multimedia/multimedia_introduction.htm
https://www.ftms.edu.my/images/Document/MMGD0101%20-
%20Introduction%20to%20Multimedia/MMGD0101%20chapter%201.pdf
https://slideplayer.com/slide/6298510/ http://sahet.net/htm/swdev8.html
https://www.diggitmagazine.com/wiki/hybrid-media-system
REFERENCES For more information about graphics and multimedia, you may visit the following: Graphics:

https://www.youtube.com/watch?v=TEAtmCYYKZA
https://www.youtube.com/watch?v=LGYOgJWCINM

Multimedia:

https://www.youtube.com/watch?v=Av-eRu9A8_w
https://www.youtube.com/watch?v=yku5GXPwa6Y
https://www.youtube.com/watch?v=HJ8nkUSkG9E
https://www.youtube.com/watch?v=CbvpPdxoJiI
https://www.youtube.com/watch?v=0aq2P0DZqEI
https://www.youtube.com/watch?v=m_buwrnFIho