11

Empowerment
Technology
Quarter 3 – Module 5
Imaging and Design for Online
Environment
Empowerment Technology – Grade 11
Quarter 3 – Module 5: 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 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

Development Team of the Module

Writers: Melanio R. Florino Jr.
Editors: (These are the group/in-house group editors/reviewers)
Reviewers: (These are the Division Content, Language, and Layout Evaluators)
Illustrator:
Layout Artist:
Template Developer: Neil Edward D. Diaz
Management Team: Reynaldo M. Guillena, CESO V
Jinky B. Firman, OIC-ASDS
Marilyn V. Deduyo, OIC-ASDS
Alma C. Cifra, EdD
May Ann M. Jumuad, PhD
Aris B. Juanillo, PhD

Printed in the Philippines by Davao City Division Learning Resources Management

Development System (LRMDS)

Department of Education – Region XI

Office Address: Davao City Division, Region XI

Elpidio Quirino Ave., Poblacion District, Davao City, 8000 Davao del
Sur
Telefax: (082) 224-3274, (082) 222-1672

E-mail Address: davao.city@deped.gov.ph

 3

Empowerment
Technology
Quarter 3 – Module 5
Imaging and Design for Online
Environment
Introductory Message
For the facilitator:
Welcome to Empowerment Technology Alternative Delivery Mode (ADM)
Module on imaging and design for online environment

The activities in this module are arranged sequentially to help the

learners understand the topic and develop the desired skill or learning
competency.

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.

Remind the learner that if there are things, he/she doesn’t

understand, he/she must not hesitate to call for your help and assistance.

For the learner:

Welcome to Empowerment Technology Alternative Delivery Mode
(ADM) Module on imaging and design for online environment.

The activities in this module are arranged sequentially to help you

understand the topic and develop the desired skill or learning competency.

As a learner, you must learn to become responsible of your own

learning. Take time to read, understand, and perform the different activities
in the module. If there are things you don’t understand, do not hesitate to
call your facilitator / teacher for assistance.

The following are some reminders in using this module:

1. Use the module with care. Use a separate sheet of paper in

answering the exercises.

2. Do not forget to answer Let us Try before moving on to the other

activities in the module.

3. Read the instructions carefully before doing each task.

4. Observe honesty and integrity in doing the tasks and checking

your answers.

5. Finish the task at hand before proceeding to the next.

ii
 6. Return this module to your teacher/facilitator once you are
through with it.

We hope that you will find meaningful learning as you go through the
different activities in this module.

iii
 Let Us Learn!
This module was designed and written for you, our learners. It will
help you become knowledgeable on imaging and design for online
environment.

At the end of this module, you will be able to:

 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 image in an online environment related to specific
professional track

Let Us Try!
One of the best ways to keep memories is by taking pictures or
saving them in a video format using a camera or smartphone.
Everyone is excited as you are to learn and use picture tricks or editing
animated images. Let us try if you have understood of its basic in image and
design for online environment by answering these questions.

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

1
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

Let Us Study

Imaging and Design for Online Environment.

Why are we hooked on looking at something in the Internet and

sometimes we remember those what we saw, even trying to wear those
things? When we wake up and want to see around trying to open our eyes
on the colors and some times sway to the pictures and imitate them in real?
Is this because image opens our minds to different meanings in real life?

"What makes them so powerful is that they circumvent the faculties of

the conscious mind but, instead, directly target the subconscious and
affective, thus evading direct inquiry through contemplative reasoning.”
Leupold, (2020-04-08). 

2
 What we see in the Internet is the web page. Why we are hooked on
looking at them is because we see our eyes to work of art. As an
empowerment technology student, you are task in the future to convey
message and you need to consider principles in delivering the message
across.

Before crossing to image manipulation, let us learn first the basic

visual principles used in the real and digital world.

Lesson 1. Basic Principles of Graphics and Layout

1. BALANCE
Every element of a design—typography, colors, images, shapes,
patterns, etc.—carries a visual weight. Some elements are heavy and draw
the eye, while other elements are lighter. The way these elements are laid
out on a page should create a feeling of balance.

There are two basic types of balance: symmetrical and asymmetrical.

Symmetrical designs layout elements of equal weight on either side of an
imaginary center line. Asymmetrical balance uses elements of differing
weights, often laid out in relation to a line that is not centered within the
overall design.

Symmetrical

Asymmetrical
Photo credits https://www.pinterest.ph/pin/613545149231283904/

2. COLOR

3
 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).
Below are some of the meanings of color to some people.

Yet, depending on the country, some colors have different meanings...

in one country (e.g., USA) WHITE represents purity, cleanness, while it the
other county (e.g., China) it's the color to represent mourning.

Source: https://graphicdesign.stackexchange.com/

3. 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.

4
 Photo credits: https://www.pinterest.ph/pin/26599454039655225/

White space gives the simple text and illustrated content a room to
“breathe” while contributing to a minimalist aesthetic. In some cases,
negative space is used to create secondary images that may not be
immediately apparent to the viewer.

4. 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.

5. 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.

5
 Photo credits: https://www.toptal.com/designers/ui/principles-of-design

The images on the left-hand side of Type and Pixel’s website are a
great example of repetition in design.

6. 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.

Lesson 2. Image Manipulation Techniques

Photo or image manipulation involves transforming or using various

methods and techniques to achieve desired results. Some photo

6
manipulations are considered skillful artwork while others are frowned upon
as unethical practices, especially when used to deceive the public. Other
examples include being used for political propaganda, or to make a product
or person look better, or simply for entertainment purposes or harmless
pranks.
Source: https://en.wikipedia.org/wiki/Photo_manipulation

There are lots of software and smartphone applications nowadays

