Note: Please do not reproduce this module

1
technology empowerment in a connected, digital world

2nd Edition

Authors
Melissa P. Juanillo, MIT
Emelita Jane M. Tan, MAET, LPT

Series Editor
Jaime D.L. Caro, Ph.D.
 Philippine Copyright 2020 by TechFactors Inc.

All rights reserved. No part of this courseware may be reproduced or copied in any form,
in whole or in part, without written consent of the copyright owner.

First printing of the second edition, 2020

ISBN 978-621-425-060-8

Published by TechFactors Inc.

Printed in the Philippines

Authors Melissa P. Juanillo, MIT and Emelita Jane M. Tan, MAET, LPT
Series Editor Jaime D.L. Caro, Ph.D.
Content and Editorial Alvin D. Ramirez, Cristina G. Saulo, Alexander P. Lim,
Micah Angelie C. Dizon, Divine Louise P. Anai, Syrahil J. Enriquez
and Angelica Mae M. Emata
Creatives Jiyas Suministrado-Morales, Gilbert Lavides, Christian Andrew Sabado,
Joseph Timothy S. Bago, Angelo Bulasa, and Justine Eliza Fontanilla
Systems Mark B. Abliter, Kenneth T. Salazar, Allan Nicole C. Celestino,
Robie Marc R. Peralta, Carlo M. Espinosa, Tyron Ed Tiongson,
Adrian Villafuerte and Kim Tyrone Plechas
Cover Design Christian Andrew Sabado

Exclusively distributed by TechFactors Inc.

101 V. Luna Road Extension
Sikatuna Village, Quezon City
1101 Philippines

Telephone number: (632) 929 6924

E-mail address: [email protected]
Website: www.techfactors.com

iii Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
PREFACE
TechFactors, Inc. (TFI) fills the need for quality educational materials that address the unique demands of
a Senior High School (SHS) program where students are given sufficient preparation for their preferred
college course and career path. The TFI Senior High School interactive courseware has been designed
to be instrumental in the development of critical knowledge and skills that are vital for careers. Major
industries are now largely driven by information and communications technology (ICT), which allows for
innovative ways of doing things. TFI nurtures the necessary ICT competencies in learners through
enthusing and constructive questions and activities that lead to expected outcomes and further
contextual exploration.

The SHS titles focus on how learners can gain the know-how that they need for the situations and activities
in their respective courses. Because each lesson is designed to be outcomes-based, the interactive
activities that come with each courseware incorporate constructively -designed assessment measures.
They also follow a curriculum that aligns with and far exceeds DepEd expectations.

But beyond all these, it’s the TFI spirit of making learning a great experience that sets our courseware apart
from all the rest.

Dr. Jaime D.L. Caro

Chief Academic Officer
TechFactors, Inc.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 iv

ABOUT THE AUTHOR
Melissa P. Juanillo, MIT earned her master’s degree in information technology at the Technological
University of the Philippines, Manila (TUP-Manila). She is currently finishing her doctorate in information
technology at the Technological Institute of the Philippines Quezon City (TIP -QC), where she works as
a Licensed Professional Teacher and full-time assistant professor. Melissa is an Oracle 11g SQL
Fundamentals I Certified educator.

Emelita Jane M. Tan, MAET, LPT, is a Higher Education Unit faculty of Miriam College who handles
undergraduate and graduate programs. Ms. Tan is a U.P. GURO Mathematics and Science Teaching
Society volunteer, where she conducts various training programs for daycare workers, elementary
teachers, and parents. From time to time, she conducts IT short course trainings for professionals at MFI
Foundation Inc. Teacher Ejane, as she’s popularly known to her students, also handles computer tutorials
for middle school international students.

Ejane graduated from Maryknoll (now Miriam) College, with a Bachelor of Arts in Communication Arts. A
couple more feathers in her cap are her degree in BS Secondary Education and her Master in Education
Major in Educational Technology (with high distinction) at Roosevelt College, Cainta, Rizal. At present,
Ms. EJane continues to share her knowledge through her expertise as an Educational Technology, E-
Learning, Strategies of Teaching, Digital Information, and Media Literacy resource speaker to ICT
teachers and professionals.

ABOUT THE SERIES EDITOR

Dr. Jaime Caro is Professor of Computer Science at the University of the Philippines Diliman and heads
its Service Science and Software Engineering Laboratory. He received the following degrees from the
University of the Philippines Diliman: Bachelor of Science major in Mathematics (cum laude) in 1986, Master
of Science in Mathematics in 1994, and Doctor of Philosophy in Mathematics in 1996. He spent a year as
a postdoc research fellow at the University of Oxford in the United Kingdom.

Dr. Caro was Assistant Vice President for Development of the University of the Philippines for 14 years. He
led the creation of the UP Information Technology Development Center. His past positions include President
of the Computing Society of the Philippines (CSP), President of the Philippine Society of Information
Technology Educators (PSITE), Vice President of the Game Developers Association of the Philippines (GDAP),
President of the UP System Information Technology Foundation (UPSITF), Vice President of the Mathematical
Society of the Philippines (MSP), and Chairman of the CHED Technical Panel on Information Technology
Education. Dr. Caro is also Chief Academic Officer of TechFactors Inc.

v Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021

 TABLE OF CONTENT

MODULE 2 HOW DO I CREATE OR INNOVATE

PRODUCTS AND PROCESSES USING
ICT TOOLS? 97
LESSON 6: What are ways we can use to create and manipulate
images to convey information? 99
The Elements of Design 100
The Principles of Design 104
Image File Formats 105
Image Authoring and Editing Tools 106
Image Manipulation Using GIMP 107

LESSON 7: How do we use infographics to present the data

we have? 115
Graphic Design Versus Information Design 116
What Is an Infographic? 117
Elements of an Effective Infographic 117
Create Infographics Using Piktochart 118
Types of Infographics 120
Making a Timeline Infographic 120

LESSON 8: How do we upload and share our files online? 125

File Management 126
Online File Management and Storage Services 127
Image Hosting Platforms 129
Video Hosting Platforms 130

LESSON 9: How do we use videos as media to convey information? 133

Video Production 134
Storyboarding 136
Things to Consider in Making a Video 138
Video Editing Applications 139

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 6

 MODULE 2
How do you create or innovate products and
processes using ICT tools?
Learning Outcomes
• Create, manipulate, and share images on the Web
• Explore the ICT processes involved in cloud computing
• Produce an audio-video presentation.

Portfolio Output
Project Prototype – this is the prototype of the solutions or products you
have conceptualized. The suggested module project for the students is a
short film or a campaign video. The video should include some
infographics or details regarding the problem you have chosen to tackle.
The product should be able to address or raise awareness of the problem/
issue that the students chose to tackle in the previous module.

Excellent Very Good Needs Practice

Criteria
5 PTS 3 PTS 1 PT
Common and
Very creative in its Somewhat creative
Creativity ordinarily seen
design in its design
elsewhere

Very limited
Presence of the Fully applies the Partially applies
application of
Elements and Elements and the Elements and
the Elements and
Principles of Design Principles of Design Principles of Design
Principles of Design

Audio/Visual Disorganized and

Well prepared Not much prepared
Presentation skills not well managed

97 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021

MODULE OUTLINE
Lesson 6: What are ways we can use to create and manipulate
images to convey information?
• The Elements of Design
• The Principles of Design
• Image File Formats
• Image Authoring and Editing Tools
• Image Manipulation using GIMP
Portfolio Task 1 – You will create a poster that will inform people about your ongoing project/
campaign. The poster shall embody elements and principles of design.

Lesson 7: How do we use infographics to present the data we have?

• Graphic Design Versus Information Design
• What Is an Infographic?
• Elements of an Effective Infographic
• Create Infographics Using Piktochart
• Types of Infographics
• Making a Timeline Infographic
Portfolio Task 2 – As a group, send a message to your viewers in poster format to inform others of the
role you can play as a youth of today to achieve social change. Apply the basic principles of infographics
and the techniques in image manipulation and design.

