11 SENIOR HIGH SCHOOL

EMPOWERMENT TECHNOLOGIES
Quarter 3 – Module 6
Imaging and Design
for Online Environment

NegOr_Q3_ETECH11_Module6_V2
Trends, Networks, and Critical Thinking in the 21st Century
Alternative Delivery Mode
Quarter 3 – Module 6: Imaging and Design for Online Environment
Second Edition, 2021

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

Secretary: Leonor Magtolis - Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: Jessie V. Alcala
Editor: Reynald M. Manzano
Reviewer: Louelyn M. Lajot, Ruth Marie B. Eltanal
Layout Artist:
Management Team: Senen Priscillo P. Paulin, CESO V Rosela R. Abiera
Marcelo K. Palispis, Ed.D. Maricel S. Rasid
Joelyn M. Arcilla, Ed. D. Elmar L. Cabrera
Nilita L. Ragay, Ed. D.
Antonio B. Baguio, Jr., Ed. D.

Printed in the Philippines by

Department of Education –Region VII Schools Division of Negros Oriental

Office Address: Kagawasan, Ave., Daro, Dumaguete City, Negros Oriental

Tele #: (035) 225 2376 / 541 1117
E-mail Address: negros.oriental@deped.gov.ph
Introductory Message
This Self-Learning Module (SLM) is prepared so that you, our dear
learners, can continue your studies and learn while at home.
Activities, questions, directions, exercises, and discussions are
carefully stated for you to understand each lesson.
Each SLM is composed of different parts. Each part shall guide you
step-by-step as you discover and understand the lesson prepared
for you.
Pre-tests are provided to measure your prior knowledge on lessons
in each SLM. This will tell you if you need to proceed on completing
this module or if you need to ask your facilitator or your teacher’s
assistance for better understanding of the lesson. At the end of
each module, you need to answer the post-test to self-check your
learning. Answer keys are provided for each activity and test. We
trust that you will be honest in using these.
In addition to the material in the main text, Notes to the Teacher
are also provided to our facilitators and parents for strategies and
reminders on how they can best help you on your home-based
learning.
Please use this module with care. Do not put unnecessary marks on
any part of this SLM. Use a separate sheet of paper in answering the
exercises and tests. And read the instructions carefully before
performing each task.
If you have any questions in using this SLM or any difficulty in
answering the tasks in this module, do not hesitate to consult your
teacher or facilitator.
Thank you

iii
NegOr_Q3_ETECH11_Module6_V2
 What I Need to Know

This module was designed and written with you in mind. It is here to help
you master the context of Empowerment Technologies. It contains varied
activities that can help you as a Senior High School student to succeed in
environments that require the use of computer and the Internet.
The module contains lessons in Imaging and Design for Online
Environment which allows students to understand the principles and
techniques in image manipulation.
Happy learning!
Content Standard:
 How to manipulate text, graphics, and images to create ICT content
intended for an online environment

Performance Standard:
 At the end of the 2-week period independently apply the techniques of
image manipulation and graphic design to create original or derivative
ICT content from existing images, text and graphic elements for use in
specific professional tracks.
These may be in the form of, but not limited to:
1. Team/ athlete/ league recruitment posters (Sports)
2. Logo or crest for a community, school organization or
barkada (Arts)
3. Labeling and manual of operation for tools and equipment
(Tech-Voc)
4. Presentation of cafeteria patronage data (Business/ Academic)

MOST ESSENTIAL LEARNING COMPETENCIES:

 evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design (CS_ICT11/12-
ICTPT-Ie-f- 6)
 use image manipulation techniques on existing images to change or
enhance their current state to communicate a message for a specific
purpose (CS_ICT11/12-ICTPT-Ie-f- 7)
 create an original or derivative ICT content to effectively communicate
a visual message in an online environment related to specific
professional tracks… (CS_ICT11/12-ICTPT-Ie-f- 8)
After going through this module, you are expected to:
K: understand the basic principles of graphics and layout
S: create original ICT content
A: appreciate the use of an image editor for image manipulation and
graphics design

1
NegOr_Q3_ETECH11_Module6_V2
 What I Know

Direction: Write the letter of the correct answer in your notebook.

