11

Empowerment
Technologies
Quarter 1 – Module 3:
Imaging and Design for the Online
Environment
 11

Empowerment
Technologies
Quarter 1 – Module 3:
Imaging and Design for the Online
Environment

Module in Empowerment Technologies

Author: MARIA BUENASGRACIA O. NOBLETA
For the learner:

Welcome to the Empowerment Technologies Alternative Delivery Mode (ADM) Module on Imaging
and Design for the Online Environment

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 resource while being an active learner.

This module has the following parts and corresponding icons:

What I Need to Know This will give you an idea of the skills or competencies
you are expected to learn in the module.

What I Know This part includes an activity that aims to check what
you already know about the lesson to take. If you get
all the answers correct (100%), you may decide to skip
this module.

What’s In This is a brief drill or review to help you link the current
lesson with the previous one.

What’s New In this portion, the new lesson will be introduced to you
in various ways such as a story, a song, a poem, a
problem opener, an activity or a situation.

What is It This section provides a brief discussion of the lesson.

This aims to help you discover and understand new
concepts and skills.

What’s More This comprises activities for independent practice to

solidify your understanding and skills of the topic. You
may check the answers to the exercises using the
Answer Key at the end of the module.

What I Have Learned This includes questions or blank sentence/paragraph to

be filled in to process what you learned from the
lesson.

What I Can Do This section provides an activity which will help you
transfer your new knowledge or skill into real life
situations or concerns.

Assessment This is a task which aims to evaluate your level of

mastery in achieving the learning competency.

Additional Activities In this portion, another activity will be given to you to

enrich your knowledge or skill of the lesson learned.
This also tends retention of learned concepts.

Answer Key This contains answers to all activities in the module.

At the end of this module you will also find:

P a g e 3 | 15
 References This is a list of all sources used in developing this
module.

What I Need to Know

This module was designed and written with you in mind. It is here to help you master the
Empowerment Technologies. The scope of this module permits it to be used in many different learning
situations. The language used recognizes the diverse vocabulary level of students. The
lessons are arranged to follow the standard sequence of the course. But the order in
which you read them can be changed to correspond with the textbook you are now
using.

The module covers:

 Imaging and Design for the Online Environment

After going through this module, you are expected to:

 I can evaluate existing websites and online resources based on the principles of
layout, graphic, and visual message design.
 I can use image manipulation techniques on existing images to change or
enhance their current state to communicate a message for a specific purpose.

What I Know

Activity 1 YOUR ENTRY PASS

➢ Direction: Write your THOUGHTS, EXPECTATION and
PREVIOUS learning when we say Imaging and Design for the Online
Environment. Write your answer in the box.

THOUGHTS PREVIOUS EXPECTATION

( Mga kaisipan ) ( Mga Dating kaalaman ) (Mga Inaasahan )
1 1 1

2 2 2

3 3 3

4 4 4

5 5 5

P a g e 4 | 15
P a g e 5 | 15
 IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT

WHAT IS AN IMAGE?
An Image is a representation of the external form of a person or thing in art. i

What’s In

Activity 2 - Your Turn to Shine

• What can you say about the image below? How can you describe the meaning of the without the
caption?

ii

What’s New

Activity 3: Place it!

What is the most visited website in the world? Think about it for a
second. No, it is not Facebook nor Twitter. Here is a clue, the site’s mission
statement is “to organize the world’s information and make it universally
accessible and useful.” You have probably guessed it by now, yes – it is Google.

P a g e 6 | 15
 On December 2014, Alexa.com, a renowned website for ranking web page popularity, ranks
this website number one in the entire world. Why do you think Google ranks number one despite the
countless search engines and websites in the internet?

What is It

WHAT IS AN IMAGE?

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, etc. 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 tone
to inform, illustrate, or entertain.
EXAMPLES OF GRAPHICS:

P a g e 7 | 15
 IMAGE FORMAT

IMAGE FORMAT
Different types of image format on the computer.
ONLINE IMAGE FILE FORMAT

1. Joint Photographic Experts Group (JPEG) –

does not support transparency and animation
(.jpeg or jpg)

2. Graphics Interchange Format (GIF) – supports transparency

and animation (.gif)

3. Portable Networks Graphics (PNG) – supports

transparency but not in animation (.png)

LAYOUT

Layout – is part of graphic design that deals in the arrangement of visual elements on a page.
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

1. Balance. The visual weight of objects, texture, colors, and space is evenly distributed on
the screen.
2. Emphasis. An area in the design that may appear different in size, texture, shape or color
to attract the viewer’s attention.
3. Movement. Visual elements guide the viewer’s eyes around the screen.
4. Pattern. Builds course. It builds familiarity and organizes design for trouble-free
viewing.
5. Repetition. makes design aware. It brings consistency and flow to the design.
6. Proportion. Conveys stability. It involves scaling of various elements to create a
coherent design.
7. Harmony. Brings elements closer. It utilizes familiar traits of design elements and puts
them into focus.
8. Contrast. Addresses conflict. It highlights the difference and puts an emphasis to what is
important
9. Variety. Reaps attention. It adds flavor to the design, making it more interesting and
engaging.