Lesson 8: How do we upload and share our files online?

• File Management
• Online File Management and Storage Services
• Image Hosting Platforms
• Video Hosting Platforms

Portfolio Task 3 – Upload the posters and infographics you have made to social media sites available
to your group.

Lesson 9: How to use videos as media to convey information?

• Video Production
• Storyboarding
• Things to Consider in Making a Video
• Video Editing Applications
Portfolio Task 4 – Based on the facts gathered in the previous lesson, make a campaign video that will
raise awareness in your target audience.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 98

 WHAT ARE WAYS WE CAN USE TO
LESSON 6 CREATE AND MANIPULATE IMAGES
Target TO CONVEY INFORMATION?
At the end of this lesson,
you will be able to EXPLORE
• Find appropriate images In the previous module, you had prepared your Project Pitch Document
that you can work on where the details of your project were specified. Now, you will learn design
with your project. that will help you produce images that are effective in conveying
• Apply the importance of information properly. But first, let’s do this activity.
the elements and
principles of design in Pretend that you won an enormous amount of money from a Lotto win, and
creating images. you wanted to invest it to start your dream business. In the business permit
• Create a document with form below, enter the details of your business.
images that represents
the project proposal in
relation to promoting
social change. Business Permit

Company/Business Name:

Type of Products/Services:

Location:

Owner:

After some time, you realize that you need a striking and cool logo to
represent your business. You intend to use it on your Facebook for
Business page that you are going to set up soon. Based on the details you
had defined in the business permit, sketch the logo you want to use for
your business. Use the space below.

99 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021

 EXAMINE

At a glance, what do
you think is drawn in
this poster? Why do you
think so?

What do you think of this poster inspired by Niklaus Troxler’s art style? At
first, it might be difficult to distinguish what the artist wants to portray in
this image, but because of the placement of strokes, you can come up with
an idea of what it is.

In this lesson, you will learn the elements and principles of design to
effectively communicate an idea or information.

The Elements of Design

Point, Line, and Space
Point, line, and space are some of the basic elements of design that have
limited form. The way by which these are used, especially when combined
with other elements, affects the overall perception of any communication.
A single design element or a combination of them can help in interpreting
the message of a drawing or design.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 100
 Point

A point is simply a dot. A point establishes a position and acts as a visual

focus. In a blank page, a single point immediately attracts and focuses the
eye. Several graphical points can make up a line and each point of a set of
them contributes to suggest the corner of a shape.

The eye senses a relationship between a point and the edge of the paper.
Adding another point in the page creates a relative position and sets up the
relationship with the first point based on the surrounding area of the page.
As more points are added to the page, grouping and subgrouping patterns
appear which determine viewing sequence (levels of importance), and
produce the information communicated and interpreted by the viewer.

Line

A line is created by connecting two or more points. It begins by extending

one point towards a specific direction. A line can work with other lines to
create an illusion of distance, space and depth. It can be straight, curved,
heavy, slim, dashed or dotted. A line can be used to divide a space, direct
the eye to a direction or two, and also to outline or define figures. Like in
the example presented in this lesson, certain lines can be placed in such a
way that they work together to resemble an object or illustrate an action.
Lines placed closer to an area’s edge, for example, will direct the eye along
the path they create.

The simplicity, complexity, elegance, and form of line is called contour.

Contour is also the outline of the exterior edges of a shape. A plain contour has
a clean, connected line. It may have line textures or be contrasted with
different designs or styles.

The straight line can separate content and elements in the page layout of a
magazine, newspaper, and even a website. The use of curved, dotted, and
zigzagged lines can define or emphasize a unique part of the layout. Virtual
lines, such as the ones suggested by the flow of text, also affect layout in a
similar manner.

Space

Space, or area, refers to the surface that acts as a visual container, drawing
attention to other visual elements in a layout. Graphic designers use space
as a means of defining the format and proportion in a layout. Empty areas,
or white spaces, can create spatial energy within a design, and directs the
eye from one part to another.

With the current state of print, broadcast, and web media, designers of
brochures, catalogues, and promotional print materials always consider
the effects of size, format, content, and surface quality on the printout.

101 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
Shape
The shape is an element of design which is a combination of lines, points,
and space (which can be two- or three-dimensional). An object that has
height and width has shape. A shape is mainly used in a drawing to
represent a real object, symbolize an abstract thought, or define an artistic
design. Using shapes accordingly can help define the mood of the graphic
design. Softly-curved and rounded shapes are seen differently from sharp,
angled shapes. Unusual shapes can be used to attract attention.

There are 3 basic types of shapes: geometric, natural, and abstract.

Geometric shapes include the triangle, square, rectangle, and circle.
Natural shapes are formed from natural things like animals and plants.
Shapes such as those of a leaf and an apple are examples of standardized
natural shapes used by artists. Abstract shapes, such as icons, stylized
figures, and graphic illustrations, are really just modified types of natural
shapes.

The following are some of the meanings associated with some basic shapes. EQUIP
You can learn more
about the elements of
design from this link.
The SQUARE and the RECTANGLE
are
Thetwo
commonand shapes. They send
SQUARE the RECTANGLE
aaremessage
two common shapes. stability.
of security and
They send
,, ts Each
a message one of
is security
an ideal and
shape for
stability.
,, ,, ,, companies
Each one is an ideal shape for a
and organizations with
,, .. strong
companies marketandposition, and a firm
organizations with a
belief
strong market position, This
in financial stability. and ashape
firm
ts is associated
belief withstability.
in financial strong character,
This shape
.. firmness,
is associated protection, and tradition.
with strong character,
It’s a shape held upright
firmness, protection, and on the floor
tradition.
as on any of its sides.
Its a shape held upright on the floor
as on any of its sides.

IANGLE
A

, ,
,. .

ts
. .
.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 102
 Color
Color is another element of design that can be associated with any other
element. All color comes from pure light. A color is produced by an object
that reflects light. The computer monitor is one source of artificial light
which is directly transmitted to the viewer’s eyes.

Color can produce dramatic changes in a design when it is used to

emphasize things or create images. When used properly, each color can
produce creative and unique effects. Designs on the web and other
publications apply color themes that are limited to a particular output to
produce a unified effect. The use of color for decoration, symbolism,
expression, and communication is part of human nature.

The properties of color are the following.

Hue is the other name for color, which includes the primary colors,
namely, red, yellow, and blue. When combined in equal parts, they create
secondary hues, such as orange, green, and violet. The combination of
primary and secondary hues creates the tertiary hues. You can refer to a
color wheel to understand more about the primary, secondary, and tertiary
colors.

Here are the following uses of color:

• Indicates where the eye should look first
• Pinpoints the important elements such as headlines and subheads
• Unifies a design
• Consolidates information
• Isolates or group elements together
• Arouses emotions
• Makes an image or object stand out within the design

All data that constructs computer imagery is digital. Monitors need a

method where colors in the spectrum can be simulated quickly. The
common method displays only the three primary colors, red, green, and
blue (RGB). When combined in the screen (a grid of pixels), white light is
perceived. By using all 256 intensity levels of each of the primary colors to
display each pixel, one will arrive at a total of 6.7 million colors (256 x 256
x 256). This is good if the intention is simply to view the colors on a screen.
However, information often needs to be relayed via print, and the colors
on a screen do not always display accurately in print since inked colors are
seen by the viewers through the reflection of light from the printed
surface. Ink colors are seen by the viewers by virtue of light reflected off
the printed surface, which is why the colored printing process applies a
color model that uses cyan, magenta, yellow, and the key color (black)
(CMYK).

Size
Size refers to how large or small something is in a document. Size is very
important in making the elements of a document coincide with one
another and makes the layout more attractive and organized. It displays
what is most important, attracts attention, and helps to fit the layout

