Empowerment

Technologies
12
QUARTER 1
MODULE Imaging and Design for Online
10 Environment (Part 1)

TECHNICAL VOCATIONAL LIVELIHOOD

Empowerment Technologies– Grade 12
Quarter 1 – Module 10: Imaging and Design for Online Environment Part 1
First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.
Published by the Department of Education Division of Pasig City

Development Team of the Self-Learning Module

Writer: Charmaine A. Eclavia
Editor: Ma. Lerma I. Cantanero
Reviewers: Janeth M. Pineda (Content)
Illustrator: Charmaine A. Eclavia
Layout Artist: Rizza Joy Magno
Management Team: Ma. Evalou Concepcion A. Agustin
OIC-Schools Division Superintendent
Aurelio G. Alfonso EdD
OIC-Assistant Schools Division Superintendent
Victor M. Javeña EdD
Chief, School Governance and Operations Division and
OIC-Chief, Curriculum Implementation Division

Education Program Supervisors

Librada L. Agon EdD (EPP/TLE/TVL/TVE)

Liza A. Alvarez (Science/STEM/SSP)
Bernard R. Balitao (AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE)
Teresita P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by Department of Education – School Division of

Pasig City
 Empowerment
Technologies 12

QUARTER 1

MODULE
Imaging and Design for Online
10 Environment (Part 1)
Introductory Message

For the facilitator:

Welcome to the Empowerment Technologies with Grade 12 Self Learning Module on
Imaging and Design for Online Environment Part 1!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.
In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the learner:
Welcome to the Empowerment Technologies Self-Learning Module on Imaging and
Design for Online Environment Part 1!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!
This module was designed to provide you with fun and meaningful opportunities
for guided and independent learning at your own pace and time. You will be
enabled to process the contents of the learning material while being an active
learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after completing the
lessons in the module

Pretest - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.

Recap - This section will measure what learnings and skills that you
understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and applications of the
lessons.

Valuing-this part will check the integration of values in the learning

competency.

Posttest - This will measure how much you have learned from the entire
module.
 EXPECTATIONS

At the end of this module, the student should be able to:

A. identify the basic principles of graphics and layout;
B. create a simple Infographics using Piktochart; and
C. Appreciate the Principles of Making an Effective Infographic Design.

PRETEST

Directions: Read each sentence carefully and circle the correct answer.
1. Which of these visual elements is the one which creates a sense of unity
as it is well connected to each other?
A. Style B. Proportion C. Variety D. Emphasis
2. Which of this visual element is the one that guides the eyes of the viewer
around the screen?
A. Movement B. Colors C. Design D. Weight
3. This is the design element that helps an image output to catch the
viewer or audience attention.
A. Style B. Proportion C. Variety D. Emphasis
4. Which of these design elements is the one that appears to have different
sizes, texture, shapes or colors but attracts deeply the viewer’s
attention?
A. Proportion B. Variety C. Creativity D. Emphasis
5. What do you call the physical likeness or representation of a person, an
animal, or a thing which could have been appeared as photographed,
painted, or sculptured.
A. Image B. Statue C. Design D. Style

RECAP
In the previous module, you have learned about the basic features and
functions of “Microsoft PowerPoint” and other alternative applications which
can be used to make better slideshow.
Write the 6 tips in creating an effective PowerPoint presentation.
1. _____________________________________________________________________
2. _____________________________________________________________________
3. _____________________________________________________________________
4. _________________________________________________________
5. _________________________________________________________
6. _________________________________________________________

LESSON
This module is all about “Imaging and Design for Online
Environment”. This will discuss the 6 Basic Principles of
Graphics and Design which can help you improve your skills in
making layout and good design. In addition to that, the 5
Principles in Making an Effective Infographic Design will also be
tackled. We will making use Piktochart to create an effective Infographics.
These principles will enhance your creativity by clearly presenting the
information in a graphical way.

What is an Image
A physical likeness or representation of
a person, animal, or thing, photographed,
painted, sculptured or otherwise made visible.
https://bit.ly/2ClxekX

Definition of Graphic Design and Layout

Graphic design involves a combination of images and text used to

communicate information and messages to an audience. Graphic design is
used to produce billboards, brochures, logos, magazines, newspapers,
packaging, and websites.

Layout plays a significant role in a graphic design. Layout refers to the

arrangement of elements on a page usually referring to specific placement
of image, text and style. Understanding the layout of design is very important.
If the layout is not correctly understood, there is a probability that the
message you wanted to convey will be lost and the cost of advertising would
go to waste.
 The 6 Basic Principles of Graphic Design

1. Balance- The visual weight of objects, texture, colors, and space is evenly
distributed on the screen.

https://bit.ly/2P6c6ax https://bit.ly/2DjGdc8

Two kind of Balance

a. Symmetrical Balance- occurs when
equal weights are on equal sides of a
composition, balanced around a fulcrum
or axis in the center.
Symmetrical balance evokes feelings of
formality (it’s sometimes called formal https://bit.ly/31bFjqH

balance) and elegance.

b. Asymmetrical Balance-results from unequal

visual weight on each side of the composition.
One side of the composition might contain a
dominant element, which could be balanced
by a couple or more lesser focal points on the
other side. One visually heavy element on one https://bit.ly/3gczZb2V

side might be balanced by a handful of lighter

elements on the other. Asymmetrical balance
is more dynamic and interesting

2. Emphasis- An area in the design that may appear different in size, texture,
shape or color to attract the viewer's attention.

https://bit.ly/30cX61p
https://bit.ly/3jU4HcK
3. Movement - visual elements guide the viewer’s eyes around the screen.

http://bit.ly/3fdn8pp https://bit.ly/39GxeOk

