Senior High School

EMPOWERMENT
TECHNOLOGIES
First Quarter – Week 4
Imaging and Design for Online Environment
EIM – Grade 11
Most Essential Learning Competency (MELC) – Based Exemplar
Quarter 1 – Week 4: Imaging and Design for Online Environment
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 exemplar 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.

Development and Quality Assurance Teams

Writers: ELEAZAR-REY M. AGUDO
Illustrator: ELEAZAR-REY M. AGUDO
Layout Artist:
Language Editor:
Content Evaluator:
Layout Evaluator:
Management Team: PSDS/DIC
___________________

1
Rationale

Project PPE (Portfolio Predicate on Exemplar) is a backup contingency response

of the Schools Division of Surigao del Sur for learning delivery and learning resource
which parallel to the on-going endeavors of the higher offices in the Department.
It is the utilization of a lesson exemplar that is streamlined in a teacher-and-learner-
friendly format to cater to the new classroom setup in light of the COVID-19 health
crisis. These exemplars will be paired with a self-contained and self-instructional
portfolio.

The portfolio is a deliberate collection of works that highlight a learner’s effort that
would enable the him/her to see his/her growth and achievement, ability to
reflect on his/her own work and ability to establish goals for future learning.

Introductory Message

For the teacher:

Welcome to the EMPOWERMENT TECHNOLOGIES QUARTER 1 WEEK 4 Exemplar on

Imaging and Design for Online Environment.

.This exemplar was collaboratively designed, developed and reviewed by

educators from different schools in the Division to assist you in helping the learners
meet the standards anchored on Most Essential Learning Competencies (MELC)
set by the Department while overcoming the constraints in schooling brought by
the COVID-19 pandemic.

This learning resource hopes to engage the learners into guided and independent
learning activities at their own pace and time. Furthermore, this also aims to help
learners acquire the needed 21st century skills while taking into consideration their
needs and circumstances.

As a teacher, you are expected to orient the learners on how to use this exemplar
in the most fit modality. You also need to keep track of the learners' progress while
allowing them to manage their own learning through portfolio assessments.

For the learner:

Welcome to the EMPOWERMENT TECHNOLOGIES QUARTER 1 WEEK 4 Exemplar on

Imaging and Design for Online Environment.

This exemplar 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 resource while being an active
learner, either at home or in school. To help you with this, this exemplar comes with

2
a Weekly Portfolio Assessment. Your teacher will provide you with a template and
you will be given a privilege to organize the portfolio in your own creative way.

This exemplar has the following parts and corresponding icons:

This will give you an idea of the competencies

What I Need to Know
you are expected to learn in the exemplar and
the objectives you are expected to realize.
This part includes an activity that aims to check
What I Know
what you already know about the lesson to
take.
This section provides a brief discussion of the
What is It
lesson. This aims to help you discover and
understand new concepts and skills.
This section provides an activity which will help
What I Can Do (1,2 & 3)
you transfer your new knowledge or skill into real
life situations or concerns.

This task aims to evaluate your level of mastery

What I Have Learned
in achieving the learning objectives.

Answer Key This contains answers to all activities in the

module.

This contain instructions about recording your

Portfolio Goal Setting
positive, realistic goals before going through this
exemplar.
This contain instructions about completing the
Portfolio Completion -Your
components of the portfolio. This also includes a
Growth Clue!
rubric to guide you of how your portfolio will be
assessed.

At the end of this module you will also find:

References This is a list of all sources used in

developing this exemplar.

3
 What I Need to Know

Most Essential Learning Competency:

LO 1. use image manipulation techniques on existing images to change or enhance
their current state to communicate a message for a specific purpose.

CS_ICT11/12-ICTPT-Ie-f-7

Sub-competency:

1.1 create an original or derivative ICT content to effectively communicate a

visual message in an online environment related to specific professional
tracks CS_ICT11/12-ICTPT-Ie-f-8

Objectives

After going through this exemplar, you are expected to:

A. Knowledge: Evaluate existing websites and online resources

based on the principles of layout, graphic, and visual message
design.
B. Skill: Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose

C. Attitude: Create an original or derivative ICT content to effectively

communicate a visual message in an online environment.

Portfolio Goal Setting

