Empowerment Technologies

Quarter 3 – Module 5:
Imaging and Design for Online
Environment
Empowerment Technologies – 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:
Reviewers: Divilyn M. Roddriguez
Illustrator:
Layout Artist: Melanio R. Florino, Jr.
Template Developer: Neil Edward D. Diaz
Management Team: Reynaldo M.
Guillena
Jinky B. Firman
Marilyn V.
Deduyo Alma C.
Cifra

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

Empowerment Technologies
Quarter 3 – Module 5:
Imaging and Design for Online
Environment
Introductory Message
For the facilitator:
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 at home.
Furthermore, you are expected to encourage and assist the learners as
they do the tasks included in the module.

For the learner:

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.
As you go through the different activities of this module be
reminded of the following:
1. Use the module with care. Do not put unnecessary mark/s on
any part of the module. Use a separate sheet of paper in
answering the exercises.
2. Don’t forget to answer Let Us Try before moving on to the other
activities.
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.
6. Return this module to your teacher/facilitator once you are
done.
If you encounter any difficulty in answering the tasks in this module,
do not hesitate to consult your teacher or facilitator. Always bear in
mind that you are not alone. We hope that through this material, you
will experience meaningful learning and gain deep understanding of
the relevant competencies. You can do it!

ii
 Let Us Learn!

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. This module was designed and written for you, our learners. It will
help you become knowledgeable on imaging and designing for online
environment.

Learning Competency:

 creates an original or derivative ICT content to effectively

communicate or present data or information related to specific
professional tracks (CS_ICT11/12-ICTPT-Ic-d5).

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; and
 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
Directions: Choose the letter of the correct answer. Write
your answers on a separate sheet of paper.

1. It is 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

1
 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 used 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 used 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 used when you adjust the overall
lightness and darkness of an image?
A. brightness and contrast C. cropping
B. color balance D. removing colors

2
 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 sometimes 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).

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.

3
 Symmetrical

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

2. Color
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).

Below are some of the meanings of color to some people.

Black Gray Purple

Sophistication Power Stability Security Royal Luxury
Mystery Formality Strength of character Dignity Wisdom
Evil Death Authority Maturity Spirituality Passion
Vision Magic
Yellow White Pink
Joy Friendliness Freshness Hope Romance
Cheerfulness Goodness Light Compassion
Intellect Purity Faithfulness Beauty
Energy Warmth Cleanliness Love
Caution Cowardice Simplicity Friendship
Coolness Sensitivity

Red Blue Green

Danger Passion Peace Stability Life Growth
Daring Romance Calmness Environment Healing
Style Excitement Confidence Tranquility Money Safety
Urgency Sincerity Affection Relaxation Freshness
Energetic Integrity
Source: https://graphicdesign.stackexchange.com/

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.

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

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

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

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

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.

6
 Lesson 2. Image Manipulation Techniques

Photo or image manipulation involves transforming or using various

methods and techniques to achieve desired results. Some photo
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/minniedriver

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.

7
 1. Crop and clean up your images

Straighten images:
It’s always better to pay attention to be sure your

horizon whenishorizontal
you shoot, but
straightening is also an easy first editing step.

Crop images: It’s best to crop to improve m

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

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.

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

8
 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

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

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.

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

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

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

4. Adjust color vibrancy and saturation

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

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/sharpness

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

Snapseed is one of the popular

image editing applications for
android and iOS devices. It is free
and can be downloaded from Google
Play and iTunes.

10
 Here are links on how are you going to use the application:

Snapseed manual

https://drive.google.com/file/d/1LCHHuI5omal4SRYF_DvKoF5hhjl_LP8U/v iew?
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 the following:
 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.

11
  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 editing output is far from
reality of that image. Let us enhance but not to create a fantasy.

Let Us Assess

Now that you have learned the basics of editing image for online
environment, assess yourself how far have you remembered. Write the
letter of the correct answer.

1. It is 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 principle 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

12
7. What image manipulation technique is used 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 used 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 used when you adjust the overall
lightness and darkness of an image?
A. brightness and contrast C. cropping
B. color balance D. removing colors

13
14
For inquiries or feedback, please write or call:

Department of Education – Region XI

F. Torres St., Davao City Telefax:

Email Address:

15