1. It makes complex data become more visually appealing to the average user.
a. Tables c. Infographics
b. Piktochart d. Slideshows

2. The elements should not be cluttered and not compete with each other.
a. Proximity and harmony c. Asymmetrical
b. Emphasis c. Consistency

3. There should be one point of interest in a page.

a. Symmetrical c. Color and shape
b. Image d. Emphasis

4. It is a web-based infographic application which allows users without

intensive experience as graphic designers to easily create infographics and
visuals using themed templates.
a. Adobe Photoshop c. Piktochart
b. Photobucket d. PhotoScape

5. It allows you to insert lines, shapes, icons, and even photos.

a. Graphics c. Text
b. Background d. Upload

6. It allows you to insert text to your infographic with the option to add text
frames
a. Tools c. Uploads
b. Text d. Graphics

7. It allows you to modify the color scheme of your infographic.

a. Styles c. Graphics
b. Tools d. Uploads

8. It is a raster graphics editor used for editing images, designing websites,

editing videos, and creating 3D artwork.
a. Photobucket c. Piktochart
b. Adobe Photoshop d. PhotoScape

9. It is an image hosting site in the Internet.

a. Adobe Photoshop c. Photobucket
b. PhotoScape d. Piktochart

10. Use this to select parts of your images that you want to edit or enhance
a. Drawing tool c. Typing tool
b. Selection tool d. Painting tool

2
NegOr_Q3_ETECH11_Module6_V2
 What’s In

What are the things to be considered in creating an effective

presentation? How can you get the attention of your audience? Is an effective
presentation creates a good impression to your audience? Good graphic
design and good layout also make the presentation effective. Therefore, you
need to learn the skills in graphics designing and layouting.

What’s New

Graphic design is a sought-after skill that can help produce high-end

designs to promote brands at a national and international scale. Adding
graphics to your design can help you showcase your creative skills and make
a good impression on your clients. It equips students with the necessary skills
to apply for a position in the fields of advertising or marketing across all
business sectors.

What is It

Layout is the process of planning and arranging graphics or text in a

page or book. A good layout should have a balanced make up and alignment
of elements.
Basic Principles of Graphics and Layout
1. Symmetrical: There should be equal weights or elements on both sides of
the page.

3
NegOr_Q3_ETECH11_Module6_V2
2. Asymmetrical: It may be asymmetrical when there is an artistic and
different intensity on one side of the page.

3. Text: It should be: • Legible • Has appropriate font face • Left justified, right
justified, or centered • The flow of text should be easy to read.

4. Image: The image should be: • Proportionate • Sharp in color • With high
resolution • With appropriate captions.

5. Proximity and Harmony: The elements should be close together and

scattered and arranged apart from each other. Elements should not be
cluttered and not compete with each other.

4
NegOr_Q3_ETECH11_Module6_V2
 6. Consistency: There should be uniformity of theme on each page.

7. Color and Shape: Use color to create interest by providing variety in the
design (color contrast and shapes).

8. Emphasis: There should be one point of interest in a page. The elements

to be emphasized should have a different size, color, shape, or background.

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. It makes complex data more visually
appealing to the viewers.

Creating Infographics Using Piktochart

Piktochart is a web-based infographic application which allows users

without intensive experience as graphic designers to easily create infographics
and visuals using themed templates. Let us create an infographics using
piktochart.com

5
NegOr_Q3_ETECH11_Module6_V2
1. In your browser, go to Piktochart.com and click sign up found at the upper
right corner of the page to create your Piktochart account.

2. Fill-up the information on the Sign Up page. You can use to auto-signup
using your Google+ or Facebook account.

3. Once you have created your account and logged in, click infographics then
select a template.

4. The Piktochart editor will open (may take a while to load depending on your
internet connection). You can now edit the template.

6
NegOr_Q3_ETECH11_Module6_V2
 5. While editing, you can use the various tools on the left side of the page.

a. Graphics – allows you to insert lines, shapes, icons, and even photos
b. Uploads – allows you to upload images for your infographics
c. Background – changes the background of a selected block
d. Text – allows you to insert text to your infographic with the option to
add text frames
e. Styles – allows you to modify the color scheme of your infographic
f. Tools – allows you to create charts, maps, and videos