103 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 together. Size makes all things easy to see. It establishes a consistent look
throughout a printed publication or web page document.

Texture
The look or feel of a surface is known as texture. Visual texture creates an
illusion of texture on a printed material or web page. Printed patterns are
a type of visual texture. Tactile texture can be felt physically. Nowadays,
even paper come in various textures. The wide selection of textures used
on paper and other materials can be translated accurately into rich, layered
graphics.

Here are the following uses of texture.

• Creates a mood or scene in a design
• Gives a printed publication, presentation, or web page a personality
• Creates contrast for interest
• Fools the eye
• Arouses emotions
• Creates a feeling of richness and depth

The Principles of Design

Balance
Balance refers to the equal distribution of weight, which, in design, applies to visual
weight. Elements such as size, lightness, and thickness can be scaled accordingly in
a design.

The two kinds of balance are symmetrical balance and asymmetrical balance.
Symmetrical balance is the even distribution of elements in a design. Asymmetrical
balance is the uneven arrangement of elements such that one side of a design has
more weight. Color, value, size, shape, and texture can be used as balancing elements.

Examples of asymmetrical and symmetrical designs.

Symmetrical

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 104
 EQUIP
You can learn more
about design principles
in this web link:
Asymmetrical

Contrast
Contrast is the placement of heavy and light elements within a page. The larger, darker
elements appear heavier in the designs than smaller and lighter elements.

This is the difference in value of the colors black and white, between distinct shapes
like the square and the circle, or between a big and small element. In texture, contrast
is defined by the roughness or smoothness of things in a layout.

Emphasis
Emphasis is the distribution of heavy and light elements in a design. It determines
which elements within the design are focused on the most and which ones are given
less attention.

Rhythym
Rhythm is the repetition of one or more elements in a design. It creates a mood and a
sense of movement. Variety in repeated elements makes the rhythm of a design more
exciting.

Unity
Unity refers to the feeling of harmony that is created by all the parts and elements of
a design. When a particular design is said to be unified, it means that a sense of
completeness can be felt from the work.

Image File Formats

Pixel: Another name for a picture component, it is the smallest
component of a bitmapped graphic composed of single-colored squares.
Each image is made up of these very tiny squares and each pixel
characterizes a color or a shade. Pixels, like other elements of design, can
be added, modified, and/or deleted.

105 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
How can one’s image be related to a
web graphic?
Nowadays, graphic designers face a new set of
considerations when working with graphic images on the
web. Most images sent to and viewed on the screen have a
low resolution or are simply for monitor-viewing
purposes only. For web page elements, 72 ppi more often
represents small files that are usable over a web page
element. The two dominant graphic file formats on the
web are JPEG (Joint Photographic Experts Group) and
GIF (Graphics Interchange Format) followed by PNG
(Portable Network Graphics) which extends to the
transparency representation of the images.
The most usable file What is a pixel? Why is it important in
GIF (Graphic File Format) format for the web is the choosing your image file format?
GIF, which is the first
file format supported by web browsers. It
remains the most popular web file format
on the web today.

This is a compressed
PNG (Portable Network Graphics) file format more often used for
the web just like the graphic
interchange file format. PNG file types represent images
with a transparency effect that allows images to overlap,
unlike a jpeg or gif file image that covers one another.

JPEG (often typed as jpg),

JPG (Joint Photographic Experts Group) is the standard file format
known to many. This file
format compresses high-quality static color images for
the easy transfer of files between print, media, and
the web. This is called “lossy” compression, which means real
image quality is lost as file size is reduced. The Joint Photographic Experts
Group was the committee that named this type of file format.

Image Authoring and Editing Tools

The Adobe Creative Suite includes some of the best-known image
authoring and editing applications, in particular, Adobe Photoshop. These
applications are provided as a bundle but can also be availed individually
for a price. That said, there are also tools and applications that are readily
available as free downloads on the Internet, and they can be used to edit
images and produce comparable results.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 106
 GIMP
GIMP is a free desktop photo editing
application. It is said to be one of the best
free photo editing tools in the market, on
par with the industry standard photo
editing tool, Adobe Photoshop. The user
interface of Adobe Photoshop is like that of
GIMP, thus proficiency in one means
proficiency in the other. Because it is an
open-source application, more features are
being added by many different developers,
and they are freely available to users.

It is not without flaws, though, because, unlike Adobe Photoshop, it lacks the
polish and quality build. This is because it is an open-source application that
is in continuous development. Some of the filters and other features have been
left outdated. In spite of this, GIMP is a versatile image editing application.
Pixlr

Pixlr is an ad-supported online image

editing tool, which means that it is free to
use but various advertisements are
displayed while the application is
being used.

Pixlr has two kinds of applications:

Pixlr Editor and Pixlr Express. Pixlr
Editor offers tools that enable the user
to manually manipulate the details,
specific areas, and aspects of the image.
It is ideal for users who are already
familiar with advanced image editing
tools such as Photoshop.

Pixlr Express is for newbies in image editing or users who need to perform
quick image enhancements without tweaking many buttons or details.
Preset filters are available in the same manner that they are provided in
the mobile photo sharing application Instagram. Pixlr also has a mobile
application for users who want to edit photos straight from their
smartphones.

Choosing between Pixlr and GIMP is a matter of convenience and

preference. GIMP offers Photoshop-level image manipulation while Pixlr
provides the ease and comfort of quick image editing. All that matters is
you keep in mind the elements and principles of design while creating your
images, and also, to be creative.

Image Manipulation using GIMP

Once you’ve downloaded and installed GIMP, you can now start
manipulating images at will. GIMP can read and write a large variety of
graphic file formats but it is most compatible with the XCF format.

107 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 This is similar to the PSD format in Photoshop which cannot be read by
alternative image viewers and media programs. You will not be able to edit
your picture in another software if you save or export it as XCF. If you
want to edit an XCF image, in other programs just export the file to JPEG
and/or TIFF so you can use it.

GIMP User Interface

The GIMP interface is quite plain and simple. When you run GIMP, three
windows will pop up. There’s the Image Window, the Main Toolbox, and
Tool Options box that provides tool-function choices.

The Main Toolbox contains a variety of tools. By clicking any of these,

you can select, draw, and transform objects, among other things. Also
found here is the Tool Options section which diplays the properties of the
tool that you chose. For example, when you choose the Paintbrush tool,
you can adjust its color and diameter.

The Layers Options shows the layer structure of the currently active
image. The Brushes/Patterns/Gradients options offer choices for brushes,
patterns, and gradients.

The Image Window is the area

where you will be primarily working
in. The one in the following example
indicates that a layer has not been
opened yet, thus the image window is
empty.

Creating a New File

Now that you have familiarized
yourself with the GIMP interface, it is
time to dabble with photo editing. For
you to be more familiar with GIMP,
you can try to create a logo for
yourself, for starters. Explore the
different tools.

1. To start, create a new file by going to File > New.

2. On the Image Size dialog box, type 720 for width and 480
for height. This aspect ratio is used by the old standard TV
screen size, which is how your photos will be seen if you
incorporate them to your final cut. After setting your
image size, click OK.
3. A third window will appear. This is the Image Window.
Note that each image opened and/or created in GIMP will
have a separate window.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 108
 4. Use the Brush tool to paint. In Tool Options, select a brush style. For our
purposes, use the Pencil Sketch style. Draw a logo on the Image window.

5. To add color, click the Color Selection tool in the Main toolbox.

6. After you have created your logo, add some text. Click the Text tool in the
Main Toolbox. Select a font, font size, and font color in Tool Options.
After you have set up your text, click the Image window. The Text Editor
window will appear. Type your text. Click Close when done.

7. Look at the Layers Options