Using the Portfolio Assessment Template provided by your teacher along

with this exemplar, accomplish now your weekly goal setting. Refer to the
objectives above. Think of positive and realistic goals that you can
considerably achieve with this exemplar. List them as your plans. Remember:
Do not proceed with this exemplar unless you have accomplished your goal
setting.

4
 What I Know

Multiple Choice.
Direction: Read each item carefully and choose the letter of the correct
answer. Write your answers on a separate sheet of paper or in your notebook.
1. A graphic image with a central figure is an example of this type of
composition:
A. Balance C. Contrast
B. Alignment D. Symmetry

2. Which statement best defines the principles of graphic design?

A. These are a set of rules only followed by designers.
B. These are outline of ways designers can use elements in a
composition.
C. It provides the set of rules on how the graphic design started.
D. It is the art and practice of planning and projecting ideas and
experiences with visual and textual content.

3. Why do designers use contrast?

A. To show difference between elements of art.
B. To cause controversy in the design world.
C. To create harmony and bring elements together.
D. To make bright colored compositions.

4. Which type of balance has two sides that are balanced but different?
A. Symmetrical C. Asymmetrical
B. Radial D. Centered

5. What is created when hue is combined with white?

A. Hue C. Tint
B. Shade D. Tone

6. What type of image manipulation technique is used if you want to remove

unnecessary parts of a picture?
A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors

7. What image manipulation technique is done if you change the color tone
of a picture?
A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors

8. What image manipulation technique is done when you desaturate the

color of a picture?

5
 A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors

9. Which of the following manipulation techniques improves photo

sharpness?
A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors

10. What image manipulation technique is done when you adjust the overall
lightness and darkness of an image?
A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors

What is It

Graphics and Layout

Images - An Image is a representation of the external form of a person or
thing in art. Images may be 2-dimensional, such as a photograph or screen
display, dimensional, such as a statue or hologram. They may be captured by
optical devices such as cameras, mirrors, lenses, telescopes, microscopes,
and natural objects and phenomena, such as the human eye or water.

Graphics - Graphics are visual images or designs on some surface, such as a

wall, canvas, screen, paper, or stone to inform, illustrate, or entertain. It can
be a photograph, a drawing, a line art, graphical representations, and
typography.

Basic Principles of Graphic Design

Principles of graphic design are set of guidelines that help a design
achieve effective composition. These basic principles aid in creating balance
and stability for the piece of work.
COLOR is used for emphasis or may elicit emotions from viewers.
Determined by its hue (name of color), intensity (purity of the hue), and value
(lightness or darkness of hue).

6
BALANCE means the equal distribution of weight. In layout, visual weight is
determined by the darkness or lightness, thickness of lines, and size. Balance is
crucial to the success of design. There are two kinds of balance:
Symmetrical Balance. The visual weight is distributed evenly, either
vertically or horizontally. You can draw a line straight through the middle of
the design, and the visual balance would be evenly distributed.
Asymmetrical Balance. There is an artistic and different intensity on one
side of the page.

7
PROXIMITY is simply the process of ensuring related design elements are
placed together. Any unrelated items should be spaced apart. Close
proximity indicates that items are connected or have a relationship to each
other and become one visual unit which helps to organize or give structure to
a layout (Smith, 2017).

White Space is the art of nothing. It is also known as the negative

space. It is the portion of a page left unmarked: margins, gutters, and space
between columns, lines of type, graphics, figures, or objects drawn or
depicted.

ALIGNMENT is simply the way visual elements are arranged so that they line
up in some way. There are two basic kinds of alignment; edge and center.

Edge alignment determines the placement of elements in relation to

the edge of the page or canvas. This can mean the elements are aligned to
the left side or right side, but it can also mean they are aligned to the top or
bottom of the page, so long as it uses an edge to organize everything.
Center alignment aligns all the elements so that an invisible, central line
on the page will always be in the center of the elements.

8
REPETITION. The process of repeating elements
throughout a design to give a unified look. Repetition
goes with consistency of your design on font, font
size, patterns, and colors.

CONTRAST is the divergence of opposing elements (opposite colors on the

color wheel, or value light / dark, or direction – horizontal / vertical). Contrast
allows us to emphasize or highlight key elements in your design.

