MULTIMEDIA DESIGN Bicol University Polangui Campus

COMPUTER STUDIES DEPARTMENT

ELEMENTS STUDY GUIDE

OBJECTIVES
Learn the definition of Elements of Multimedia
Identify the different Elements of Multimedia and their uses.
Cite some examples or applications of each element.

ELEMENTS OF MULTIMEDIA
Elements are the building blocks used by the designers to create the designs.
Multimedia is the media that uses numerous forms of information content and
information processing to inform or entertain the user. Multimedia is alike to
traditional varied media in fine art, but with a broader opportunity. The term
“rich media” is equal to interactive multimedia.

5 ELEMENTS OF DESIGN
Text
Graphics
Animation
Video
Audio

1. TEXT
The visual representation of characters that are used to create words,
sentences, and paragraphs. This includes determining what kind of shape and size
they use, and how the letters are arranged is called typography. In this section,
we will explore the basics of typography including the design of characters and
typesetting.

Typography
Typography is composed of two elements: FONT and TYPESETTING. In either
case, we need to make appropriate choices and adjustments, based on the
project's theme and concept.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

A. Font
A font is a set containing all letters or characters following one unified design.
The design of a character a typeface, and the set containing all characters that
follow that design is called font. The fonts with western characters are often
referred to as Roman Fonts.

Roman fonts can be broadly divided into two types: serif, which has decorations
at the endpoints of the characters, and san serif, which doesn't.

B. Typesetting
Typesetting is defining the line feed, line spacing, line height, alignment,
character feed, and character spacing (kerning) while considering the reader and
the objective of the work.

Line feed is the height of the characters on one line plus the line spacing. For the
line feed, it is important to adjust the lines of text and the line breaks, while
considering the character size and line height, so that it can be read more
smoothly.

Alignment is setting where to align lines of text. For example, we can align the
text to the left or to the center.

Character feed is the setting of the length between the center of the first
character and the center of the next character. We normally adjust this so that
the intervals between characters become visually even. Also, adjusting the space
between characters (character spacing) based on the shape of adjacent characters
called kerning.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

Text Element can be categorized into:

Alphabet Characters: A - Z
Numbers: 0 - 9
Special Characters: , . ; : ' "
Symbols: @#$%*

Uses of Text
Heading / Title
Bullet / List
Paragraph
Scrolling Text
Navigation
Text as Graphics
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

2. GRAPHICS
Graphics is a digital representation of non-text information, such as a drawing,
chart, or photograph. Graphics are an important part of multimedia because
humans are visually oriented. Images including photographs, illustrations,
drawings, clip art, icons or any other non-text elements on a website or in social
media are an example of graphics.

GRAPHICS CATEGORIES
There are two (2) categories of Graphics:
Vector
Raster (also known as Bitmap format)

A. Raster and Vector Formats

A digital image expressed by the arrangement of pixels is said to have a raster
format (or bitmap format). This is because the process of assigning colors to each
pixel to form an image or graphic is called rasterization.

On the other hand, an image expressed by the position or length of points, lines,
and faces is said to be in the vector format. An image in vector format is created
with the idea that a line connects two points, and that a face wraps between two
lines. For this reason, vectors can be enlarged or reduced to any desired ratio,
and colors can be freely changed.

Raster graphics are pixel-based, while Vector graphics are curve-based.

MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

A.1. Features and Applications of Raster Format

The raster format is suitable for images with complex or subtle shapes and colors
such as photographs and hand-drawn images. It is also possible to perform
processes like blurring with the raster format. For raster images, as the
resolution goes higher, the data size also grows. While software that deals with
images is generally referred to as graphics software, software that specializes in
raster images, in particular, is usually called painting software (e.i. Adobe
Photoshop, GIMP, CorelDraw, Clip Studio Paint).

Advantages Disadvantages

The raster graphics can be more Bitmaps are memory intensive, and
photorealistic. the higher the resolution, the larger
We can set the color of every the file size.
individual pixel in the image. When an image is enlarged, the
individual colored squares become
visible and the illusion of a smooth
image is lost to the viewer.

A.2. Features and Applications of Vector Format

In vector format, we can manipulate each element inside the image separately.
We can change the shape, enlarge or reduce the size, and een change the color of
each element freely. For this reason, the vector format is suitable for drawings
and illustrations. Outline fonts are also a type of vector image.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

The data size of vector images is often a lot smaller than that of raster images.
Note that the software that specializes in vector formats is usually called
drawing software (e.i. Adobe Illustrator, Inkscape, Affinity Designer).

Advantages Disadvantages

The ability to resize and rotate a One of the drawbacks of vector

graphic without distortions a graphics is that the more complex
major advantage of vector they are, the larger the file size and
graphics. the longer they take to appear on
Another advantage is their the screen.
smaller file size. Another disadvantage is that they
Used in creating logos and icons. cannot display photorealistic
quality.

RASTER GRAPHICS VS VECTOR GRAPHICS

The following images shows the comparison between raster and vector graphics.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

ADVANTAGES AND DISADVANTAGES OF

GRAPHICS IN MULTIMEDIA

Advantages Disadvantages

Convey information more Take longer to download.

quickly than when using text Require the use of plug-ins that the
Make complex information user may not have or be able to
simple install.
Enhance online teaching and Create accessibility barriers for
learning. some users.
Enhance communication with
some disabled groups
particularly those with learning
difficulties or cognitive
impairments.