6. To save your work, click on Save on the top right of the page. To save it
in your computer, click on Download. In the Download options, select
the medium-sized and the PNG file type.

Creating and Manipulating Images Using Adobe Photoshop

Adobe Photoshop is a raster graphics editor, an imaging and

graphic design software used by thousands of people in many
different roles across the world. Not only is it for photos but you can use
Photoshop for designing websites, editing videos, and creating 3D artwork.
As a beginner in Photoshop, it’s important to understand the anatomy of
the interface before you get
started. When you open the
program, you’ll see the main
menu along the top, likeother
programs. Along the left side,
you’ll see a sidebar that shows
the main tools. On the right
side, you’ll see the color tool
and the layers tool. Photoshop
files have default file
extension as
.PSD, which stands for "PhotoShop Document".

Photoshop Toolbox

The toolbox in the left

sidebar will be your bestfriend.
The tools are organized into
groups based on whatthey do:

 The top section features

selection, cropping, and
slicing tools. Use these to
select parts of your images that you want to edit or enhance, or crop and
slice out parts you want to exclude.
 The second section features retouch and paint tools. Use these to get rid
of unwanted spots on product items, draw on your image, erase

7
NegOr_Q3_ETECH11_Module6_V2
 certain parts, color them in, or enhance them by sharpening or blurring.
 The third section is drawing and typing tools. Use these to write text over
your image or draw images onto them by hand using the pen tool. We’ll go
over the pen tool later.

Image Adjustments: Grayscale (Black and White)

Color photographs can easily be turned into black and white. Changing
from color to black and white is called changing modes.
1. Open the photo that you want to edit.
2. Go to the Image Menu > Mode > Grayscale
3. The original Red-Green-Blue (RGB) image is now black and white.
4. Do a SAVE AS

ALTERNATE METHOD:
1. Reopen the file.
2. Make sure you are opening the unchanged version
of this photo.
3. Go to Image Menu > Adjustments >Hue and
Saturation.
4. Slide the triangle all the way to the left (-100) and
you de-saturate (or remove) all the color. This
image remains a color (RGB) photo. It simply
lacks color. As far as the computer is concerned,
it is a color (RGB) image that looks black and white. The mode is still
RGB.

Original image Grayscale image

Inserting, Uploading, and Sharing Photos over the Internet

In creating a website, you usually upload photos. In this case, you need an
image host. Image hosts are websites specializing in storing photographs.
These photographs can easily be embedded to a web page or website.

There are plenty of image hosting sites in the internet, and Photobucket is
one of them. Feel free to check out other free image hosting sites over the
internet.

1. Sign up for a Photobucket account in photobucket.com. You may use

your Google+ or Facebook account to automatically sign up.

8
NegOr_Q3_ETECH11_Module6_V2
2. Once your account is set up and you are ready logged in, click the Start
Uploading button.

3. A new page will load allowing you to drag and drop photos or to choose
them manually or the entire folder to upload. Select a folder, add a
password(optional), then feel free to upload any photos you have right
then.

4. Once selected, a progress bar will appear indicating that the image is
uploading. This may take a moment and will depend on your internet
connection.

5. Once you are done you will see these indicators:

a. View Uploads – views photos you just uploaded which also grants you
options to share and edit them individually

b. Share Album – shares everything you just uploaded plus the other
contents of your specified folder

c. Edit Photos – uses Photobucket’s photo editing tools to manipulate

your image

6. Let us assume you will share a photo individually. To do this, click on

View Uploads then once the page uploads, click the photo you want to
share.

7. On the top of the image, you will see the following options:

A – shares your photo directly to social media and blogging platforms:

Facebook, Twitter, Google+, Tumblr, and Pinterest, respectively
B – gives you a variety of link codes for HTML, Forums, Emails, Instant
Messaging, and a direct link
C – shares your image via email
D – allows you to download your image
E – shares your image to social media sites with the option to add a
custom message

8. You may choose to share your photo to your friends on Facebook. If you
are done sharing, you may now log off and close the browser.

9
NegOr_Q3_ETECH11_Module6_V2
 What’s More

