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
School: SENIOR HIGH SCHOOL IN MALVAR,
School Address: MALVAR, BATANGAS
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

P a g e 3 | 24
 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:

References This is a list of all sources used in developing

this module.

P a g e 4 | 24
 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 is divided into five lessons, namely:

• Lesson 1 – Imaging and Design for The Online Environment
• Lesson 2 - Image Format
• Lesson 3 – Layout
• Lesson 4 – Infographics
• Lesson 5 – Image Principles, Techniques & Hosting

After going through this module, you are expected to:

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

P a g e 5 | 24
 What I Know

Pre-Test:

I. Multiple Choice: Write the letter of the correct answer on your

answer sheet.i (Learning Activity Sheets)

1. Balance is to even distribution; emphasis is to

a. attracting c. design
b. colors d. weight

2. Movement is to guiding the eye; rhythm is to create

a. attraction c. visuals
b. organization d. unity

3. These are-visual elements creating a sense of unity where they relate

well with one another.
a. style c. variety
b. proportion d. emphasis

4. It uses several design elements to draw a viewer's attention.

a. style c. variety
b. proportion d. emphasis

5. It makes complex data become more visually appealing to the average

user.
a. tables
b. piktocharts
c. infographics
d. slideshows

6. The following are common image file formats used in the Internet
EXCEPT:
a. JPEG b. GIF c. PNG d. BMP

7. A free image manipulation tool that has batch edit, viewer, and paper
print features
a. Picasa c. GIMP
b. PhotoScape d. IrfanView

8. It is the process of editing multiple pictures at once using one setting.

a. batch editing
b. animation

P a g e 6 | 24
 c. paper printing
d. collage making

9. The file extension JPEG stands for

a. Joint Photographic Experts Group
b. Japan Photo Excellence Guild
c. Jotter Prime Element Garnish
d. None of the above

10. A file format typically used for screenshots

a. PNG
b. GIF
c. RAW
d. JPEG

P a g e 7 | 24
 Lesson
Imaging and Design for The
1 Online Environment

WHAT IS AN IMAGE?

An Image is a representation of the external form of a person or

thing in art.ii

What’s In

Activity 3.1 - Your Turn to Shine

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

iii

P a g e 8 | 24
 What’s New

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.

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.

P a g e 9 | 24
EXAMPLES OF GRAPHICS:

P a g e 10 | 24
P a g e 11 | 24
 Lesson

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

P a g e 12 | 24
 Lesson

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

P a g e 13 | 24
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.

P a g e 14 | 24
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 15 | 24
 Lesson

4 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

P a g e 16 | 24
INFOGRAPHIC VIDEO

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

P a g e 17 | 24
 Lesson
Image Principles, Techniques
5 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.

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.

P a g e 18 | 24
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.

P a g e 19 | 24
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.

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.

P a g e 20 | 24
 What’s More

Activity - Your Turn to Shine

Choose three examples (preferably online platform) of a well-designed
page and copy and paste on a word document. Likewise, choose
three examples of a bad layout. Be ready to explain your
choices. Show a visual message (a combination of text and
image) such as a poster, an infographic, or a presentation.

After analyzing the visual image, improve it by manipulating the

image and text.

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.

P a g e 21 | 24
 Take the Challenge!

Based on the mission statement, come up with a slogan, message, or call to action
that will be subjected to design media.

Guide Questions:
1. What does the organization want to communicate based on the mission
statement? What does the organization want to achieve? How is this
relevant to your track?
2. After you have crafted your slogan, message, or call to action, design how
you can put it in an online tool, platform, or application. What is the best
way of communicating your message to your target audience?

Explore and evaluate online platforms. Use a variety of search terms to direct to
social impact organizations and study how you can express their mission statements.

Moreover, try out creation tools, and applications. After a week, you should be ready
to share your work.

Assessment

After one week, you should be ready to share your work. (Group Work)
Guide Questions
1. Which creation application can you use to incorporate ICT content that
will help you effectively communicate messages in your professional
track?
2. Which design elements and principles can you combine to communicate
with your intended audiences?
Based on the mission statement, principles of good design, principles of effective
visual messaging, and in consideration of the possible audience/user of the
prospective website to be created at the end of the term, you are going to
conceptualize content.

P a g e 22 | 24
Guide Questions
1. How will images affect the effectiveness of the website or other
online platforms? What designs including color combinations
could be used to help communicate your message?
2. Will including an area for a chat box be helpful in achieving the
goals of your online platform? Discuss the reasoning of your
answer.
3. What other sections will you include?

RUBRICS:
You will be graded in your presentation in terms of:
• Content - 25%
• Skill - 25%
• Aesthetics - 25%
• Overall impact - 25 %

P a g e 23 | 24
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=A
LeKk016Imhhq_SnUZtHeBWDI_TJ4BJYVg:1592524351137&source=lnms&t
bm=isch&sa=X&ved=2ahUKEwjOmvvBx4zqAhWYQN4KHc2wCMwQ_AUoAno
ECCEQBA&biw=1326&bih=627#imgrc=dSiYUwEbrohD6M

EmTech TG, page 27

i
Empowerment Technologies by Innovative Training Works, Inc. and Rex Bookstore ISBN
978-971-23-7830-0, page 101
ii
IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT by Mr. Teodoro R. Llanes II
iii
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 24 | 24