COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING

AND LIBRARY SCIENCE (CITCLS)

C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

Course: C-GEE2: Living in the Information Technology Era

Module: C-GEE2, Module 3: ICT and Society – Graphics and Multimedia
Time Frame: Weeks 5 and 6 (6 hours)

Mapped Learning Outcomes and Course Content for C-GEE2, Module 3

Target Learning Content and Activities

Outcomes Target Competencies
Hrs. (At the close of the period Offline Online Session (TC) and Values for
allotted, students should (Self-Study) Integration (VI)
have :)

2 hrs. (1) Demonstrate II. ICT and the Society  Multimedia Devices TCs:
knowledge of Engagement
Digital Image a. Graphics and  Image Type in
and Graphics Multimedia independent
 Image Viewing reading and
(2) Explained the  Digital Image and application
difference Graphics  Image Calibration
between digital VIs: Appreciation
image, graphics,  Pixels, vector, and  Pixel calculation of the
and digital resolution teacher's
audio  Basic sound editing roles and the
 Digital Audio concepts profession

 Audio Formats

2 hrs. (3) Demonstrate a. Graphics and  Video Editing TCs:

knowledge of Multimedia cont. Engagement
the different  Video Formats in
digital video  Digital Video independent
formats  3D reading,
 Computer Manipulation/Ani analysis, and
(4) Give the Generated mations in Movies application
applications of Imagery
computer- VIs: Appreciation
generated of the value
imagery of L.E.

Faculty: MARIBETH G. RIVERA 1|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

2 hrs. (5) Expressed TCs:

appreciation of Engagement
their values and in systematic
roles as today's self-
students/ evaluation
Engage and Collaborate:
learners;
Group Activity – Module
VIs:
3: Computer Generated
(6) Accomplished Appreciation
Imagery
the assigned of the
tasks adhering learning
to the gained, of
established their values
standards. and roles as
students
Total: 6

For Self-Study

II. ICT and the Society

a. Graphics and Multimedia

Multimedia is a form of communication that combines different content forms such as

text, audio, images, animations, or video into a single presentation.

Multimedia is a representation of information in an attractive and interactive manner with

the use of a combination of text, audio, video, graphics, and animation. In other words, we can
say that Multimedia is a computerized method of presenting information combining textual
data, audio, visuals (video), graphics, and animations.

Multimedia is interactive media and provides multiple ways to represent information to

the user in a powerful manner. It provides interaction between users and digital information.
It is a medium of communication.

Five Multimedia elements: Text, graphics, audio, video, and animation

1. Text – All multimedia productions contain some amount of text. The text can have
various types of fonts and sizes to suit the professional presentation of the multimedia
software.
The form in which the text can be stored can vary greatly. In addition to ASCII
based files, text is typically stored in processor files, spreadsheets, databases and

Faculty: MARIBETH G. RIVERA 2|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

annotations on more general multimedia objects. With availability and proliferation of

GUIs, text fonts the job of storing text is becoming complex allowing special
effects(color, shades..).

2. Graphics - Graphics make the multimedia application attractive. In many cases people
do not like reading large amount of textual matter on the screen. Therefore, graphics
are used more often than text to explain a concept, present background information
etc.
There is great variance in the quality and size of storage (Image file formats) for
still images (Bitmap - gif, jpg, bmp) (Vector - svg, pdf, swf, ps). Digitalized images are
sequence of pixels that represents a region in the user's graphical display.

 Bitmap images- Bitmap images are real images that can be captured from devices
such as digital cameras or scanners. Generally bitmap images are not editable. Bitmap
images require a large amount of memory.
 Vector Graphics- Vector graphics are drawn on the computer and only require a
small amount of memory. These graphics are editable.

3. Audio - A multimedia application may require the use of speech, music and sound
effects. These are called audio or sound element of multimedia. Speech is also a perfect
way for teaching. Audio are of analog and digital types. Analog audio or sound refers to
the original sound signal. Computer stores the sound in digital form. Therefore, the
sound used in multimedia application is digital audio.
An increasingly popular datatype (audio file format) being integrated in most of
applications is Audio. Its quite space intensive. One minute of sound can take up to 2-3
Mbs of space. Several techniques are used to compress it in suitable format.

4. Animation - Animation is a process of making a static image look like it is moving. An