window and notice that every
time you create a new text in
your image, GIMP
automatically makes a new
layer for it. Click the Move
Layers and Selection tool
in the Main Toolbox and
select the layer that contains
your text. By selecting the
text layer, you may move it on
the Image window. Fix the
position of your text relative
to the logo.
8. Now that you have made your logo, save your file. On the Image window
main menu, go to File > Save. Type a name for your file. Don’t forget to put
“.xcf ” at the end of the name. Finally, click Save.

9. For you to be able to use this file in Movie Maker, you have to export it as
another file format, let’s say jpeg, click File >Export and select jpeg or
(.jpg). This action will save it in JPEG file format.

10. Set the quality to 100 then click OK.

11. Close the Image window.

Rotating and Cropping the Image

Sometimes, it is difficult to capture images in a perfect horizontal position.
In GIMP, you can fix those tilted photos with the Rotate tool. Sometimes,
holding the camera in a perfect horizontal position is difficult. In GIMP, you
can fix tilted pictures with this tool.

1. Select the Rotate tool in the Main toolbox.

2. Click the picture in the Image window.
3. Drag the mouse to adjust the angle of the
picture and release it when you get the right
angle. If this is too difficult for you, try
adjusting the Rotation Slider in the Tool
Options.

109 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
4. After rotating an image, you can crop it.
5. To crop an image, click the Crop tool in the Main toolbox.
Then, in the Image window, create an area for cropping by
clicking and dragging the rectangle on the image. If you are
satisfied with the crop area, click Crop.

Color Correction
Altering the color of your picture can cause drastic changes to its overall
impact. To change the color, you have two options: do it manually (see
sample below) or use the automated color correction tools.

You can access the automated color correction tools by going to Colors >
Auto in the Image window main menu. The automated color correction
tools include the following:

• The Equalize tool spreads the colors in the image evenly.

• The Color Enhance tool is used for saturating or making your colors
brighter.
• The Normalize tool is used for underexposed images. It adjusts the
whole image to equalize the light and dark areas.

Manual Color Correction

As much as they are simple and convenient, automated color correction
tools give you limited freedom in regard to image color. For more options,
correct colors manually. Select the Color Balance tool (go to Layer >
Colors > Color Balance). There are three things that you can modify in your
image: shadow, highlights, and midtone. They correspond to the dark,
bright, and in-between areas, respectively, of your image.

You can modify these areas by mixing the red, green, and blue channels.
To mix the colors, drag the three sliders until you get the combination that
suits your taste. You can also modify the brightness and contrast of

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 110
 the image by selecting the Brightness-Contrast tool (Layer > Colors
> Brightness-Contrast). Move the adjustment slider to the right if you want to
have more brightness or contrast to your picture. Move it to the left if you want
less.

Another way to control the brightness and contrast of your image is by

using the Levels tool. This gives you more control as it has three triangular
sliders. These sliders correspond to the input levels. Adjust them to see
how the image is affected.

A more precise way of adjusting your image exposure is through the

Curves tool. Instead of sliders, what you will manipulate is a curve. Just
click a point on the curve and drag it. The image exposure will immediately
change. As with the Levels tool, just experiment by changing the curve
until you get the exposure you want.

111 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 CHECK
EQUIP
A. Multiple choice. Shade the box of the letter of the best answer.
The Stretch Contrast
AB C tool, like the Normalize
1. What image file format is often recommended for tool, equalizes image
brightness and contrast.
published web documents?
But here you have three
A. GIF B. JPEG C. PNG controls: the red, green,
and blue channels of the
2. A principle of design that draws the eye attention to a image. Adjusting these
part of the document. will give you more color
options.
A. rhythm B. emphasis C. balance
3. The element of design that separates elements within a
page.
> Levels in the Image
A. line B. shape C. color window menu. Then,
click the image to bring
4. This tool spreads the colors in the image evenly. up its dialog box. Press
A. Equalize B. Color C. Normalize the Auto button. To see
tool Enhance tool the effect of this tool,
click OK. Pressing Cancel
takes your image back to
5. This tool is used for underexposed images. its previous state.

A. Equalize B. Color C. Normalize

tool Enhance tool

B. Fill in the blanks. Write the answers on the blanks provided. Choose
from the words in the box.

Balance Emphasis Rhythm Unity

Contrast Size Texture Color

___________ 1. The repetition of one or more elements in a design

___________ 2. The feeling of harmony that is created by all the

parts and elements of a design

___________ 3. Produced by an object that reflects light

___________ 4. The equal distribution of weight in a design

___________ 5. The look or feel of a surface

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 112
 C. Essay. How does social networking help you in your daily life?

BUILD

Using the image authoring or editing tool of your choice (GIMP, Pixlr,
Photoshop, etc.), create a poster about your topic. While making your
poster, keep in mind the elements and principles of design.

113 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 114
LESSON 7 HOW DO WE USE INFOGRAPHICS
TO PRESENT THE DATA WE HAVE?
Target
At the end of this lesson,
you will be able to EXPLORE
• Learn the principles
In lesson 1, you have learned the elements of design, uses of shapes, and
of visual message design
discovered editing tools. Now, in this lesson, you will apply your previous
using infographics or knowledge in design in making infographics for your project. Before we
information design. start, do the activity below.
• Apply the basic
techniques of image You and your friends decide to sell pastillas and other sweets in your
manipulation. school. You want to see the growth of your earnings since day 1 and show
• Create images through it to your friends without them seeing the breakdown of your earnings. To
Piktochart. do this, you use a graphical representation of your earnings. Use the data
provided below.

Earnings 1st Month 2nd Month 3rd Month 4th Month

Pastillas 210.00 150.00 320.00 400.00
Other Sweets 150.00 300.00 300.00 500.00

Draw a chart or graph below representing the data listed above.

115 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 EXAMINE

In a quick glance, what

do you see in this
poster?

What can you say about the

design?

Since the advent of minimalist design, we have seen many infographics

similar to the one above in every area of our society. From printed posters
to websites, and even in campaign ads, infographics and graphic
organizers are prevalent. But no matter what the medium is, they all
represent information in a more eye-catching manner than full-text
reports. In this lesson, you will learn the various things you need to
consider when making effective infographics.

Before discussing this in depth, let us first look at the difference between
graphic design and information design.

Graphic Design Versus Information Design

Graphic design is mostly concerned with elements of design such as
typography, color, images, and use of space. On the other hand,
information design is the effective presentation of information using
design elements and techniques.
St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 116
 The absence of proper planning and research in the development of
information disseminated via images may cause communication
problems.

INTEGRATE What Is an Infographic?

Hans Rosling is The representation of data using colors, shapes, lines, and other visual
widely known for his elements is called data visualization. Through data visualization,
presentations in TED information overload caused by a mass of disorganized information can
conferences regarding be avoided. Charts and graphs were the most common methods of data
population where he visualization in the past, but nowadays, these serve as but a part of a
shows his very effective more comprehensive way of presentation not only of data but other kinds
data visualization
of relevant information as well. This visualization is called an information
techniques. Search the
Internet for his TED
graphic, or simply, infographic.
talks, especially when
he used boxes for data Studies have shown that 65% of individuals are visual learners. Most of
visualization. What do the youth today learn more through visual interpretation and analysis.
you think make Hans The brain processes visual information 60 times faster than it does
Rosling’s presentations information delivered in other forms. The environment in which they
of data very effective? conduct their daily activities and the media they frequently engage with
exposes them to information, many of which come in the form of
infographics.

This trend in visual communication is a challenge for all graphic design

representations.

Elements of an Effective Infographic

reliable, timely content

problem
theme clever
color solution
font message
readable

virality, SEO, location, social

117 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 Look at the previous image. Here, the viewer can easily visualize the
different elements that comprise a good infographic. Little explanation is
needed to fully understand the image.

Things to Consider When Making Infographics

