Visual Information

and Media
Learning Competencies

• describes the different dimensions of visual information and media

• comprehends how visual information and media is/are formally
and informally produced, organized, and disseminated
• evaluates the reliability and validity of visual information and
media and its/their sources using selection criteria
• produces and evaluates a creative visualbased presentation using
design principle and elements
Questions

1. What do you feel whenever you look at your throwback

photos?
2. Can you reimage the scene from which the picture has
been taken?
3. Do you find yourself overwhelmed with different
emotions seeking from the past?
Indeed a picture speaks a thousand words
this is the power of visual information
VISUAL INFORMATION AND MEDIA

VISUAL MEDIA VISUAL INFORMATION

• Visual media are images or frames of images that we can

construct and reconstruct to give different meaning to it.
• Visual information
entails the use of visual
media (that may or may
not be accompanied with
audio/sound) in the form
of photographs, motion
pictures, video
recording, graphic arts,
visual aids, and other
displays that use
pictorial representations
(Dictionary of Military
and Associated Terms,
2005).
 Visual Media and Information

• materials, programs, applications

and the like that teachers and
students use to formulate new
information to aid learning
through the use, analysis,
evaluation and production of
visual images
EXAMPLE OF VISUAL MEDIA

Photographs
Paintings Infographics
 EXAMPLE OF VISUAL MEDIA

Videos Memes Visual Note-taking

EXAMPLE OF VISUAL MEDIA

Posters Cartoon or Comic Strip

Formally and Informally produced Visual
Media

• visual media produced by formal organizations such as

schools, government, and established media/publishing
outfits are considered formally produced
• Other visual media are considered informally produced.
Purpose of Visual Information

•gain attention
• create meaning
• facilitate retention
 Visual Design Elements

•These are the building blocks or

basic units in the construction of
a visual image
 Visual Design Elements

Line Color Texture

Shape Value Form

These are considered to be the “grammar” of art
Line. Describes a shape or
outline. It can create
texture and can be thick
or thin. Lines may be
actual, implied, vertical,
horizontal, diagonal, or
contour lines.
Shape usually a geometric area that stands out from the
space next to or around it, or because of differences in
value, color, or texture. Shape may also be organic
Geometric shapes ---circles, squares and rectangles---are
regular and precise. They can be measured.

Organic shapes are irregular---seashells, leaves, flowers, etc.

Value–the degree of light and dark in a design. It is the
contrast between black and white and all the tones in
between. Value can be used with color as well as black and
white. Contrast is the extreme changes between values

TINTS ORIGINAL SHADES

COLOR
• Texture–the way a surface feels or is perceived to feel. Texture
can be added to attract or repel interest to a visual element.
Visual texture is the illusion of the surface's peaks and valleys,
resulting in a feeling of smoothness or roughness in objects.
As you can see below, this artist created a sense of
smooth water and prickly grass.
• Color–determined by its hue (name of color), intensity (purity of the
hue), and value (lightness or darkness of hue). Color and color
combination can play a large role in the design. Color may be used
for emphasis, or may elicit emotions from viewers.
 Color
Red, Yellow and Blue
are called P Primary colors (P)and
are used to create the rest
of the colors on the color
wheel.
I I S
S
When you mix two primary
I I colors together, you
get a Secondary color
(S). TheseI colors
I are Orange
(yellow and red), Green P (blue and
P
yellow) and Sviolet (red and blue)

And when you mix a primary and a secondary color together

you get an Intermediate color (I). These are yellow-green,
yellow-orange, red-orange, red-violet, blue-violet and blue-
green
Color Schemes

When two colors are located directly across

from each other on the wheel, they are referred
to as complementary colors.

What pair of complimentary colors did this artist

use in this picture?
Form–a figure having volume and thickness. An
illusion of a 3-dimensional object can be implied
with the use of light and shading. Form can be
viewed from many angle
 Let’s practice looking!

What elements do you see used in this geranium?

Color (red and green)

Shape (the outlines of flowers and leaves)
Line (the stems, the veins of the leaves)
Texture (smooth petals and furry leaves)
Principles of Design

• Consistency
• Center of Interest
• Balance
• Harmony
• Contrast
• Directional Movement
• Perspective
• Rhythm These are like the “rules of grammar”; they form the
guidelines that artists follow when they combine the
various elements of design
Consistency

• Consistency of
margins, typeface,
typestyle, and colors
is necessary,
especially in slide
presentations or
documents that are
more than one page
 Center of interest

• Center of interest isan area that first attracts attention in a

composition.
• This area is more important when compared to the other
objects or elements in a composition.
• This can be by contrast of values, more colors, and
placement in the format
Center of interest
Balance

•Balance is a feeling of visual equality

in shape, form, value, color, etc. It can
be symmetrical and evenly balanced,
or asymmetrical and unevenly
balanced.
Balance
Harmony

• Harmony brings together a composition

with similar units.
• If for example your composition was using
wavy lines and organic shapes, you would
stay with those types of lines and not put in
just one geometric shape.
Harmony
Contrast

• Contrast offers some change in value creating a

visual discord in a composition.
• Contrast shows the difference between shapes
and can be used as a background to bring objects
out and forward in a design.
• It can also be used to create an area of emphasis
How is contrast shown in this image?
Directional Movement