animation is just a continuous series of still images that are displayed in a sequence.
The animation can be used effectively for attracting attention. Animation also makes a
presentation light and attractive. Animation is very popular in multimedia application.
It involves the appearance of motion caused by displaying still images one after
another. Often, animation is used for entertainment purposes. In addition to its use for
entertainment, animation is considered a form of art. It is often displayed and
celebrated in film festivals throughout the world. Also used for educational purposes.

5. Video – The term video refers to the moving picture, accompanied by sound such as a
picture in television. Video element of multimedia application gives a lot of information
in small duration of time. Digital video is useful in multimedia application for showing
real life objects. Video have highest performance demand on the computer memory
and on the bandwidth if placed on the internet. Digital video files can be stored like any
other files in the computer and the quality of the video can still be maintained. The

Faculty: MARIBETH G. RIVERA 3|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

digital video files can be transferred within a computer network. The digital video clips
can be edited easily.
One on the most space consuming multimedia data type is digitalized video. The
digitalized videos are stored as sequence of frames. Depending upon its resolution and
size a single frame can consume upto 1 MB. Also to have realistic video playback, the
transmission, compression, and decompression of digitalized require continuous
transfer rate.

Multimedia Devices - is a tool or piece of equipment that allows a user to experience several
types of digital media at once.

- A webcam is a simple digital camera capable of taking video or still images for
transmission over the Internet. Unlike digital cameras, webcams don't include storage
capabilities. Most webcams plug into a USB port, but a few have used IEEE 1394 or
parallel ports.

- Digital cameras have largely replaced film cameras for both amateur and professional
photography. They use CMOS or CCD image sensors to record images onto internal or
card-based flash memory form factors such as Compact Flash, SD, Memory Stick, xD-
Picture Card, and Smart Media. Digital cameras transfer images to computers for
emailing, printing, or storage via either flash memory card readers or direct USB port
connections.

- Musical instrument digital interface (MIDI) music is created from digitized samples of
musical instruments that are stored in the ROM or RAM of a MIDI device (such as a
sound card) and played under the command of a MIDI sequencer. MIDI sequences can be
stored as files for future playback, and can be transferred between sound cards and
MIDI-enabled devices such as keyboards via the MIDI port. To learn more about MIDI
ports, see the section "MIDI Port," earlier in this chapter.

- Sound cards are used to record and play back analog audio, and most can also play back
digital audio sources as well. When recording analog audio sources such as CDs, line in
or microphone in, sound cards digitize the audio at varying sample rates and store files
in either uncompressed forms such as WAV or compressed forms such as WMA or MP3.

- Microphones plug into the 1/8-inch mini-jack microphone jack on a sound card or
integrated motherboard audio. The most common microphones used on PCs include
those built into headsets or those that use a stand. Microphone volume is controlled by
the Windows Sounds and Audio Devices applet's mixer control.

- Video capture cards are used to capture live video from various sources, including
analog camcorders, VCRs, analog output from DV camcorders, broadcast TV, and cable
TV. Most recent cards with video capture capabilities are actually multi-purpose cards

Faculty: MARIBETH G. RIVERA 4|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

that include other functions. These include ATI's All-in-Wonder series of video
(graphics) cards with onboard TV tuner and video capture functions, video (graphics)
cards with VIVO (video-in/video-out) S-video or composite video ports, and TV tuner
cards and USB devices. Video can be stored in a variety of formats, including MPEG, AVI,
and others for use in video productions.

A digital image is composed of a finite number of elements (small squares): each of

which has a particular location and color. These elements of a digital image are called pixels or
picture elements. The pixel dimensions of an image will tell you how many total pixels the
image is made up of. This is often called pixel dimensions or resolutions.

The higher the pixel per inch (PPI), the more pixels are packed n one inch leading to a
more detailed image. A lower PPI will lead to a pixelized image, an image where the individual
pixels become visible.

Two features available to process digital images are cropping and adjusting the basic
properties of an image like brightness, saturation, and contrast.

 Cropping is the process of trimming away unwanted portions of a digital image.

 Brightness refers to the total lightness or darkness of an image. By adjusting the
brightness, one controls the amount of light reflected in the image.
 Contrast is the scale of difference in brightness between objects or regions in an image.
Increasing the contrast value of an image implies increasing the gap between the dark
and bright parts of your image.
 Saturation is used to describe the intensity of color in the image. A saturated image
has overly bright colors.

The number of bits allocated to represent a color is also called color depth. The higher the
color depth, the more colors can be represented. One way to represent an image in a
computer is by using a so-called bitmap.

A graphic is an image or visual representation of an object. Therefore, computer