1. Visit three websites. What makes their site design work?

2. Research Photobucket and two more free image hosting sites and
check out the limitations of the free account. What is the besthosting
site for you and why?
3. What is the limitation of Adobe Photoshop compared to other image
editors?

What I Have Learned

Instruction: Make a journal to manifest your understanding about the topic.

You can start by following the format below. Write it in your notebook.

What I Can Do

Option 1: Using any image editor, edit any picture of yours. Indicate the original
picture and the edited picture. Print your output and submit it to
your teacher.
Option 2: Using Piktochart, create an infographic promoting “Think before you
click”. Upload your infographic in Photobucket. Share your
infographic with your teacher.

Rubric

CATEGORY 4 3 2 1

Required The infographic All required All but 1 of the Several

Elements includes all elements are required required
required included on the elements are elements were
elements as infographic. included on the missing.
well as infographics.
additional
information.

10
NegOr_Q3_ETECH11_Module6_V2
Graphics - All graphics are All graphics are All graphics Graphics do
Relevance related to the related to the topic relate to the topic not relate to
topic and make and most make it and some make it the topic.
it easier to easier to easier to
understand. understand. understand.
Layout and The infographic The infographic is The infographic The
design is exceptionally attractive in terms is acceptably infographic is
attractive in of design, layout, attractive though distractingly
terms of design, and neatness. it may be a bit messy or very
layout, and messy. poorly
neatness. designed. It is
not attractive.

Assessment

I. Match Column A with Column B. Read each item carefully and use
your notebook to write your answers.

Answers A B
1. It allows you to modify the color a. Photoshop
scheme of your infographic. b. Text
2. It is a web-based infographic c. Selection tool
application which allows users d. Emphasis
without intensive experience as
e. Graphics
graphic designers to easily create
infographics and visuals using f. Harmony
themed templates. g. Piktochart
h. Photobucket
3. Shares everything you just
i. symmetrical
uploaded plus the other contents
of your specified folder. j. Style
4. It is one of the image hosting sites k. Infographics
in the Internet. l. .psd
5. The file extension of a photoshop m. Tools
document. n. Share album
6. Allows you to create charts, maps, o. Retouch tool
and videos

7. It allows you to insert lines,

shapes, icons, and even photos.
8. It makes complex data become
more visually appealing to the
average user.

11
NegOr_Q3_ETECH11_Module6_V2
 9. Use these to get rid of unwanted
spots on product items, draw on
your image, erase certain parts,
color them in, or enhance them by
sharpening or blurring.
10. It is a raster graphics editor used
for editing images, designing
websites, editing videos, and
creating 3D artwork.
11. There should be one point of
interest in a page.
12. Use this to select parts of your
images that you want to edit or
enhance

13. It allows you to insert text to your

infographic with the option to add
text frames.
14. There should be equal weights or
elements on both sides of the
page.
15. The elements should not becluttered
and do not compete with each other.

Additional Activities

Give sample pictures that follow the 8 principles of design and layout.
Print and submit your output to your teacher.

12
NegOr_Q3_ETECH11_Module6_V2
Answer Key

13
NegOr_Q3_ETECH11_Module6_V2
References

Blanza, Maria Eloisa. n.d. SlideShare. Accessed April 11, 2021.

https://www.slideshare.net/MariaEloisaBlanza/basic-principles-of-graphics-and-layout-81753946.

Virgillito. 2021. Oberlo. March 24. Accessed April 11, 2021. https://www.oberlo.com/blog/how-to-
use-photoshop.

2020. Wikipedia. May 20. Accessed April 11, 2021. https://en.wikipedia.org/wiki/Piktochart.

Rex Book Store.(2016).Empowerment Technologies.1.99-121

https://www.sjsu.edu/ajeep/docs/Photoshop%20Module%20v7c-PC%20for%20WEB-2.pdf

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

Department of Education – Schools Division of Negros Oriental

Kagawasan, Avenue, Daro, Dumaguete City, Negros Oriental

Tel #: (035) 225 2376 / 541 1117

Email Address: negros.oriental@deped.gov.ph
Website: lrmds.depednodis.net

15
NegOr_Q3_ETECH11_Module6_V2