• A creative design needs careful planning and proper research.
• Explore possible areas where you can gather data, then consolidate into
meaningful information for the viewers. Keep it simple and direct to the
point to lessen the effort put into reading.
• Column charts are used to show changes or progress over time.
• Pie charts are used to show small sets of numerical data as portions of a
whole figure.
• Line graphs are used for data that adjust constantly over a period of time.
• A doughnut chart is essentially similar to a pie chart but can contain more
data than the latter and can therefore have multiple rings.
• A bar chart is essentially similar to a column chart, but instead of
displaying data vertically, it orients data horizontally.

Create Infographics Using Piktochart

If you are already familiar with image
authoring tools, you can easily create your
own infographics. If not, there are tools
that are freely available for you to use to
create infographics.

One example is Piktochart. It is an easy-

to-use web-based infographic maker
that allows users to create professional-
grade infographics without the need for
extensive experience in graphic design.
Piktochart originated in Malaysia, and
besides it being easy to use, almost every
template contains tips that help in the Piktochart Infographics Maker
process of creating infographics for the
Web, print, presentations, and reports.

An account is necessary to access the services Piktochart provides.

Features
Simplified User Interface - Drag-and-drop and point-and-click actions make
Piktochart easier to use than professional design software. Options are
trimmed down to the basics, which include graphics, background colors or
images, and text. Moreover, data can be imported from external sources when
you upload files from your computer or from external accounts such as
Google.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 118
 Preset Templates and Graphics - Piktochart offers hundreds of templates
crafted by professionals. Templates are classified according to format,
such as for infographics, for presentations, or for banners, thus letting you
find the appropriate template easily. Thousands of images, icons, and
frames are also provided for you to choose from.

High-Resolution Downloads - You can download your work in high resolution.

Available file formats are JPEG, PNG, and PDF.

Professional-grade infographics use various shapes, items, and graphics

in order to be effective. With Piktochart, there are already preset
templates available for you to use, and all that is left for you to do is
customize the contents based on your needs.

How do we use Piktochart?

Piktochart is a fairly straightforward web

application to use. Go to the website, sign up for
free, and choose the template you like. The editor
page will then appear.

Use the tabs on the left side to choose the

functions and tools that you want to use. Do not
forget to enter an infographic title in the bar
above.

After you have finished editing your infographic,

you can download the file as an image by clicking
on “File” in the menu bar and choosing
“Download as image”. A dialog box will appear.
In the free edition, you can download the file in
original or medium size. These sizes are ideal for
uploading to the Web. For now, choose medium.
You can also choose whether you want a JPEG file
or a PNG file. Assuming you are using the free
version of Piktochart, the infographics that you
make will have a Piktochart watermark on it.

119 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
Types of Infographics
Visual Article - an infographic in which wordy content is made more visual.
Best used for information spread via social media. Has a strong title and lots
of content.

Timeline - outlines events chronologically. Can either be simple or

complex. Invites the viewer to go on a historical journey through
interesting and relevant content and design.

Flowchart - designed to make the viewer answer a series of questions to

reach a particular answer. Often funny and lighthearted, it also works well
on social media.

Cheat Sheet - serves as a quick reference for different kinds of

information. Can also be in the form of a step-by-step process on how to
do things.

Comparison - a visual comparison of two things. Best used with effective

visual presentation and a large amount of data.

Numerical - an infographic whose primary content is comprised of numbers,

charts, graphs, or statistical data.

Photo Infographic - pictures are used to tell the story or message of

the infographic. Usually designed in a simple manner using actual photos
to answer questions or describe something.

Data Visualization - also used for large data, but the focus is on creative
visualization. Highly dependent on design to be effectively visualized.

Making a Timeline Infographic

History books always have been guilty of information overload for most
readers. Though limited in detail, a timeline infographic can improve the
way by which things that happened in the past are presented. Products,
brands, or trends can also be subjects of timeline infographics.

Tips
1. You cannot create infographics without doing research.
2. Telling a great story requires extensive research. Your infographic
must include only the most relevant and interesting information, and
that much work may take weeks or months to do.
3. The longer the timeline period, the more interesting the infographic
should be.
4. To make it easy, limit the time period. Keep it concise and direct to the
point.
5. Experiment on new color palettes by searching for free color palettes
online. You may also consider using sample objects from Microsoft
PowerPoint, for example.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 120
 6. Take time to arrange the shapes, banners, ribbons, and arrows in your
infographic. Varying the widths, lengths, or colors of the elements can
influence the overall message being conveyed.
7. Always consider the logical flow of the information you are trying to
present. If there is a need to draw branches, do so.
8. An image-heavy infographic generally depends on illustrations, but
photos, when properly arranged, may produce a better effect depending
on the design and subject matter.

121 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 CHECK
A. Identification. Answer the following questions.
AB C
1. Pie charts and bar charts belong to which type of
infographic?
A. numerical B. timeline C. flowchart
2. The type of chart that displays small sets of numerical
data in their respective proportions.
A. line chart B. doughnut C. pie chart
chart

3. You cannot download your Piktochart infographic in

which of the following formats?
A. line B. shape C. color
4. You can do any of the following with your output from
Piktochart except:
A. square B. circle C. triangle
5. The type of infographic whose main content focuses on
images.
A. triangle B. circle C. square
6. The type of infographic that follows and presents a
series of events.
A. triangle B. circle C. square
7. The type of infographic that compares two things.
A. triangle B. circle C. square

B. True or False. Write either true or false in the blank.

___________ 1. Careful planning and extensive research are needed
in the process of creating infographics.
___________ 2. Infographics can be done in Microsoft PowerPoint.
___________ 3. In image manipulation, the resolution is the same for
both web and print.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 122
 C. Essay. How effective are infographics in presenting information to people
nowadays?

BUILD
Open your school’s website and gather information about its history. This
may include the overall changes in the school from the past to the present.
Also consider data such as the total number of students then and now, the
administration, and admissions. Afterward, create an infographic about the
information you have gathered. Follow the guidelines given in this lesson.

123 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 124
LESSON 8 HOW DO WE UPLOAD AND SHARE
OUR FILES ONLINE?
Target
At the end of this lesson,
you will will be able to EXPLORE
• Be clear on what
Lessons 1 and 2 covered principles of design and things to consider when
constitutes a good file
making an infographic, as well as how to make images and infographics
management system. using various tools. In this lesson, you will now upload your works onto
• Become familiar with the Internet and share these with others on at least one of the many online
some of the more image and video hosting platforms and social media.
popular image and video
hosting platforms. To start, list the websites or platforms you already upload your images and
multimedia files to (Facebook, Instagram, and the like) in the boxes that
follow.

Images Videos

Your Files

Document Others

125 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 EXAMINE

There was a time when

people stored their files
by sending them as
attachments to their own
email address.

How would you save files that are

larger than 25MB?

Have you ever been in an Internet café to do your homework, finished it

and then suddenly you realized you forgot your flash drive at home? What
did you do to get your homework from the computer you were working on?

Previous generations of students attached the files they worked on an

email message, sent it to their own email address, and voila! An online
backup of the file was created. But as time passed, file sizes grew
tremendously, and at present, most email services support only up to
25 megabytes of attachments, while some files-particularly those of
images and videos-can be larger than this. What would you do, if your file
is larger than the allowed attachment size?

File Management
File management is the process of naming, editing, storing, and sharing
files. With a proper file folder naming scheme and the use of an
understandable hierarchy, you can make the most of your image and file
collection. File management is often done in the File Manager interface,
where files and folders are managed, and you have likely already been
naming, moving, renaming, editing, copying and deleting files and folders
using this. Some file managers are like web browsers, in that these are
designed for network connectivity via protocols, such as FTP and WebDav.
The role of these particular file managers is to let the user access the file
server the way they would an ordinary file system.

Every file or document worked on needs to named and kept in properly

arranged and nested folders or sub folders, the organization of which

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 126
 is fundamental in file management, as directories and subdirectories follow
