Republic of the Philippines

Department of Education
Region I
Division of Pangasinan II
Binalonan, Pangasinan
Flores Integrated School
San Manuel, Pangasinan

SELF-LEARNING MODULE IN
EMPOWERMENT TECHNOLOGY
Grade 11/12
First Quarter, Week 5

MELC: Productivity Tools

LESSON 5: Imaging and Design for Online Environment

Objectives:

By the end of this lesson, you are expected to:

 Evaluate existing websites and online resources based on the principles of layout, graphic, and
visual message design.
 Use image manipulation techniques on existing images to change or enhance their current state to
communicate a message for a specific purpose
 Create an original or derivative ICT content to effectively communicate a visual message in an
online environment
Prepared by:

JAYSON M. SORIANO
SHS Teacher II

AUBREY ROSE R. MAGNO

SHS Coordinator

ROBERTO P. SOL, PH.D.

Principal I

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 1

INTRODUCTION:

Graphic design uses visual compositions to solve problems and communicate ideas through
typography, imagery, color and form (Cann, 2018). It can be used by companies to promote and sell
products through advertising, by websites to convey complicated information in a digestible way through
infographics, or by businesses to develop an identity through branding, among other things (Malvik, 2020).

PRE-TEST:

Direction: Read each item carefully and choose the letter of the correct answer. Write your answers on a
separate sheet of paper.
1. A graphic image with a central figure is an example of this type of composition:
A. Balance B. Alignment C. Contrast 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 B. Radial C. Asymmetrical D. Centered
5. What is created when hue is combined with white?
A. Hue B. Shade C. Tint 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?
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

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 2

DISCUSSION:
Lesson 5.1: 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, or 3-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).

Image source: https://graphicdesign.stackexchange.com/questions/20044/is -there-a-worldwide-applicable-color-emotion-chart

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.

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 3

 Asymmetrical Balance. There is an artistic and different intensity on one side of
the page.

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.

Ima ge s ource: http://m.bl og.hu/b1/b1foto/i ma ge/peta dopti on_fea t.jpg

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.
Image source: https://blog.thepapermillstore.com/design-
principles-alignment/edge-alignment/
Center alignment aligns all the
elements so that an invisible, central line
on the page will always be in the center
of the elements.

Image source: https://blog.thepapermillstore.com/design-

principles- alignment/center-alignment/

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 4

 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.

Ima ge source: https://www.pinterest.ph/pin/500532946059674099/

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.

Ima ge source: https://learn.g2.com/color-contrast

ACTIVITY 5.1: Let’s Practice 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 short- sized 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:

***TAKE NOTE: if you are using your phone you can download the CANVA APP. For this activity.

Scoring Rubric
CRITERIA 3: Exceeds Expectation 2: Meets Expectati on 1: Needs Work
The topic/purpose of the The topic/purpose was somewhat The topic/purpose of the
Topic/ Purpose infographic was clear and concise. broad and did not allow viewer to infographic was not clear and
understand the purpose. concise.
Data of the infographic was Data of the infographic was Data of the infographic was not
Data accurate and relevant to topic somewhat accurate and was not relevant to
accurate and relevant to topic. topic.

The infographic had a great The graphics were somewhat The graphics had nothing to do
layout, with applicable graphics. applicable to the infographic, creating with the topic and had a poor
Layout
an average layout. layout. There was an overload of
text.
The font was legible, and the The font was somewhat legible, and The font was not legible, and the
Color/Font color scheme enhanced the the color scheme didn't affect the color scheme detracted from the
infographic. infographic. infographic.
Citations for the infographic's Citations for some of the sources No citations of the infographic's
Sourcing
sources were included. used were included. sources were included.

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 5

 Lesson 5.2: 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/terms- definitions/i/image- manipulation).

Principles and Basic Techniques of Image Manipulation

CROPPING. Cutting parts away to remove

distracting or irrelevant elements.

Image source: https://photo-works.net/photo-cropping-

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

Image source: https://dragon-roost-island.weebly.com/photo-

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

Image source: https://pippin.gimp.org/image-

processing/chap_point.html
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.

Image source: https://www.cosmo.ph/entertainment/how-to-

choose-the-best-instagram-filter

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 6

 CHANGING THE BACKGROUND. Adding
background to make your image stand out.

Image source: http://photoshopcctutorial.com/adobe-

photoshop-7-0-tutorial-how-to-change-or-remove-
background/
REMOVING THE COLOR. Removing certain
colors in your image or desaturating the color of
the image.

Image source: http://www.digitalcamerareview.com/review/

photoshop-elements-11-premiere-elements-11-review/
COMBINING TEXT, GRAPHICS AND
IMAGE. Adding multiple elements in your layout.

Image source: https://apkhubs.com/en/phonto-text-on-

photos- apk

SAMPLE OF IMAGE MANIPULATION

Original Image Manipulated Image

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 7

 ACTIVITY 5.2: Let’s Practice, 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. 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.

Scoring Rubric: 20 points

Criteria 4 3 2 1
The work The work
The work
demonstrates demonstrates little
Creativity and The work demonstrates demonstrates good
Originality average use of evidence of
superior creativity and use of creativity
creativity and creativity and
originality in the and originality in
originality in the originality in the
Weight: (x2) selection of the visuals. the selection of
selection of the selection of the
the visuals.
visuals. visuals.
Only 1 of the
Required
4 of the Only 2 of the requirements is
elements All required elements
requirements are requirements is met.
are present
met. met. Project is
Weight: (x2)
unacceptable.
Artwork exhibits Composition
Composition and Artwork exhibits Ideas are
Design masterful execution of demonstrates
good composition expressed with no
balance, emphasis, limited
and design unity in
pattern, unity, color, and knowledge of
Weight: (x1) elements. composition.
contrast. design elements.

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 8

POST-TEST:

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

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

A. 2 B. 4 C. 6 D. 8
B.
2. Which principle of design is seen by the shapes on the right?
A. Balance C. Color
B. Contrast D. Proximity
C.
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. C. Changing the color values
B. Pairing different typefaces together. 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

Image source: https://www.tutorialspoint.com/dip/brightness_and_contrast.htm

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

A. Brightness and Contrast
B. Changing Background
C. Color Balance
D. Inserting Texts

Image source: https://www.jihosoft.com/photo/replace-photo-background.html

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 C. Cropping
B. Color Balance D. Removing Colors

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 9

Name: ____________________________________
Grade & Section: ____________________________________
Module #: Module 5 for week 5………………………

Answer only
Pre-test Post-Assessment
1. 6. 1. 6.

2. 7. 2. 7.
3. 8. 3. 8.
4. 9. 4. 9.
5. 10. 5. 10.

Activity 5.1

Activity 5.2

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 10

 Republic of the Philippines
DEPARTMENT OF EDUCATION
Region I
PANGASINAN DIVISION II
Binalonan
FLORES INTEGRATED SCHOOL
Flores, San Manuel, Pangasinan
Name:_______________________ Date:__________
Section:______________________ Score:_________
First Quarter
Week 5 Summative Test in
Empowerment Technology

Part I. Direction: Read the questions carefully and select the correct answer by writing the letters beside the
number.

________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 B. Shade C. Tint D. Tone

Prepared by: Checked by: Noted by:

JAYSON M. SORIANO AUBREY ROSE R. MAGNO ROBERTO P. SOL, Ph.D.

Subject Teacher SHS Coordinator Principal I

EMPOWERMENT TECHNOLOGY WEEK 5 FOR QUARTER 1 Page 11