3. ANIMATION
Animated elements are common multimedia applications. Animation is a series of
images put together to give the effect of movement. In multimedia, 2D and 3D
digital animation are used. Movement, rather than just viewing a still image, is
especially useful for illustrating concepts that involve movement.

A. 2D Animation
The easiest way to understand 2D is by thinking of a square on a blank paper. The
square has 4 sides, width, and height, but there are no other dimensions or depth
to speak of. Because it has a width (1) and height (2), this is considered a two-
dimensional (2D) object. Naturally, 2D animation often has other characteristics,
such as color and movement, but they do not change the “flat” appearance of the
objects and animation in general.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

2D animation is achieved through sequencing. To begin with, the artist(s) must

come up with the animation concept and create all of the unique drawings that
will be part of the animation. The set of drawings is then sequenced (joined
sequentially) to create one second of animation, with longer animations requiring
a correspondingly larger quantity of drawings.

Typically, a second of animation includes 24 frames, with every 2 frames

consisting of a different drawing. At this speed, the switch between frames
happens so quickly that the movement of objects in the frame looks smooth and
unbroken to the human eye.

Advantages Disadvantages

Easy to learn Difficult to achieve a high level of

Comparatively low production realism
cost Relies heavily on creativity and
Quick to create in comparison originality
with 3D Demand is comparatively smaller
Greater artistic freedom

Animation is used to add visual interest or bring attention to important

information or links. It can illustrate how things work or present information in
entertaining ways. Animation can also include interactive effects allowing
visitors to engage with the animation action using their mouse and keyboard.
Animation is dynamic and media-rich content that stays within one container on
a page – a very powerful form of communication.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

B. 3D Animation
As you probably understand by now, 3D stands for 3-dimensional. While 2D uses
the dimensions of width and height in objects, 3D adds another dimension –
depth (also sometimes called length).

If the analog used to explain 2D was a square, then the accurate analog for 3D is
the cube. The cube (as one of the 2D vs 3D animation examples) is not visualized
as flat, has perceived depth and volume, and seems to occupy space, despite the
fact that the surface on which it exists is flat.

3D animation allows for the addition of very realistic visuals, like lighting effects,
tiny details, textures, and this is considered to be the main difference between
2D vs 3D animation.

The creation of 3D animation is no easy process, and there is no universal

approach to it. Still, we can describe it by looking at the 2 main approaches.
Firstly, there is a hand-drawn approach. Like 2D, 3D animation can be drawn into
frames and connected via sequencing, but this approach is rare. Usually, some
kind of computer software is used, and this approach involves 3 essential steps:

1. MODELING. In this phase, all 3D objects that are present in the animation are
created in a 3D animation program.
2. LAYOUT AND ANIMATION. The background and setting of the animation are
implemented, and the mechanics (movement, changes) are added.
3. RENDERING. The 3D objects, layout, and mechanics are all combined and
captured to create a completed product (animation).
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

Advantages Disadvantages

Superior visualization and Production costs can be high

accuracy of movement More creative limits to movement
Great detail and realism can be and action
imparted on all animation Takes much longer to learn and
elements master
Completed 3D models can be
reused and applied elsewhere
Good prospects of
modernization in the future

Animation is used to add visual interest or bring attention to important

information or links. It can illustrate how things work or present information in
entertaining ways. Animation can also include interactive effects allowing
visitors to engage with the animation action using their mouse and keyboard.
Animation is dynamic and media-rich content that stays within one container on
a page – a very powerful form of communication.

4. VIDEO
Video is the technology of electronically capturing, recording, processing,
storing, transmitting, and reconstructing a sequence of still images representing
scenes in motion.

Video is a visual multimedia application that combines a sequence of images to

form moving pictures and sound. Video can have an impact on websites and on
social media platforms in a very unique and powerful way.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

Video Applications
The embedding of video in multimedia applications is a powerful way to
convey information that can incorporate a personal element that other media
lack.
Promoting television shows, films, or other non-computer media that
traditionally have used trailers in their advertising.
Giving users an impression of a speaker‟s personality.
Showing things that move. For example a clip from a motion picture. Product
demos of physical products are also well suited for video.

Advantages Disadvantages

One of the advantages of Requires large storage capacity

digitized video is that it can be devices.
easily edited. Copies can be made illegally.
The video is stored as a standard Need fast computer system for
computer file. playback and capture.
Software motion video does not Requires knowledge of digital
require specialized hardware for compression technology.
playback.
Long-lasting.

5. SOUND
Sound can enhance your website design and social media platforms. It is a
multimedia application that uses dialogue, recorded narration, music, and sound
effects. These are called the audio or sound elements.

When used in moderation, adding multimedia such as sound to your presentation

can be a great way to catch and focus the visitor’s attention, deliver information
to visitors, and help reinforce the visitor’s comprehension of the information
presented.
MULTIMEDIA DESIGN Bicol University Polangui Campus
COMPUTER STUDIES DEPARTMENT
ELEMENTS STUDY GUIDE

Sounds also can be combined in a multimedia presentation to provide information

and enhance the other media being presented.

Use of Sound

Music Speech

Background Narration
Attention grabber Instruction
Sound Effect

References:
https://ftms.edu.my/v2/wp-content/uploads/2019/02/MMGD0101-chapter-
1_052015.pdf
https://www.simplyeffectivewebdesign.com/five-elements-of-multimedia/
Taku, K. (2015). Introduction to Computer Graphics Design - CG Creation Basics