P a g e 8 | 15
 INFOGRAPHICS

Infographics – Information graphics or infographics 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.
5 PRINCIPLES IN MAKING AN EFFECTIVE INFOGRAPHIC DESIGN:

1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting it Across

INFOGRAPHIC EXAMPLE

INFOGRAPHIC VIDEO
Infographic Video – is a visual representation of data and
knowledge in the form of an online video.

IMAGE PRINCIPLES, TECHNIQUES AND HOSTING

Image manipulation techniques, principles and hosting sites.

1. Choose the right file format. Try to make a real-

life photograph into GIF to see the difference
between PNG, GIF, and JPEG. Knowing the
purpose is the key to finding out the best file
format.

P a g e 9 | 15
2. Choose the right image size. A camera with 12
megapixels constitutes to a bigger image
size. Monitors have a resolution limit, so even if
you have a million megapixels, it will not display
everything.

3. Caption it. Remember to put a caption on images

whenever possible. If it is not related to the web
page, then remove it.

9 IMAGE MANIPULATION TECHNIQUES

1. Cropping. Cutting parts away to remove

distracting or irrelevant elements.

2. Color Balance. The ambience and the tone of

light of the picture (ex. Warm or cool light)

3. Brightness and Contrast. One of the most basic

techniques in image editing, making the image
darker or lighter.

4. Compression and Resizing. The higher the

quality and the larger the photo is, the bigger the
file size of the picture is.

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

6. Cloning. Copying or duplicating a part of an

image.

P a g e 10 | 15
 7. Changing the Background. Adding background
to make your image stand out.

8. Removing the Color. Removing certain colors in

your image or desaturating the color of the image

9. Combining Text, Graphics and Image. Adding

multiple elements in your layout.

What’s More

Activity 4:
Activity - Your Turn to Shine: Good Vs Bad Design

1. 2.

3. 4.

5. 6.

P a g e 11 | 15
 7. 8.
Guide Questions
1. Which examples would you consider as having a good layout? Explain your answer.
2. Which examples do not have a good layout? Why do you say so?
What improvements can be made to the layout?
3. Who do you think should be the target audience of such materials? Justify how the objects,
images, or text used in the layout cater or do not cater to the target audience.

What I Have Learned

Activity 5: YOUR EXIT TICKET

Directions: Complete the table 321 Exit Ticket by writing what is being asked.
321 EXIT TICKET
Things I learned
3

Things I Found Interesting

2

Questions I still have

1

What I Can Do

Activity 6: Name It!

Directions: List some advertisements seen on television which used image manipulation techniques,
their corresponding endorser/s (if any) and how the image manipulation improved the
advertisement.

Product Endorser What makes it good?

1.
2.
3.
4.
5.

P a g e 12 | 15
 Assessment

Directions: Based on the “Principles in making an Effective Infographic Design” create an

INFOGRAPHIC that will incorporate in your track.
Example:

Rubrics:
Criteria
25% • Content
25% • Skill -
25% • Aesthetics -
25 % • Overall impact -

Reflection

Activity 7
Directions: In your notebook, journal or portfolio, write your personal
insights about the lesson by completing the following statements.

Reflection
Directions: In your notebook, journal or portfolio, write your personal insights about
the lesson by completing the following statements.

✓ I understand that ___________________________________________________

_________________________________________________________________

P a g e 13 | 15
 _________________________________________________________________

✓ I need to improve on ________________________________________________

_________________________________________________________________
_________________________________________________________________

✓ I realize that ______________________________________________________

_________________________________________________________________
_________________________________________________________________

Answer Keys

-
1.

References

For educational purposes only; All rights reserved for rightful owners:
Empowerment Technologies by Innovative Training Works, Inc. and Rex Bookstore ISBN 978-971-
23-7830-0, page 101
IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT by Mr. Teodoro R. Llanes II
https://www.google.com/search?q=covid+philippines&client=opera&hl=en&sxsrf=ALeKk016Imhhq
_SnUZtHeBWDI_TJ4BJYVg:1592524351137&source=lnms&tbm=isch&sa=X&ved=2ahUK
EwjOmvvBx4zqAhWYQN4KHc2wCMwQ_AUoAnoECCEQBA&biw=1326&bih=627#img
rc=dSiYUwEbrohD6M
EmTech TG, page 27

P a g e 14 | 15
i
IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT by Mr. Teodoro R. Llanes II
ii
https://www.google.com/search?q=covid+philippines&client=opera&hl=en&sxsrf=ALeKk016Imhhq_SnUZtHe
BWDI_TJ4BJYVg:1592524351137&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjOmvvBx4zqAhWYQN4KHc2w
CMwQ_AUoAnoECCEQBA&biw=1326&bih=627#imgrc=dSiYUwEbrohD6M

P a g e 15 | 15