graphics are simply images displayed on a computer screen. Graphics are often contrasted
with text, which is comprised of characters, such as numbers and letters, rather than images.

Computer graphics can be either two or three-dimensional. Early computers only

supported 2D monochrome graphics, meaning they were black and white (or black and green,
depending on the monitor). Eventually, computers began to support color images. While the
first machines only supported 16 or 256 colors, most computers can now display graphics in
millions of colors.

Faculty: MARIBETH G. RIVERA 5|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

Pixel vs Vector

a. File formats and graphic programs

Graphic program

Graphic format

Pixel graphic: TIF, JPG, BMP, PNG, GIF Adobe

Photoshop,
GIMP, Corel
PaintShop
Pro

Vector graphic: SVG, EPS, AI, CDR, WMF Adobe

Illustrator,
Corel Draw,
Inkscape

Disadvantages
Advantages

 Scaling is
associated with
losses of quality
 Compression can
 Rich in both color and lead to losses of
brightness gradation quality
Pixel graphics  Every individual pixel can  High memory
be edited requirements for
high-quality
graphics
 Image tracing
can be laborious

Faculty: MARIBETH G. RIVERA 6|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

 Scalable without losses to

quality  Not suitable for
 Can be compressed without complex graphic
quality losses displays
Vector graphic  Small file size  Rasterization
 Object properties can be required for
adjusted display
 Easy to raster

An image viewer or image browser is a computer program that can display stored
graphical images; it can often handle various graphics file formats. Such software usually
renders the image according to properties of the display such as color depth, display
resolution, and color profile.

Most image viewing software is designed for viewing only, like Windows Photo Viewer.
Other image viewer programs, like Paint or Photoshop, provide image editing features in
addition to simple viewing. These features range from basic to advanced including shrinking,
enlarging, cropping or painting on an image.

Image calibration, also known as reduction, fixes tiny defects in the camera sensor
and optical system. Image calibration may sound like a boring topic, but proper calibration is
of the utmost importance in producing good quality images.

Digital Audio is a technology that is used to record, store, manipulate, generate, and
produce sound using audio signals that have been encoded in a digital form. A sound is
represented by a sequence of discrete samples that are taken from an analog audio waveform.
Digital audio is composed of discrete points, which represent the amplitude of the waveform
approximately.

Digital audio is a technology that is used to record, store, manipulate, generate and
reproduce sound using audio signals that have been encoded in digital form.

Digital Audio File Format

Uncompressed
The best way to store data for high quality playback, as it requires very little
processing in order to retrieve the audio data. More compressed formats can cause audio
glitches on some systems.
a. .AIFF - Apple standard
b. WAVE (or .WAV) - Standard for uncompressed CD-Quality audio on Windows systems,
which uses PCM format recording. A CD-quality recording has a sample rate of 44.1kHz
at 16 bit resolution.

Faculty: MARIBETH G. RIVERA 7|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

A WAV audio file is a Waveform Audio File that stores waveform data. The
waveform data stored presents an image that demonstrates strength of volume and
sound in specific parts of the WAV file. It is entirely possible to transform a WAV file
using compression, the WAV is typically used on Windows systems.
c. .BWF (Broadcast Wave Format) - Used in portable audio recorders and digital audio
workstations for broadcast use.

Lossless Compression
Contain the full audio information, but with reduced file size, to store the data more
efficiently.

a. .WMA Lossless (Windows Media Audio) - Designed with Digital Rights Management
(DRM) abilities for copy protection. It is a Windows-based alternative to the more
common and popular MP3 file type.
b. .ALAC (Apple Lossless Audio Codec) - Open source and royalty free since 2011
(although it was initially proprietory to Apple)
c. .FLAC (Free Lossless Audio Codec) - Open source, royalty-free licencing of the format.
The FLAC audio file is Free Lossless Audio Codec. It is an audio file compressed into a
smaller size of the original file. It’s a sophisticated file type that is lesser-used among
audio formats.

Lossy Compression
a. .MP3 - Compressed sound file format, developed by the Motion Picture Expert Group
(MPEG) as part of their MPEG1 video standard, and later extended to MPEG2 Layer 3
standard.
The MP3 audio file is an MPEG audio layer 3 file format. The key feature of MP3
files is the compression that saves valuable space while maintaining near-flawless
quality of the original source of sound. This compression makes the MP3 very popular
for all mobile audio-playing devices, particularly the Apple iPod.
There are 2 parameters that can be adjusted to vary the quality and size of the MP3 file.
- Bit Rate
- Sample Frequency