that can enhance or manipulate images, like Adobe Photoshop, Snapseed,
Adobe lightroom and others.

Depending on the application and intent, some images and designs

posted in an online environment are considered an art form because they
involve the creation of unique images and in some instances, signature
expressions of art by photographic artists.

The basic photo editing techniques should be available in even simple

editing programs, and each can enhance your images to make them more
powerful and shareworthy. Advanced editing software will offer these basic
tools and will also include refinements that allow you to do more
sophisticated editing that’s outside the scope of this article. You don’t have
to do all of the basic editing steps on every image, but the steps you choose
to do should be done in the order listed.

1. Crop and clean

your up your images

Straighten images: 

7
It’s always better to pay attention to be sure your horizon is horizontal
when you shoot, but straightening is also an easy first editing step.

Crop images: It’s best to

crop to improve minor
compositional details,
like distracting elements
at the edge of the frame
or repositioning your
subject slightly.

2. Adjust the White Balance

White balance relates to color levels, not exposure levels. If your image has
an overall color tone that you find displeasing or unnatural, you can adjust
white balance to fix it. Note that JPG files, because they capture far less
digital data than RAW files, offer a minimal amount of white balance
adjustment during editing.

Most editing programs let you pick from preset modes like “flash,”
“daylight” or “cloudy” to better calibrate the image for the lighting
conditions when it was shot. In addition, many have both a “temperature”
and a “tint” slider that you can fiddle with to fine-tune the overall lighting
cast on an image.

3. Adjust exposure and contrast

8
 Adjusting exposure: This is the process of making the photo exactly
as bright or dark as you want. Note that “noise” (a mottled look) can
sometimes be introduced when you crank up the brightness. That’s why it’s
always better to get the correct exposure (one that’s sufficiently bright)
when you first take the photo.

Adjusting contrast: Contrast is the range of dark to light tones.

When it’s extra high, you see a stark image, where all tones, regardless of
color, are either very dark or very light. When it’s extra low, you see a flat
image where no elements in the frame stand out. Typically, you want a
middle contrast that avoids either of those extremes. But if you prefer either
of those effects, you can adjust the contrast to achieve that.

9
 4. Adjust color vibrancy and saturation

Once white balance is adjusted, you can further refine colors in your
photos with the saturation and vibrancy controls. The distinction between
the two is subtle: Increasing vibrancy increases color intensity in neutral
color tones and maintains color intensity in the brighter colors. Increasing
saturation makes all colors throughout the frame more intense. When
bright colors pop, it can give the photo a more dramatic look.

5. Adjust
sharpness
Experiment
with your editing
program's additional
sharpening features
to see the effect each
produces. One you
might try is a “clarity”
or “structure” tool. It
makes the edges of
objects in the photo
stand out more,
giving the overall
image a punchier
look.
Source: https://www.rei.com/learn/expert-advice/photo-editing-basics.html

There are many image ways on how to edit images for online viewing as well
as there are many software you can use.

Snapseed is one of the popular

image editing applications for android

10
and iOS devices. It is free and can be downloaded from Google Play and
iTunes.

Here are links as to how are you going to use the application:

Snapseed manual

https://drive.google.com/file/d/1LCHHuI5omal4SRYF_DvKoF5hhjl_L
P8U/view?usp=sharing

Snapseed video tutorial

https://youtu.be/WB-NrT-XyG0

Let Us Practice
Directions: Upload 4 pictures of your choice. Use the manual or video
tutorial of Snapseed application (any mobile editing of your choice. Just
name what editing app or software did you use) . Follow the rubric below as
this is the basis of grading your work.

Let Us Remember
While there is a growing popularity of editing and posting images online, let
us remember to respect each individual and use the netiquette “Remember
the Human”. Editing images is a powerful tool but it needs responsibility
and it should not be abused. Do not use editing tools to malign others. If the
posting is for fun, the meaning of posting images should be universally
understood and treated with respect. Do not overdo in editing too as if the

11
editing output is far from reality of that image. Let us enhance but not to
create a fantasy.

Let Us Assess

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

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

12
 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

Let Us Reflect
Image may destroy one’s perception or lift him or her up to from no
one to someone. Some it is the beginning of friendship and some the
end of their career. But that is one path of knowing an individual and it is
not the total personality. Choose the better image editing application that
best describes your personality for entertainment, to give better information,
to share ideas and much more for others to learn from you.

Answer key to Activities

Let us try/Let
us Assess
1. B 6. C
2.B 7. B
3. A 8. D The teacher of this subject can make an academic
4. C 9. A assessment based on his/her preference.

5. C 10. A

13
References

Leupold, David (2020-04-08). "Image and ideology"

Chapman, Cameron Designer and Blog Editor https://www.toptal.com/designers/ui/principles-of-

design
https://prezi.com/p/edit/jilbntgd81ny/

https://graphicdesign.stackexchange.com/

Smith, Matt. (2017). The principles of graphic design: how to use proximity
effectively. www.edgee.net/the-principles-of-graphic-design-how-to-use- proximity-effectively
https://www.pinterest.ph/pin/26599454039655225/
https://blog.thepapermillstore.com/design-principles-alignment/edge-alignment/
https://blog.thepapermillstore.com/design-principles-alignment/center-alignment/

https://en.wikipedia.org/wiki/Photo_manipulation

https://www.rei.com/learn/expert-advice/photo-editing-basics.html

https://iphonephotographyschool.com/snapseed/

https://www.rcampus.com/rubricshowc.cfm?code=G86B88&sp=true

14
For inquiries or feedback, please write or call:

Department of Education – Region XI

F. Torres St., Davao City

Telefax:
15
Email Address: lrms.regionxi@deped.gov.ph