the same hierarchy.

A folder for primary, or original, files or photos should be kept intact for
future use and processing. Folders for derivatives, which are a copy of a file
or photo or a modified version of the original work or folder, are best
employed for frequently used, revised and modified files. Archived files or
photos are those which you think are no longer needed for the present
project or time and can be placed in their own specific folders.

An example of naming conventions of folders and files, as well as their

hierarchies, follows:

• Archived
• Online Files
• Work in progress
○ Audio
○ Video
○ Docs
□ PDFs
□ .docx
□ .xlsx
○ Presentations
□ .pptx
○ Resources
A well-organized file management system makes it easy to know where
everything is. Be conscious of file storage, what files are in your folder,
your folder names, and file organization, (the hierarchy, or level, of the
folders created) when you set up your file management system.

As the number of files and images grow over time, try to be consistent in
the way you organize your files so as to make things easy for yourself.

Online File Management and Storage

Services
Storing such things as homework, projects and research papers has
become easier thanks to cloud storage. Such services can be free or paid
subscription services. Both give users a certain allocated amount of
memory to store their files, which can then be accessed anywhere by
computers, tablets and even smartphones.

An advantage of these online storage services is that the contents within

can be shared with multiple users using related services. The following are
some of the most widely used online storage systems for files that offer
smart file management.

127 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
Google Drive
Google Drive is a free file storage and synchronization service by Google
which allows its users to store and share files, as well as edit documents,
spreadsheets, slides, and forms with other collaborators. Files and folders,
including the contents in these, can be shared, and restrictions can also be
set on what the collaborators can do with the folders or files shared, such
as only allowing them to see the files or allowing them to edit the file’s
contents, depending on the kind of access you want them to have.

OneDrive
SkyDrive, Windows Live SkyDrive, and Windows Live Folders are the old
names of OneDrive. OneDrive is an online storage service offered by
Microsoft, which is available for its customers. Files stored in a OneDrive
account can be synchronized with almost any other device that has a
OneDrive application installed in it.

Dropbox
Dropbox is a service that allows the user to edit a file and have that file sent
to, and updated on, the computers of that file’s collaborators who use the
same service. This requires participants to download and install the
Dropbox software into their computer, which then creates a special folder
where files collaborated on are stored and updated. Any changes done to a
file are automatically updated onto the copies used by the other
collaborators, who are also prompted about the changes.

From mobile devices, Dropbox users can upload, re-use, manage and share
selected photos, or even an entire album, through the Internet.

Dropbox is one of the best providers for transferring and sharing specific
photos or folders with others. There is also, in addition, an option for
offline viewing of files and photos as well. Inviting other people to join
Dropbox will give an extra 16 GB free storage to the subscriber who invited
them in.

Videos and pictures are often taken

to remember memories and special
moments, such as family gatherings,
org events, weekend getaways and
school achievements, and these
videos and pictures can be brought
online. For example, have you used
Facebook in the past, to post your
videos and images? Did you notice
anything about the video or picture
you uploaded?

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 128
 Image Hosting Platforms
Chances are high that the resolution, and thus the quality, of the videos
and images that you posted on Facebook weren’t as good as the original,
since social media sites need to reduce resolution of uploaded material to
ensure fast loading of content.

This reduction in resolution is usually not done by image hosting

platforms, which are online services dedicated to uploading, viewing and
sharing high quality images. Image hosting sites maintain the original
resolution of images since these are very useful for artists and
photographers who want to keep an online portfolio.

Not all image hosting platforms are created equal, which means you will
need to consider which online service, or image hosting platform, will best
cater to your specific needs. What follows are some of the more common
image and video hosting platforms available.

Instagram
Instagram is an online mobile social networking service that allows its
members to share life moments through photos and videos and share them
with either the public or only with specific people. It has a web application
but is mostly used in mobile devices.

Imgur
Imgur is recognized as one of the best image hosting sites where speed and
quality of upload are concerned. A user account is not needed for someone
to use its service to quickly upload high quality images. Imgur is especially
useful if you want to share pictures on social networking sites like
Facebook but don’t want to lose image quality.

Google Photos
Picasa was once a popular image organizer and viewer tool of Google, but
the company then decided to focus on creating a photo app that works
seamlessly on all devices-Google Photos. Google Photos is one of the best
applications around where accessing and backing up of photos is
concerned. It can be synchronized directly to a personal account through
a device and has a feature designed to organize photos according to such
descriptors as places, food, things, events or people. Unlimited free
storage is available, but the maximum size of photo storable is 16
megapixels, with larger-sized pictures being reduced to 16 megapixels. An
interesting feature of Google Photos is that, when you use a term to search
in the library of photos, it will identify which images contain the word
searched for. Using Google Photos is a good way to manage files, especially
if you’re a fan of Android devices, because it will then already be built into
your phone.

129 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
Flickr
Flickr allows for free photo sharing and hosting amongst social networking
site users, has editing features to enhance photos and organizes these
photos into albums for sharing at a later time. Flickr also has such security
features as making the photos and albums available to only to a selected
audience.

Photobucket
Photobucket is a site where images, photos, videos,
and slideshows can be stored and shared, even if
those shared with don’t have Photobucket accounts.
Some of its functional features include allowing for
collaboration with friends and families on a photo
album, enabling easy placement of photos
into albums. Fixing of photos and adding stickers, frames, and the like, a
scrapbook builder, a slideshow builder, and a remix builder which users can
use to put together photos, videos and music for online posting.

INTEGRATE
Video Hosting Platforms Felix Arvid Ulf Kjellberg,
widely known as PewDie,
YouTube is one popular YouTuber
Perhaps the most popular video hosting known for his comedic
website today is YouTube, which is a website game commentaries and
vlogs. His vlogs were
where users can upload, view, and share
so viral that in 2012, he
video clips. Most of the content found on
surpassed one million
YouTube has been voluntarily uploaded by subscribers, and in
members and can be watched or embedded 2017, he reached over
into websites of both registered and non- 53 million subscribers
registered users. (“PewDiePieChannel”.
A video that has been uploaded to the site can be immediately watched by YouTube. Retrieved 23
millions of viewers, thanks to its ease of use, and due to the resulting February 2017). He
enormous number of uploaded videos on the site, YouTube has developed now earns a ton of
a user-moderation system of “flagging” and labeling to rank its videos to money and helps a
be “most viewed,” “most discussed,” “favorites,” and so on. lot of charities from
the proceeds from his
videos.
Vimeo
Founded by Jake Lodwick and Zack Klein in
2004, Vimeo is the first global video sharing What factors do
website to support high-definition video user you think make his
uploads, shares, and views. Vimeo videos viral?
How do you think
users enjoy unlimited bandwidth, minimal video buffering, can sell or rent
does PewDiePie
their videos and, best of all, enjoy accounts that are ad-free for uploaded
earn his financial
videos. growth?
How can you surpass
Vimeo, however, is not without flaws. It might give you a choice between a his achievements on
free and a paid account, but as of now, there is not much difference YouTube?
between paid and free accounts. That said, you should not expect much
from Vimeo’s customer service if you only have a free account.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 130
 How to upload your files and images
1. First, sign up with any image hosting website.
2. Look for the folder in your computer where the file or photo you want to
share can be found.
3. Select the chosen photos/files you want to upload. Pressing Shift enables
you to select more than one file.
4. Click and drag the selected files to the image hosting website to upload.
Click the Share button for the purpose of allowing others to see or edit the
file/photo.
5. Lastly, enter the email addresses of the people you want to share your
files/album with.

Sharing Files with Google Drive

Sharing Files

There are two ways to share files stored in Google

Drive. The first method requires you to enter the
email addresses of the people you want to share the
file with. To do this, right-click the file and select
Share.

Enter the email addresses of the people you want to

share the folder (or file) with, then on the combo
box on the side, choose which kind of access you want to give them.