b. MP4 or .M4A - AAC compression based successor to MP3. MP4 is sometimes referred
to as a video file instead of an audio file. This isn’t an error, as in fact it’s both an audio
and video file.
M4A is an mpeg-4 audio file. It is an audio-compressed file used in the modern
setting due to increased quality demand as a result of cloud storage and bigger hard
drive space in contemporary computers.

c. .M4P - A proprietary version of AAC in MP4 with Digital Rights Management developed
by Apple for use in music downloaded from their iTunes Music Store.

Faculty: MARIBETH G. RIVERA 8|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

d. .OGG Ogg Vorbis - Open-source patent-free compressed audio format.

For further reading and online video:

 Department, O. A. (2019, January). Vector Art vs. Pixel Art. Retrieved from
YouTube: https://www.youtube.com/watch?v=nJf4rzXP73k

 Weiss, I. (2020). Digital Images. Retrieved from

https://www.encyclopedia.com/: https://www.encyclopedia.com/computing/news-
wires-white-papers-and-books/digital-images

 Khan, H. (2017, June). DIFFERENCE BETWEEN GRAPHICS AND IMAGES.

Retrieved from differencebetween.co: https://differencebetween.co/difference-
graphics-images/
 Techquickie. (2017, June). Audio File Formats - MP3, AAC, WAV, FLAC. Retrieved
from YouTube.com: https://www.youtube.com/watch?v=WIIKXOrt3bk

--------------------------------------------------------------------------------------------------------------------------------------
For the Synchronous Session for Lesson 2: ICT and the Society -
Graphics and Multimedia
 Multimedia Devices
 Image Type
 Image Viewing
 Image Calibration
 Pixel Calculation
 Basic sound editing concepts
 Audio Formats

For Advance Reading:

Digital image. (n.d.). Retrieved from graphics.fandom.com:

https://graphics.fandom.com/wiki/Digital_image#:~:text=A%20digital%20image%20is%20
a,called%20picture%20elements%20or%20pixels.&text=They%20can%20also%20be%20sy
nthetized,sub%2Darea%20of%20computer%20graphics.

Gus Berry, L. B. (n.d.). The best audio file for audiophiles. Retrieved from adobe.com:
https://www.adobe.com/au/creativecloud/video/discover/best-audio-format.html

Faculty: MARIBETH G. RIVERA 9|Page

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

For Self-Study

Digital Video

Video is composed of a combined sequence of images that forms a moving picture. It

has audio components that correspond with the pictures being shown on screen.

The quality of the video is measured by the resolution of the individual images as well as the
number of images or frames flashed per seconds. Frames per seconds (FPS) is a unit that measures
display device performance.

Video Editing
Video editing is the process of editing segments of motion video production footage,
special effects and sound recordings in the post-production process.

Video editing is the process of manipulating video by rearranging different shots and
scenes in order to create a whole new output. It can be as simple as stitching together
different scenes and shots with simple video transitions, and can become as complicated as
adding different computer-generated imagery (CGI), audio and tying together different
elements, which may take years, thousands of man-hours and millions of dollars to
accomplish, as is the case with big-budget motion pictures.

The goal of editing is to manipulate these events to bring the communication closer to
the original goal or target. It is a visual art.

Video Editing functions:

 Color correction
 Exposure adjustment
 Blurring
 Frame cropping
 Trimming
 Re-sequencing
 Cross dissolving
 Cut-aways
 Fade in/fade out

Examples of Video Editing Software

 Adobe Premiere Pro
 Adobe Premiere Rush
 Apple Final Cut Pro
 Apple iMovie
 Windows Movie Maker

Faculty: MARIBETH G. RIVERA 10 | P a g e

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

 Avid Media Composer

 Davinci Resolve
 Vimeo

Video File Format

a. .WEBM was created by Google as an efficient means of disseminating media to a large
audience. .WEBM video files are relatively small in size, and as such are not as high in
terms of quality as some of the other file types on this list. The .WEBM video file format
is used for HTML5 video streaming sites, such as YouTube.

b. .MPG, .MP2, .MPEG, .MPE, .MPV files can play audio/video media, or simply audio. They
are low in file size but also relatively low in quality. They also have lossy compression,
meaning their quality will degrade after being edited numerous times. .MPG, .MP2,
.MPEG, .MPE, .MPV files are best used when video will be recorded once and never
edited.