4. Pattern, Repetition, and Rhythm. These are the repeating visual element
on an image or layout to create unity in the layout or image.
Rhythm is achieved when visual elements create a sense of organized
movement.

https://bit.ly/3i2Ueu7 http://bit.ly/2Pbs57s

5. Proportion- Visual elements create a sense of unity where they relate well
with one another.

https://bit.ly/2Dn17Y8 https://bit.ly/3jT0R3G

6. Variety – This uses several design elements to draw a viewer’s attention.

https://bit.ly/2CUxGNf https://bit.ly/39GokjP
 INFOGRAPHICS

It also known as Information Graphics, these are used to represent

information, statistical data or knowledge in a graphical manner usually done
in a creative way to attract the viewer’s attention.
Infographics make complex data become more visually appealing to an
average user. Piktochart is an online app that allows you to create your own
infographics.

https://www.getcredo.com/seo-term/ https://www.globalpartnership.org https://www.pinterest.ph/pin/1797218

infographics/ /news/infographics 41358748694/

5 Principles in Making an Effective Infographic Design

1. Be Unique- Create an original and unique design to get the viewer’s

attention. The use of the colors, fonts, images, ad text the design should
be unique.
2. Make it Simple- Colors, layout, design should be used consistently.
3. Be Creative and Bold- be creative by the use of your imagination to create
something unique.
4. Less is More- minimizes the information that the viewers need to do to
understand the main idea of your infographics
5. The Importance of Getting It Across- Make sure you’re creating an
infographic that the content must be related to the title and understand
the message so that the viewers can easily navigate the information
without being confused.
 Creating Infographics Using Piktochart
We will create an infographic in piktochart.com a free online app that allows
you to create your own infographics. Let’s discuss the steps on how to use the
piktochart.com

1. Create a Piktochart account by

going to www.piktochart.com
and click sign up on the upper
right corner of the
page.

2. Fill up the information on the

Sign Up page; alternatively, you
can connect with Google+ or
Facebook.

3. Once you have created an

account and logged in, select a
template for your infographic.
Since data relates to your topic,
simply hover over the Present
Board theme under Free
themes then select Create.

4. The Piktochart editor will open

(may Take a while to load
depending on your internet
connection). The Present Board
theme consist of three blocks
(parts). Select the blocks and
input the information as you see
fit.
 5. While editing blocks, you can use the various tools on the left side of
the page;
a. Graphics – allows you to insert lines, shapes, icons, and even photos
b. Upload – allows you to upload images for your infographics
c. Background – changes the background of a selected block
d. Text – allows you to insert text to your infographic with the option
to add text frames
e. Styles – allows you to modify the color scheme of your infographic
f. Tools – allows you to create charts (similar to the ones in
PowerPoint) maps (for demographics), and videos.

Editing Tips:
• Double-click a text to edit the content.
• When working with objects, the toolbox on top of the topmost block
will allow you to manipulate it. This is similar to working with object
in PowerPoint where you can arrange an object to be on top or
bottom of another.
• When working with charts, double-click the chart to open the
datasheet editor.
• You may rename the title of your infographic on the top of the
toolbar.

6. To save your work, click on

Save on the top right of the
page. To save it in your
computer, click on Download.
In the Download options, select
the Medium sized and the PNG
file type.

http://bit.ly/2Dk3ECI

ACTIVITIES
1. Create an Infographics using Piktochart.com
2. Choose one from the topics below.
• Use of Gloves in Healthcare and Non-healthcare Environment during
COVID-19 Pandemic;
• COVID-19 Symptoms and Prevention;
 • COVID-19 Virus: An Awareness Campaign;
• Do’s and Don’ts of Wearing Facemask in Public Places; or
• COVID-19: Social Distancing Practices

https://6thsocialstudiesmcginty.blogspot.com/2017/03/creating-caste-system-infographic.html

WRAP – UP

Let’s summarize what you have understood from this module.

• Differentiate Graphics from Layout.
___________________________________________________________________________
___________________________________________________________________________
• What are the 6 Principles of Graphic Design?
_______________________________
_______________________________
_______________________________
_______________________________
_______________________________
_______________________________
 VALUING

“Creativity is nothing but the way to solve new problems”

– Diana Santos, a product strategist.

Share your thoughts using the space below.

___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

L POST–TEST

Directions: Read each sentence carefully and circle the correct answer.
1. What do you call the graphical representation of information, data or
knowledge intended to present information quickly and clearly?
A. Informatics B. Information C. Infographics D. Informal
2. What principle of graphics and layout deals with the visual weight of
objects, texture, colors, and space is evenly distributed on the screen?
A. Balance B. Emphasis C. Movement D. Variety
3. Which among these is a free online app that allows you to create own
infographics and produce better information and graphics?
A. PiktoArt B. Piktograph C. Piktochart D. Pikto editor
4. Which among these occurs when equal weights to an output in graphics
design and layout were found to have equal sides of a composition and
showed balance around an axis in the center?
A. Symmetrical Balance C. Equal Balance
B. Asymmetrical Balance D. Fulcrum
5. What Piktochart app feature allows you to modify the color scheme of
your infographic?
A. Styles B. Tools C. Graphics D. Uploads
 KEY TO CORRECTION

REFERENCES
Innovative Training Works, Inc. Empowerment Technologies: 5th Edition
(2016), Rex Publishing, Manila

Hart J. “Design by Jamz”. Accessed last July 19,2020 from https://ti-

nyurl.com/y5l9as25

“Study.com”. Accessed last July 19,2020 from

https://tinyurl.com/y6nck8fs

Novasexy1. “Empowerment Technologies”. Accessed last July 19,2020.

http:// novasexy1.blogspot.com