• Directional Movement is a visual flow through the

composition.
• It can be the suggestion of motion in a design as you
move from object to object by way of placement and
position.
• Directional movement can be created with a value
pattern. It is with the placement of dark and light areas
that you can move your attention through the format.
What is movement is shown on the picture?
How has the artist shown movement in this picture?
Perspective

•●Perspectivecreated through the

arrangement of objects in two-
dimensional space to look like they
appear in real life.
• Perspective is a learned meaning of the
relationship between different objects
seen in.
Perspective
Perspective
Rhythm
•Rhythm is a movement in which
some elements recur regularly.
•Like a dance, it will have a flow of
objects that will seem to be like the
beat of music.
Rhythm
Examine the visual media and answer the
questions that follow

1. What type of visual media

is presented on the right?
2. What are the purposes of
this visual media?
3. What design elements and
principles are present in
the given visual media?
Evaluate the visual media by
providing the appropriate
answer to each question based
on the given components.
• Based on the given
picture, complete the
table by supplying the
appropriate description
for the indicated visual
design principles
What Are Graphics

Pictures that are either drawn by the hand or through computer software are called
graphics. When you sketch or draw an image such as a chart or a drawing that may
resemble an image, you create a pictorial representation of an idea or object. When you
do so, you create a graphic

Two types of Graphics

Raster Graphics is much like an image especially when a drawing is digitized using a scanner

Vector Graphic is produced through computer software; thus, it is already in digital form.
•Software is used to edit the appearance
of the graphic, enabling into an
animation especially in multimedia
presentation (Parekh, 2006)
 The File Format, Lossy
Compression, and Lossless
Compression
 File Format. The key consideration in the selection of a
particular format for storing visual media is compression

• Lossy Compression – When you are amenable to reducing the quality of the image
or graphic due to reduction of the file size, you are opting for a lossy kind of
compression. The image or graphics may have a lower resolution but would still keep
the appearance of the visual since you may not be too sensitive with the color
change.

• Lossless Compression – A more accurate way of storing the visual information is

through lossless compression because it does not allow the image to dramatically
lose its appearance. This still is an efficient manner of compressing since it. “look(s)
for a recurring pattern in the file, and replace (s) each occurrence with a short
abbreviation, thereby cutting the file size. (www.users.wfu.edu).”
 File Formats

File format is indicated by the extension at the end of the file

Example: image.jpg or mywork.tif

• An image’s format identifies whether it was created using

bitmaps or vectors

• It also determines an image’s file size and visual quality

Common Visual Media File Type

➢ TIFF (Tagged Image File Format

➢ PNG (Portable Network Graphics

➢ GIF (Graphic Interchange Format

➢ JPG ( Joint Photographic Experts Group)

➢ BMP (Bitmap)

➢ PSD (Photoshop Document) or PSP (Paint Shop Pro)

Three commonly used types of picture files

a. .JPG
b. .PNG
c. GIF
 .JPG(“jay-peg” )

• It identifies the kind of data compression process that it

uses to make it more compatible and portable through
the internet.
• Supports 16.7 million colors that is why it is suitable for
use when working with full color photographic images.
• Best quality image to integrate with your document
.jpeg
 .GIF

• This type of image file is capable of displaying

transparencies and it is good for blending with other
materials or elements in your document.
• It is also capable of displaying simple animation.
• .Gif is much better for logos, drawings, small text, black
and white images, or low-resolution files.
 .PNG. (“ping”)

• It stands for Portable Networks Graphics

• It can display up to about 16 million colors
• .PNG allow the control of the transparency level or
opacity of images.
• It is also good with transparencies but unlike .GIFs, it
does not support animation
Advantages of Visual Media

➢A visual aid is helpful to present information to illiterate

audiences
➢Presenting information visually is an easy way to relay information
because it makes use of universal cues or signs that people are
familiar with.
➢Visual information also saves times in relaying the message.
➢The use of visual information also enhances resourcefulness and
creativity.
➢Visual information is very useful in the quick presentation of facts,
in the emphasis of points in the printed text, and in conveying the
information to the readers.
Disadvantages of Visual Media

Using visual information

➢ may also be very limiting because of the cost
of the preparation
➢ the complexity of certain images and graphics,
➢and the lack of familiarity of the audience to
some cues and signs conveyed by the visual
information.
Group Output

Group the students with 5 members.

1. The group will create an infographics, flyers, brochure,
signages, tarpaulin packaging on how to promote their
field of specialization.
2. The group may use venngage, Piktochart or any available
applications online to create infographics.
3. Learners output will be printed and submitted on the next
meeting.
• https://www.coursehero.com/file/98906027/Module-6-Lesson-11-
Visual-Mediapdf/

• https://www.youtube.com/watch?v=UEnSlofTvr4
• https://www.youtube.com/watch?v=UEnSlofTvr4&t=1116s
• https://www.youtube.com/watch?v=gm9nb3nQ1zc
• https://depedtambayan.net/wp-content/uploads/2021/11/NCR-
MLA-MediaInfoLit-M11_Edited-Comia-Aquino_Writer_Dela-Cruz.pdf