9
 What I Can Do 1
Activity I - CoViD-19 Infographic

DIRECTIONS: In this time of the CoViD – 19 pandemic, there is a need to fully

inform the public on how to keep ourselves safe even when we are outside
our homes. As a graphic designer of the National Government, you are
tasked to create an infographic material to be distributed to the people. This
will be placed in a shortsized bond paper. You must be guided by the
different principles of graphic design while making your infographic material.
Print your work and be guided with the rubric below:

10
 What is It
Image Manipulation

Image Manipulation refers to a process of bringing changes to a digitized

image for transforming it to a desired image. The changes are made possible
by resorting to image processing. Image manipulation is utilized to create
magazine covers and albums from photographs. A single photograph may
be modified to suit the requirement, or several photographs can be
combined to form a collage. Currently, there are numerous software
applications ranging from professional applications to basic imaging software
(https://www.yundle.com/termsdefinitions/i/image-manipulation).

Principles and Basic Techniques of Image Manipulation

CROPPING. Cutting parts away to remove distracting or irrelevant elements.

COLOR BALANCE. The ambience and the tone of light of the picture (ex.
Warm or cool light)

11
BRIGHTNESS AND CONTRAST. One of the most basic techniques in image
editing, making the image darker or lighter.

FILTERS. Making the image look sketched, grainy, classic black and white or
even let it have neon colors. This gives your image a twist from its original look.

CHANGING THE BACKGROUND. Adding background to make your image stand

out.

12
REMOVING THE COLOR. Removing certain colors in your image or
desaturating the color of the image.

COMBINING TEXT, GRAPHICS AND IMAGE. Adding multiple elements in your

layout.

13
 What I Can Do 2

Activity: Let’s Do Magic!

Directions: Take a photo of a landscape and a portrait – be it of yourself, a

family member, a friend or a pet. Create a photo collage where both pictures
are edited. Print your work in a short-sized photo paper or post it on our fb group
or fb messenger if there are no available printers and computers. Using your
cellphone image editor may suffice this purpose. Check the rubric for grading.
The following things shall be done on the picture:
1. Cropping
2. Adjusting brightness and contrast
3. Color balancing
4. Combining text with images preferably positive quotes. Don’t forget
to cite the original writer!
5. Changing background for portraits only.

14
 What I Have Learned
You have learned that image editing is an enjoyable activity,
but it entails a lot of patience and creativity. As a photo editor, you must
have an eye for art. Bear in mind that the pictures you will come up with
support the idea that you wish to convey.

Direction: Read each item carefully and choose the letter of the correct
answer. Write your answers on a separate sheet of paper or in your notebook.

1. How many types of balance are in graphic design?

A. 2 B. 4 C. 6 D. 8
2. Which principle of design is seen by the shapes on the right?

A. Balance C. Color
B. Contrast D. Proximity

3. Which design principle is seen below?

A. Alignment C. Contrast
B. Asymmetrical balance D. Proximity

4. Which of the following is NOT a way to use contrast in a composition?

A. Placing shapes around a central axis.
B. Pairing different typefaces together.
C. Changing the color values.
D. Using various textures

5. Which best describes the image on the right?

A. Alignment C. Contrast
B. Balance D. Repetition

6. Which type of balance has two sides that are balanced but different?
A. Asymmetrical B. Centered C. Radial D. Symmetrical

7. Which image manipulation technique is used in the picture?

A. Brightness and Contrast
B. Color Balance
C. Cropping
D. Removing Colors

15
8. Which image manipulation technique is used in the picture?
A. Brightness and Contrast
B. Changing Background
C. Color Balance
D. Inserting Texts

9. What is created when hue is combined with white?

A. Hue B. Shade C. Tint D. Tone

10. What type of image manipulation technique is used if you want to

remove unnecessary parts of a picture?
A. Brightness and Contrast
B. Cropping
C. Color Balance
D. Removing Colors

16
 Answer Key

What I know?
What Can I do 1?

What Can I do 2?

17
For inquiries or feedback, please write or call:

DepEd Surigao del Sur Division – Schools District of _____________

Address: _______________________________________________
___________________________________________________________
___________________________________________________________

Contact Number:
Email Address:

18