c. .OGG files are an open-source alternative to .MPG files, and are used for high-quality
videos to be streamed via the internet. Though .OGG files are used for streaming, they
are higher in quality than .WEBM files – meaning they will take longer to be delivered
to the end-user. Due to .OGG files being open sourced, they can be used in a variety of
applications, including GPS receivers and media players (both desktop and portable).

d. .MP4, .M4P, .M4V are similar to .MPG files in that they can contain audio and video, or
can simply be solely audio files. .MP4, .M4P, and .M4V are used for streaming video via
the internet. They are generally higher in quality than .WEBM files, but tend to be
larger in file size. .M4V files are proprietary iTunes files that share the same qualities of
.MP4 and .M4P files. M4V files are DRM copy-protected.

e. .AVI files are one of the oldest and most compatible video file formats. Many different
codecs can be used with an .AVI file, which means that this format has more flexibility
in choosing a balance between quality and size. However, these files tend to be larger
than the previously mentioned formats, which makes it less ideal for the web and more
ideal for storing movies on a computer.

f. .WMV is a video file format created by Microsoft and stands for Windows Media Video.
The codec used by these files results in small file sizes but poor quality. This format is
useful if you are sending video to someone with an older Windows computer.

g. .MOV, .QT files were developed by Apple to use with its Quicktime player. These files
are of high quality but large in size. And they have poor compatibility with non-
Quicktime players. This format is useful if you intend to archive a high-quality video on
an Apple computer.

Faculty: MARIBETH G. RIVERA 11 | P a g e

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

h. .FLV, .SWF files were designed by Adobe as the video file format for Flash. The use of
these file formats has declined rapidly as Flash has become less popular, especially
after Flash support ended for iOS devices. The use of these formats is only
recommended if you need to support a legacy system that can only accept this type of
file.

i. AVCHD or Advanced Video Coding High Definition files are the format generated by
many digital camcorders. These files use the H.264/MPEG-4 video codec and are
similar to an .MPG file.

Computer Generated Imagery

Computer Generated Imagery (CGI) is the application of the field of computer

graphics to special effects. CGI is used in films, television programs and commercials, and in
printed media.
CGI is used for visual effects because of the quality is often higher and effects are more
controllable than the other more physically based processes, such as constructing miniatures
for effects shots or hiring extras for crowd scenes.

James Cameron’s Avatar is a sci-fi movie, which first used Reality Camera Systems. The
movie is 70% CGI. He cast wore motion-capture suits covered in sensors that feed the
movements of the body back to a bank of computers- and acted out their scenes on a
“performance capture.”

3D Manipulation/Animation in movies

Keying - the process of real life objects in front of a green screen are isolated in the
computer by removing the unwanted color so that an alpha matte is created the desired
foreground elements.

Rotoscoping – is the process by which animators trace over live-action footage one
frame at a time.

Matte painting – is a painting of a set, set piece, or location that is impossible or

impractical to shoot in real life.

2.5D composition – is the process of digitally assembling multiple images or image

sequences into a single piece of motion picture or digital video footage.

Advance animations are achieved by integrating 3D effects.

Modelling – animated characters done in computers in a 3D space.

Faculty: MARIBETH G. RIVERA 12 | P a g e

 COLLEGE OF INFORMATION TECHNOLOGY, COMPUTING
AND LIBRARY SCIENCE (CITCLS)
C-GEE2 – LIVING IN THE IT ERA
First Semester | AY 2023-2024

Texturing – is the re-creation of specific surface qualities through the application of

shaders, procedural textures, and bitmap textures.

-------------------------------------------------------------------------------------------------------------------------
For the Synchronous Session for Lesson 2: ICT and the Society -
Graphics and Multimedia
 Video Editing
 Video Formats
 3D Manipulation/Animations in Movies

For Advance Reading:

Gold, N. (2020). Video Editing 101: the Different Types of Video Editing. Retrieved from
https://filmdaft.com/: https://filmdaft.com/video-editing-101-the-different-types-of-video-
editing/
K., D. (2020, December). The Different Types of Animation. Retrieved from
https://www.gamedesigning.org/: https://www.gamedesigning.org/animation/different-
types/

-----------------------------------------------------------------------------------------------------
Assessment of Learning
 Engage and Collaborate – Group Activity Computer Generated Imagery

 For the self-regulated assessment of what you had learned from this module, please
accomplished C-GEE2 Module 3 posted in our Google classroom and be able to submit
it on or before due date: ______________, time: __________.

Congratulations on having completed this C-GEE2 Module 3! See you in the next Module

Faculty: MARIBETH G. RIVERA 13 | P a g e