DEPARTMENT OF EDUCATION

Region XI
Division of Tagum City

Tagum National Trade School

Apokon, Tagum City

Empowerment
Technologies
SECOND QUARTER
Imaging and Design for Online
Environment

Module 7
Introductory Message

For the facilitator:

Welcome to the EMPOWERMENT TECHNOLOGIES Alternative Delivery

Mode (ADM) Module on (Imaging and Design for Online Environment)!

This module was collaboratively designed, developed and reviewed by

educators both from public and private institutions to assist you, the
teacher or facilitator in helping the learners meet the standards set by the K
to 12 Curriculum while overcoming their personal, social, and economic
constraints in schooling.

This learning resource hopes to engage the learners into guided and
independent learning activities at their own pace and time. Furthermore,
this also aims to help learners acquire the needed 21st century skills while
taking into consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the
body of the module:

Notes to the Teacher

This contains helpful tips or strategies that

will help you in guiding the learners.

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. Furthermore, you are expected
to encourage and assist the learners as they do the tasks included in the
module.
For the learner:

Welcome to the Empowerment Technologies Alternative Delivery Mode

(ADM) Module on (Imaging and Design for 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:

Let Us Learn! In this portion, objective of the new

lesson will be introduced.

This will give you an idea of the skills

Let Us Try! or competencies you are expected to
learn in the module through pre-test
for the learners.

Let Us Study This is where new lesson is

introduced.

This comprises activities for

independent practice to solidify your
Let Us Practice understanding and skills of the topic.
You may check the answers to the
exercises using the Answer Key at
the end of the module.
This section provides an activity
Let Us Practice More which will help you transfer your new
knowledge or skill into real life
situations or concerns.
This includes questions or blank
Let Us Remember sentence/paragraph to be filled in to
process what you learned from the
lesson.
This is a task which aims to evaluate
Let Us Assess your level of mastery in achieving the
learning competency.
In this portion, another activity will
Let Us Enhance be given to you to enrich your
knowledge or skill of the lesson
learned.
Closing note of the relevance,
Let Us Reflect meaning and application of the
concepts and skills developed in the
lesson to real life experiences.

At the end of this module you will also find:

References This is a list of all sources used in

developing this module.

The following are some reminders in using this module:

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 What I Know before moving on to the other
activities included in the module.
3. Read the instruction 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
through with it.
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!
Let Us Learn!

At the end of this lesson, the students should be able to:

1. Understand the basic principles of graphics and layout;
2. Create a simple infographic using web tools;
3. Understand and use several file formats used on the web;
4. Easily manipulated images using a simple image editor; and
5. Upload and share images using Photobucket or other platforms.

Let Us Try!

Pre-Test
I. Multiple Choice: Circle the letter that corresponds to the correct
answer.
1. Balance is to even distribution; emphasis is to
a. attracting b. design
c. colors d. weight
2. Movement is to guiding the eye; rhythm is to create
a. attracting b. visuals
c. organization d. unity
3. These are the visual elements creating a sense of unity where
they relate well with one another.
a. style b. variety
c. proportion d. emphasis
4. It uses several design elements to draw viewer’s attention.
a. style b. variety
c. proportion d. emphasis
5. It makes complex data become more visually appealing to the
average user.
a. tables b. infographics
c. piktocharts d. slideshows
6. The following are the common image file formats used in the
internet EXCEPT
a. JPEG b. PNG
c. GIF d. BMP
7. A free image manipulation tool that has batch edit, viewer, and
paper print features
a. Picasa b. GIMP
c. PhotoScape d. IrfanView
8. It is the process of editing multiple pictures at once using one
setting.
a. batch editing b. paper printing
c. animation d. collage making
9. The file extension JPEG stands for
a. Joint Photographic b. Jotter Prime Element
c. Experts Group d. Garnish
c. Japan Photo Excellence Guild d. None from the choices
10. A file format typically used for screenshots
a. PNG b. RAW
c. GIF d. JPEG
Let Us Study

Introduction
Creating a web page is like creating a work of art. There are certain
things that you need to consider in order to get your message across. In
the previous lesson, you learned how to create an effective PowerPoint
Presentation. Some of those tips can help you in graphics and layout.

Basic Principles of Graphics and Layout

1. Balance
The visual weight of objects, texture, colors, and space is evenly
distributed on the screen. When visiting a website, check if one side
holds the same amount of weight on the other. The colors should also
have similar visual weight.
2. Emphasis
An area in the design that may appear different in size, texture,
shape or color to attract viewer’s attention.

Figure 1. An example page of balance and emphasis

3. Movement
Visual elements guide the viewer’s eyes around the screen.
Figure 2. The image above depicts a person riding a bike. As you can see,
the blurring background shows that the rider moves forward at a certain
speed, indicating that there’s movement.
Source: https://getflywheel.com/layout/20-design-elements-and-principles-every-
designer-should-know/

4. Pattern, Repetition, and Rhythm

These are the repeating visual element on an image or layout to
create unity in the layout or image. Rhythm is achieved when visual
elements create a sense of organized movement.

Figure 3. This image uses patter, repetition and rhythm

which create harmony for the entire image.
Source: https://www.123rf.com/photo_67778 21_weave-pattern-
showing-repetition-useful-as-background.html

5. Proportion
Visual elements create a sense of unity where they relate well with
one another.
Figure 4. A screenshot of CNN.com web page shows how the font size of
headers is proportional to the size of its content. This is done so that the
viewer can easily see what the article is all about.
Source: https://www.123rf.com/photo_67778 21_weave-pattern-
showing-repetition-useful-as-background.html

6. Variety

This uses several design elements to draw a viewer’s attention.

Figure 5. Bing uses a combination of text and images to make the site more
appealing but not distracting from the site’s purpose.
Source: https://www.123rf.com/photo_67778 21_weave-pattern-
showing-repetition-useful-as-background.html
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. Infographics
make complex data become more visually appealing to an average user.

Examples of Infographics:

Figure 6. An example of an infographic about “What makes a good

infographic?”
Source: https://www.flickr.com/photos/dashburst/8448339735
Figure 7. An infographic made by CDC about COVID-19 awareness
Photo by: CDC
Source: https://www.flickr.com/photos/dashburst/8448339735
Figure 8. Another infographic about diabetes prevention to protect vision
Source: https://www.flickr.com/photos/nehep/20917776992
Creating Infographics Using Piktochart

We will create an infographic using Piktochart, a free online app

that allows you to create your own infographic.
Create a Piktochart account by going to www.piktochart.com and click
Sign Up on the upper right corner of the page.

Figure 9. The Sign Up button of Piktochart is located on the upper

right corner of the screen as pointed by the arrow.
www.piktochart.com

1. Fill up the information on the Sign Up page; alternatively, you can

connect with your Google account or Facebook.
Figure 10.Piktochart’s Sign Up page

2. Once you have created an account and logged in, a page like this
will appear and ask you some things regarding your details about
creating your Piktochart account. Just click from “What do you
do?” options and select the last one that says “I’d like to keep this
private” then click the Submit button.

3. Select the “No, Thanks” option then click the Submit button.
4. Click “Create New” button and then select Infographics. You can
use existing templates provided or you can start from scratch by
clicking “Start from blank”

Figure 11. Click the Create New button pointed by the arrow.

Figure 12. Then select Infographics.

Figure 13. You can choose from any templates provided or simple click
“Start from blank” if you want to start from scratch.

5. From here, you can start making and designing your very own
infographic.

Figure 14. This is the Piktochart Editor interface.

6. While editing, you can use the various tools on the left side of the
page:
o Graphics – allows you to insert lines, shapes, icons, and even photos
o Design Components – allows you to choose a layout of design
o Uploads – allows you to upload images for your infographic
o Background – changes the background of a selected block
o Text – allows you to insert text to your infographic with the
option to add text frames.
o Tools – allows you to create charts, maps and insert videos

Editing Tips:

• Double-click a text to edit the content.

• When working with objects, the toolbox on top of the
topmost block will allow you to manipulate it. This is similar
to working with objects in PowerPoint where you can arrange
an object to be on top or bottom another.
• When working with charts, double-click the chart to open
the datasheet editor.
• You may rename the title of your infographic on the top
toolbar.

7. 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-size and the PNG file type.

s
a
Online Image File Formats

Unlike images that are found in our computer, you have to

consider that website images should be more compressed because data
travels over the internet and not everyone has a fast Internet connection.
Consequently, we have to use compressed images on our websites.
Likewise, even though a wide variety of websites already support high-
definition (HD) photos, you do not have to use HD all the time. In fact,
most of the time, you do not even have to.
Here are common image file formats used on the web. Here, we will
take a look at their use in the web.

Supports Supports
Name File Extension Use
transparency animation
1. Joint Real-life
Photographic photographs,
.jpeg or .jpg No No
Experts high
Group compression
2. Graphics Computer-
Interchange .gif generated Yes Yes
Format graphics
3. Portable Screenshots,
Network .png high Yes No
Graphics compatibility

Principles and Basic Techniques of Image Manipulation

Most of the time, we just capture an image and upload it on our
Facebook account. From there, Facebook does the rest by formatting our
image to best fit the standards set by Facebook. But once you run your
own website, you will have to edit your images. It seems a simple task
but you have to strike the balance between the right image quality and
the time for the page to load these images.
Personal websites do not necessarily have to downsize the file size
of the images. But if you have a wider target audience, you need to make
the necessary changes. Here are some tips to help you edit images for
your website:
1. Choose the right file format.
2. 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.
3. 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. Thus, it is not always wise to
make our image big, most especially in a website. Know how much space
you want the image to consume. Or have a “preview” image where the
audience has the option to “see full size.”

4. Choose the right image size.

Remember to put a caption on images whenever possible. If it is
not related to the web page, then remove it.

Image Manipulation Techniques

There are plenty of image manipulation tools but if you are going to
create a website, you have to use the one which is efficient. Here are
some image manipulation techniques common to most image
manipulating software:
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 photois, 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.
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

Creating and Manipulating Images Using PhotoScape

PhotoScape is a good tool because it is feasible for beginners and
advanced users alike.

Figure 15. PhotoScape interface

https://prezi.com/qgxbo42xmg51/creating-and-manipulating-images-using-photoscape/
On PhotoScape’s main screen, you will see the many features it
has that you can use for creating web content as follows:
1. Viewer – as the name implies, is a picture viewer with features
the same with most image viewers like changing image
orientation
2. Editor – alters the appearance of a single image
3. Batch Editor – alters the appearance of multiple images.
4. Page – arranges several photos to create a single one; similar to
a mosaic
5. Combine – links several images together to form a bigger image
6. Animated GIF – allows you to create an animated GIF from
several pictures
7. Print – readies pictures for printing
8. Splitter – divides a single photo into multiple parts
9. Screen Capture – captures the screen and saves it
10. Color Picker – grabs a pixel from your screen to be used in
editing
11. Raw Converter – converts RAW images (uncompressed images
usually from digital camera) to JPEG
12. Rename – allows you to rename a batch of photos
13. Paper Print – useful tool for printing your own calendars,
sheets, lined paper, graph paper, etc.

For this lesson, we will only focus on the ones that we can use for
our website project: the Editor and Batch Edit

I. Editor Edit
For this exercise, take a photo from your camera. It can
be a selfie, a groupie, or a random photo. Make sure that you
are the one who tool it and that it is worth spending time with
editing. Once you have it ready, place it in your computer in a
directory most convenient to you.

1. Open PhotoScape then choose editor.

2. Choose the folder where the image you
want to manipulate is located using the
file explorer on the upper left.
Figure 16. PhotoScape’s File Explorer
3. Once you have selected the
folder, you will see a preview of all the images
found on that folder at the bottom of the file
explorer.

Figure 17. Preview of the images found on the

selected folder

4. From the preview, select the image you want to use. The image
will now be shown on a much bigger preview inside your work
area similar to what is shown below:
5. Notice the properties of the image like the file name, the image
size (in pixels and the file size found on the bottom of the
preview.

Figure 18. Image properties found on the bottom of the image preview
On the image above, notice that the photo is 4000 x 2250
pixels and has a size of 3.3 MB. Most monitors today do not
support that resolution and would probably fill up the entire
web page. Due to this big resolution, the file size is affected even
though this is a JPEG file.

6. Manipulate the image using the tools on the bottom.

a. Home Tab – this is where you can add a frame, resize,
sharpen, and add filters and effects to your image.

If you have similar problem as mentioned in the

previous step, try to reduce the size of the image. Most
monitors with aspect ratio of 16:9 support resolutions of
1366 X 768. Try to resize you image to lower than 800.

b. Objects tab – this is where you can place a wide variety

of images like texts, shapes, and symbols.

c. Crop – this is where various tools can be found in order

to properly crop an image to a desirable size
d. Tools – includes other tools like red eye correction, mole
removal, mosaic effect, and brush tools. For more
information about the tool, simply click it and a tip will be
displayed describing how to use it.

7. Click Save located on the lower right of the program. The Save
As dialog box will appear. Save it in your activities folder with
the file name editorexer.jpg. Check the file size and see how
much space you saved.

Inserting, Uploading, and Sharing Photos over the Internet

Sharing your photos over the Internet has never been so easy
using social media. However, it is highly recommended to put your social
media photos to private and separated from the ones that are posted over
the Internet. In that case, you need an image host. Image hosts are
websites specializing in storing photographs. These photographs can
easily be embedded to web page or website.

There are plenty of image hosting sites out there; some of them
have fee while others are free where you can pay for more storage space
or bandwidth. Storage space is pretty straightforward; it is like having a
16GB flash drive where it limits you to just 16GB. Bandwidth limits
hinders an access to your image once a certain bandwidth quota is
reached (measured by megabytes or gigabytes). This quota is reached
when a lot of people have loaded the image using their own computers on
a certain amount of time (usually by a monthly basis).
Sharing Photos with Photobucket

There are plenty of free image hosting sites out there, and
Photobucket is one of the oldest. Feel free to check out other free image
hosting sites over the Internet.
1. First, sign up for aPhotobucketaccount on photobucket.com.
Click SIGNUP to proceed to the next page.

2. After clicking SIGNUP, the next page will ask you which Plan
you want to avail. Since we will only use Photobucket for free,
scroll down and find the Sign Up button. After that, you need to
verify your account by checking your Google mail if the website
sent you a verification email. Then open that email and click the
link to finish set up your account.
3. Once your account is set up and you are already logged in, click
the Upload Images. There are two of them but you can click
either of them.

4. A new page will load allowing you to drag and drop your 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.
5. Once selected, a progress bar will appear indicating that the
page is uploading your images. This may take a moment and
will depend on your Internet connection.
6. Once you are done, you will see these indicators:

Then click Upload to Your Bucket button.

7. If you want to share the images you uploaded to your Bucket,

you can choose one or more photos by just clicking on them one
by one. If you want to exclude an image you mistakenly clicked,
you can just click on it again to deselect. Or you can deselect all
of them by clicking the Deselect button. Then after choosing
the photos you want to share, click the Share button
8. L
i
n
k
s

w
i
l
l

a
ppear and you can copy them and paste them where you want
to post or share them.You may choose to share you photo to
your friends on Facebook. If you are done sharing, you may now
log off and close the browser.
Let Us Practice

Jump Starting Your Social Media Campaign

It is time to push on with your social media campaign from Lesson 1.

1. Take a look at your initial plan from Lesson 1 about “Identifying

the Correct Web Platform for Social Change”

2. It is time to set up your website. If you are not knowledgeable with

the platform you chose, feel free to change it. You can do a
research on how to set up accounts for the platform you chose as
well. Creating a Facebook page would be an easy task.

3. Make sure you use the principles of design when layouting and
adding content for your page.

4. Once set up, try adding content like photographs. Use PhotoScape
to edit these photos.

5. Use Photobucket to share these photos to your page and whenever

you see fit.

6. Your teacher will check the status of your site after a few weeks.
Let Us Remember

The basic principles of graphics and layout include the balance,

emphasis, movement, pattern, repetition and rhythm, proportion, and
variety. Balance deals with the visual weight of objects, texture, colors,
and space. Emphasis is the area designed to attract the viewer’s attention.
Movement guides the viewer’s eyes around the screen. Pattern, repetition
and rhythm are visual elements that are repeated to create unity in the
layout or image. Proportion includes visual elements that create a sense of
unity where they relate well with one another. Lastly, variety uses several
design elements to draw a viewer’s attention.
Infographics or information graphics is used to represent
information, statistical data, or knowledge in a graphical manner.
Piktochart is an example of a free online app that allows you to create your
own infographic.
Similar to MS Word, you can use several image file formats over the
Internet; the most commonly used are JPEG, GIF, and PNG. Each of which
can be used in different instances depending on what you need. In using
images, remember to choose the right format, the right image size, and to
caption it.
PhotoScape is a free image manipulation tool that contains many
features to help you in creating images for websites.
Photobucket is a free image hosting site that allows you to share
photos over the internet. Simply create a Photobucket account and you can
start uploading pictures and share them to a wide variety of platforms.
Let Us Assess

Post Test

I. Multiple Choice: Circle the letter that corresponds to the correct

answer.
1. Balance is to even distribution; emphasis is to
a. attracting b. design
c. colors d. weight
2. Movement is to guiding the eye; rhythm is to create
a. attracting b. visuals
c. organization d. unity
3. These are the visual elements creating a sense of unity where
they relate well with one another.
a. style b. variety
c. proportion d. emphasis
4. It uses several design elements to draw viewer’s attention.
a. style b. variety
c. proportion d. emphasis
5. It makes complex data become more visually appealing to the
average user.
a. tables b. infographics
c. piktocharts d. slideshows
6. The following are the common image file formats used in the
internet EXCEPT
a. JPEG b. PNG
c. GIF d. BMP
7. A free image manipulation tool that has batch edit, viewer, and
paper print features
a. Picasa b. GIMP
c. PhotoScape d. IrfanView
8. It is the process of editing multiple pictures at once using one
setting.
a. batch editing b. paper printing
c. animation 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 from the choices
10. A file format typically used for screenshots
a. PNG b. RAW
c. GIF d. JPEG
Let Us Enhance

Create a short three question survey for the community members

who are also affected with the problem you are campaigning for. Ask
them to scale their thoughts (e.g., On a scale of 1-5, do you think this
problem would ever be solved?). Make sure you ask at least 15 members
of the community to make a strong case for your campaign. Create an
infographic about it and post it on your campaign site.

Let Us Reflect

It is very important to learn what are the basic principles of

graphics and layout, the basics on how to create your own infographics,
manipulating photos and images and use image hosting sites for you to
utilize these skills later when you are campaigning for an advocacy you
are having. It is our right to express our thoughts to change some things
for the benefit of the people or the environment. Doing it with graphical
touch reaches more audience because it’s easier to understand for some
instead of doing it purely with texts.

Reference

Empowerment Technologies Innovative Training Works, Inc.Kto12

First Edition.

https://getflywheel.com/layout/20-design-elements-and-principles-every-designer-
should-know/