The second way, if you don’t want to manually enter tons of email
addresses, is to share using a “Shareable Link,” which is automatically
generated by Google. You can also specify needed access limits.

131 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 CHECK
A. Identification. Answer the following questions.

___________1. This is an online storage service by Microsoft.

Previously known as SkyDrive.
___________2. This is an image hosting site that was preceded by Picasa.
___________3. This is a video hosting site whose users have unlimited
video bandwidth.
___________4. He is a famous YouTuber that gained millions of
subscribers in a span of five years.
___________5. This image hosting site is known for quick uploading of
images. You don’t even have to register an account to do
so.
___________6. The purpose of this is to let the user access the file server
like an ordinary file system.
___________7. This is an online storage service where you can give a
shareable link and set limits on user access.
___________8. This is the process of naming, editing, storing, and sharing
files.
___________9. This is an image hosting site widely used in mobile
(Android) devices.
___________10. This online storage service allows a user to edit a file,
which will then be updated on the computers of other
collaborators of that file using the same service.

K. Enumeration. List down 5 popular social networking sites.

1.
2.
3.
4.
5.

BUILD

Choose any photo hosting web site and upload your poster and other images
for your proposed project. Make sure to apply proper permission usage so
your groupmates can access, edit and share your poster and images.

Optional: Organize your photos and upload these onto a free image hosting
site for future sharing with friends and loved ones.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 132
LESSON 9 HOW TO USE VIDEOS AS MEDIA
TO CONVEY INFORMATION?
Target
At the end of this lesson,
you will be able to EXPLORE
• Be clear on what In the previous lessons, you have learned to create your own posters and
constitutes a good file images and share them over the Internet.
management system.
• Become familiar with Almost every one of us likes to watch movies, TV shows, cartoons, and
some of the more many other forms of video entertainment. We also have our own opinion
popular image and video or rating of a video depending on how much it’s worth watching, and the
hosting platforms. same goes for movie reviews and other forms of evaluation on how good a
show is. But what exactly are the things you are looking for to say that a
show or movie is good? What are the things that make you say, “no, that
is not a good film?” Write down your answers below.

133 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 EXAMINE

Captain America: Civil

War was one of the more
popular Marvel movies.
It involved many actors
and actresses who fit
into their characters
so snugly, they have
become the “face” of
the superhero characters
themselves.

Video Production
“As of March 2015, creators filming in YouTube Spaces have produced over
10,000 videos which have generated over 1 billion views and 70+ million hours
of watch time.” (YouTube, 2017)

Previous generations of students used to attach the files they are working
on in to an email message, send it to their own email address, and voila,
they have an online backup of the file. But as time passed, file sizes grew
tremendously, and at present most email services support only up to 25
megabytes of attachments, while some files-particularly those of images
and videos-can be larger than this. What would you do, if your file is larger
than this allowable attachment size?

Videos are undeniably excellent for communicating information to a large

INTEGRATE
audience. Different sectors of society try to exploit this medium to Are you familiar with
maximize its potential and purpose. Businesses use video ads on television James Cameron’s movies
and on the Internet to reach consumers in a manner that promotes brand- like Titanic and Avatar?
retention in the consumers’ minds. This is often done with the use of a story If yes, how do you think
or format that viewers can relate to, and that’s how views are perpetuated. careful planning helped
Cameron win various
Successful videos often require the services of tenured video production awards for his films?
companies to provide great results, but that doesn’t mean you cannot
produce your own quality video. By carefully studying the following
elements and practices, you can also make your own effective and quality
videos.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 134
 Elements of a Video/Film
The following are the five categories that
are critical for effective videos.

Sight – this refers to the visual aspect of a

video, whether captured by a camera or animated. Each frame in a video
is crafted in a certain way to convey a message, mood, or situation.

Sound – this complements the video as sound effects, music, and

synchronized sounds (conversations and natural sounds). There was a
time when movie productions couldn’t
synchronize the audio with the video so they
used live music to complement the film.

Sight and sound are the two elements that

basically constitute a video.

Color – creative use of color imparts

underlying impressions to a certain scene.

Motion – through movement, filmmakers lead the audience’s attention on

the purpose of each scene.

Emotion – this refers to the “feels” of the

video that allow the audience to relate to the
video. This makes the presentation engaging
and interesting to its audience.

Stages of Video Production

Whatever video you are making, be it a one-minute promotional video, a
vlog, a documentary, or a film, the stages of video production are usually
the same. There are divided into three stages: pre-production, production,
and post production.

Pre-Production

This is the planning stage where all the crucial preparations are done. This
is where the vision of the outcome of the video production is identified and
the specifications of the production are defined. The following are the
things involved in professional pre-production according to Amy Ferzoco
of Catmedia.com (Ferzoco, 2015).

• Project kickoff
• Production schedule
• Script development
• Storyboards
• Graphics concepts
• Location scouting
• Prop and wardrobe identification and preparation
• Post-production preparation

135 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 Production

This is where the fun part or the actual shooting of scenes take place. This
is also the important part where the director keeps a keen eye on every
detail during the shooting, making sure that the intended scene or
message is relayed by the cast with the support of the crew.

Post Production

This is the editing stage where the recorded video and audio footage are
assembled in relation to the script. Music, synchronized sounds, and visual
effects are added along with color or audio correction to suit the
requirements of the director and the script.

Storyboarding
Storyboarding is part of the pre-production stage. But what is a storyboard?

A storyboard is the visual representation of your video. It illustrates each

important scene that can be found on your audio-visual presentation
(AVP). From the beginning, to the rise of action, to the conflict or climax,
down to the resolution or end. This is the essential mapping-of-
illustrations step in the pre-production process. This ensures there will be
no more changes in the actual video shoot and there’s adherence to the
budget. But how do we develop the storyboard? Let’s first know the five
elements of a story.

Setting

It is the time and location where the story occurred. This may cover a
certain period, like an event from the past and covers the general mood of
the time, such as the gloom of wartime or the thrill of Age of Discovery.
Some movies are content to show the geographical location of the story.

Character

Character is the personality that moves within the story. It can be a character
or the characteristic of a person, animal, or thing that is followed in the story.
It may embody the qualities, morals, intellectual,

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 136
 or emotional qualities of a person which may be expressed in the action or
dialogue.

Within a story, character is comprised of two sides—one that exemplifies

good or moral righteousness—the protagonist or hero, and another that is
often selfish and cruel—the antagonist or villain.

Plot

This is the sequence of events within the story; the logical series of
INTEGRATE happenings including the conflict, or stress part, of the story. In a short
For more ideas on how story, there is only one basic plot so that the reader can read or view the
an AVP storyboard is events in one sitting. The conflict or problem is presented early in the
constructed here is the story and the unexpected event or surprise is part of the events which
website you can visit. unfold.

In a plot, every part of a story should be closely related and link to the next
unconcluded scene, as these comprise the order and sequence of the story
that will engage and excite the audience. The plot starts from the
beginning of the story, to the culmination of actions or events, to the
problem or conflict/turning point, to the recession or falling events, to the
final resolution and closing of the story.

Conflict

This is the struggle between two things or people in a story. A character may
struggle not only against another person, but also against the forces of nature,
society, or even themselves.

Theme

It is the central point or belief of the story. It is the main idea being revealed
or interpreted in the story.

Storyboard Template
Rise Middle/Conflict Fall

No. No. No. No. No.

Scene/Location: Scene/Location: Scene/Location:
Character/Dialogue: Character/Dialogue: Character/Dialogue: Character/Dialogue: Character/Dialogue:
Animation: Animation: Animation: Animation: Animation:
Transition: Transition: Transition: Transition: Transition:
Camera Shot: Camera Shot: Camera Shot: Camera Shot: Camera Shot:
Audio/Background: Audio/Background: Audio/Background: Audio/Background: Audio/Background:

137 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 No. is the number used for the series or sequencing of events.

Scene is for the location setting where the event would take place.

Character is for the person, animal or thing that will act in relation to the
scene. It may follow through with the conversation of the character(s) as
needed.

Animation is the visual effect that you usually apply, like which includes
fade, wipe, fly in, or slide in a PowerPoint presentation.

Transition is how a slide or frame would move in relation to the next one.
Transitions include wipe, push a split, and dissolve, to name a few.

The Camera shot is categorized between three to four kinds, namely close
up, extreme close up, middle or medium shot, and long shot.

The background sound and audio are the sound effects or audio backdrop that
establishes the locale.

Microsoft Movie Maker is a popular video-editing program for Windows.

You can use it to apply various effects in making your own mini movie clip.
With the use of its timeline, you can view the exact and precise application
of certain effects in a video. You can save your movie like its an editable
storyboard.

Things to consider in making a video

Planning is the key. Spend more time on pre-production to save on
money.

Every time you work on something, preparations are needed. Think of

the purpose of this project. Will it be just for the classroom with no
intention to be used in a film festival or exhibit? Do you plan to upload it
later on YouTube or some other video sharing site? Would it be a
commercial or promotional material or would it simply be for fun?

Knowing what is expected at the end will lead the focus of this project. EQUIP
Define a schedule to follow for the shoot. Track things needed in the shoot
and find out what are essential to trim the list down. A mini-clip does not
require much, so get the character and the appropriate locale right from
the start, so that you don’t have second thoughts during production.

Well-crafted scenes are important for them to be dynamic and vibrant.

Camera angles and movements can help the eye follow through to the next
scene. They can motivate and inspire the viewers to be interested and be watch?v=LgDwNxGIuCQ
hooked until the end of the video.

Rushing ideas can give you inadequate possibilities so write it all down and
know what you want. Every aspect of production is related to the budget
and you can only do so much where money is concerned.

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 138
 Keep in mind the number or days allotted for the project, its due date and
presentation.

Don’t be discouraged about criticism. This is your production and what

better way to learn and share this exciting experience than in a showcase
for critics? Years from now, you may view your mini-clip and laugh about
it or maybe will lead to you getting fame and fortune if it goes viral online.
But don’t get ahead of yourself. Just finish the job and enjoy whatever there
is to experience in the making of your AVP. The show must go on.

Adobe Premiere Pro CC

Video Editing Applications

Video editing comes last in the stages of production but even so, during the
logistics planning in the pre-production stage, your team should already
have identified which tool to use. Do you want to use Adobe Premiere Pro?
That would be a great tool for professional editing. But as a student, can
you afford it? Does it suit your need and is the cost worth it? Professional
editing tools are expensive because they offer a variety of editing
capabilities which are not available in free tools that are downloadable at
no cost from the Internet. But this doesn’t mean you can’t create quality
videos from those free tools.

Windows Movie Maker for example, can be used to creatively edit videos.
Unfortunately, Microsoft has officially ended its support for this program
in 2017. But there are lots of free video editing tools out there that are just
as good, if not better, than Movie Maker.

Here are some of the popular video editing software that you can use for
free. (Wilson, 2017)

139 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
Lightworks

EQUIP
You can learn more
about Lightworks on
their website. You
have an option to
download the free app
or buy the professional
subscription-based
license.

Image taken from Softonic.com - https://screenshots.en.sftcdn.net/en/scrn/318000/31

8077/54bd2773bd0e7scr_1421675338-700x355.png

Dubbed as a professional video editor for

everyone, Lightworks is indeed powerful
because it’s not just a simple tool for cutting
video clips. It works on all major operating
systems (Windows, Linux, Mac) and supports
almost every format you can think of without
the need for transcoding. It is also optimized
for speed in rendering and offers various
powerful, real-time effects with built-in presets
and many features that are often only present
in paid professional video editors. In other
words, it is truly a powerful professional video
editor.

Shown is a scene from the movie, The King’s

Speech, a 2010 British biographical drama film Scene from the film, The King’s Speech (2010)
directed by Tom Hooper and written
by David Seidler, starring Colin Firth, as King George VI, and Helena
Bonham Carter as Queen Elizabeth. It won an Academy Award for Best
Picture in 2010. You wonder why it was mentioned? Because Tariq Anwar,
the editor, used Lightworks in cutting the movie. The trial version of
Lightworks may be used for 7 days for free. Its website is www.lwks.
com(Lightworks, 2017).

St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 140
 VideoPad Video Editor

VideoPad is a beginner-friendly video editor that offers excellent features.

It does a great job in achieving a balance between being an “easy-to-use”
and “professional” video editor. It might not offer as many features as
Lightworks, but the full paid version still offers an excellent array of
practical editing tools.

Shotcut

Shotcut, originally an app made for Linux, has an unusual user interface
which is friendly enough for users to find their way (most of the time) when
using the app. Shotcut has a steep learning curve which requires a great
deal of patience, but according to TechRadar, “…real rewards will only be
reaped by those willing to invest…” (Wilson, 2017). Shotcut nevertheless
is a powerful professional-level video editor. The best part is it’s free.

141 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 CHECK
A. Multiple Choice. Encircle the letter of the best answer from the choices
given.

1. The stage in video production where the actual footage is shot

a. Production c. Post-production
b. Pre-production d. Production compilation

2. The stage in video production when all of the editing is done

a. Production c. Post-production
b. Pre-production d. Production Presentation

3. The one who is responsible for composing the words that will be said on
camera
a. Actor c. Illustrator
b. Director d. Scriptwriter

4. Videos of this generation are very helpful in many ways, except one.
a. Present real-life examples and situations
b. Can be a medium of instruction
c. Makes understanding subjects and ideas complex
d. Attention-catching when presenting information

5. The act of making graphic organizers in the form of illustrations or images

displayed in sequence for the purpose of pre-visualizing a motion picture.
a. Planning c. Storyboarding
b. Sequencing d. Visualizing

6. The act of recording scenes based on the storyboard

a. Video editing c. Video shooting
b. Video organizing d. Video sorting

7. The process of manipulating and rearranging video shots to create new

work
a. Video editing c. Video production
b. Video shooting d. Video transitions

1 St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 142
B. True or False. Write TRUE if the statement is correct and FALSE if the
statement is incorrect. Write your answer before each number.

1. Videos are very helpful in the sense that they provide a

detailed and interesting means of presenting ideas that
text and graphics cannot give.

2. A video production is divided into three phases:

pre-production, production, and post-production.

3. Video editing applications allow you to assemble

different media assets to create a final output.

143 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 C. Fill the Pyramid. Complete the Video Production Pyramid by
classifying which stage of video production the following actions occur in.
Write your answers inside the triangle.
Audio Narration Equipment Objective
Color Correction Field and Studio Props
Concepts Shooting Research
Crew Final Edit Script
Dub Location Storyboard
Talent
Visualization

Post Poduction

Poduction

Pre-Poduction

VIDEO PRODUCTION PYRAMID

D. Prove It. Discuss why video editing is considered both a technical

process and an art. (4 points)

1 St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 144
E. Compose Your Own. Think of a trailer of a movie you have recently
seen and create a storyboard of it. The flow of the story and what scenes to
include or focus on, is up to you.

SETTINGS

CHARACTER

PLOT

CONFLICT

THEME

145 Philippine Copyright 2020 St. Joseph College of Sindangan S.Y. 2020-2021
 BUILD

With the video production techniques you’ve learned in this lesson, your
group will create a 2 to 3-minute video (TV commercial, short video,
informational video) that will present the cause of your project. You must
be able to make a script and storyboard and use these two as your director’s
first steps to produce your video.

Choose who the director, scriptwriter, production staff (camera man, props),
and cast members will be.

1 St. Joseph College of Sindangan S.Y. 2020-2021 Philippine Copyright 2020 146