Empowerment

Technologies
QUARTER 4
MODULE Imaging and Design for Online
03 Environment (Part 2)

TECHNICAL VOCATIONAL LIVELIHOOD

Empowerment Technologies – Grade 11
Quarter 4 – Module 03: Imaging and Design for Online Environment Part 2
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.
Introductory Message

For the Learner:

Welcome to the Empowerment Technologies Self-Learning Module on Imaging

and Design for Online Environment Part 2!

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

This module has the following parts and corresponding icons:

Expectations - This points to the set of knowledge and skills that

you will learn after completing the module.

Pretest - This measures your prior knowledge about the lesson at

hand.

Recap - This part of the module provides a review of concepts and

skills that you already know about a previous lesson.

Lesson - This section discusses the topic in the module.

Activities - This is a set of activities that you need to perform.

Wrap-Up - This section summarizes the concepts and application of

the lesson.

Valuing - This part integrates a desirable moral value in the lesson.

Posttest - This measure how much you have learned from the entire
module.

EXPECTATIONS

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

• differentiate Online Image File Formats;
• appreciate how the Principles and Basic Techniques of Image
Manipulation can help us create good outputs; and,
• apply the skills learned by manipulating image using PhotoScape.
 PRETEST
Directions: Read each sentence carefully and circle the correct answer.
1. Which of the following common image file formats is not used in the
internet?
A. JPEG B.GIF C. PNG D. BMP
2. Which of the following image file formats that supports image
transparency?
A. PNG B. GIF C. RAW D. JPEG
3. What image format are you going to use if you want to provide high
quality photographs.
A. PNG B. GIF C. RAW D. JPEG
4. What does the file extension JPEG stand for?
A. Joint Photographer Experts Group
B. Joint Photographic Experts Group
C. Japan Photo Excellence Group
D. Jotter Photo Element Group
5. What image file formats that can supports transparency and
animation?
A. JPEG B. RAW C. GIF D. PNG

RECAP
In previous module, you learned about “Imaging and Design for Online
Environment Part 1” which discussed basic principles of graphics and layout
that can make you a better layout artist, a web designer or a mentor to a
visual artist that help individual express themselves visually.

Enumerate the 5 principles in making an effective infographic design, by

using the space the below.
1. _________________________________________________________________
2. _________________________________________________________________
3. _________________________________________________________________
4. _________________________________________________________________
5. _________________________________________________________________
 LESSON

In this module, you will learn about the “Imaging and

Design for Online Environment Part 2.” It will discuss the
different Online Image File Formats. You should consider that
website images should be compressed because data travels over
the internet and not everyone has a fast Internet connection.

ONLINE IMAGE FILE FORMATS

Essentially, when you take photograph, what happens is that the
camera captures data that creates a digital image. There are different types of
image file formats which can be retrieved and edited using photo editing
software. Choosing the right file format is important and can be critical
depending on the level of quality.
We have to compressed images on our websites. Likewise, even though
a wide variety of websites already support high-definition (HD photos, you do
not have use HD photos all the time. In fact, most of the time, you do not even
have to.

Here are the common image file formats used on the web. Now we will
take a look at their use in the web.

1. Joint Photographic Expert Group - is a

“lossy” format meaning that the image is
compressed to make a smaller file. The
compression does create a loss in quality but
this loss is generally not noticeable. JPEG
files are very common on the Internet and
JPEG is a popular format for digital https://commons.wikimedia.org/wiki/File:HDR

cameras making it ideal for web use and I_Sample_Scene_Balls_(JPEG-HDR).jpg non-

professional prints.

Compression: Lossy - some file information is compressed or lost

Best For: Web Images, Non-Professional Printing, E-Mail, PowerPoint

FILE USE SUPPORT SUPPORT

EXTENSION TRANSPARENCY ANIMATION
.jpeg or .jpg Real life No Yes
photographs, high
compression
 2. Graphics Interchange Format - are widely
used for web graphics, because they are
limited to only 256 colors, can allow for
transparency, and can be animated. GIF
files are typically, small is size and are very
portable.
Compression: Lossless - compression
without loss of quality
Best For: Web Images
https://tenor.com/view/virus-face-mask-no-
nope-disagree-gif-17287807

FILE USE SUPPORT SUPPORT

EXTENSION TRANSPARENCY ANIMATION
.gif Computer generated Yes Yes
graphics

3. Portable Network Graphics- are a lossless

image format originally designed to improve
upon and replace the gif formats. PNG files are
able to handle up to 16 million colors, unlike
the 256 colors supported by GIF. This image is
transparent/no background.
Compression: Lossless -
compression without loss of
quality https://www.cleanpng.com
Best For: Web Images

FILE USE SUPPORT SUPPORT

EXTENSION TRANSPARENCY ANIMATION

.png Screenshots, high Yes No

compatibility

PRINCIPLES AND BASIC TECHNIQUES OF IMAGE

MANIPULATION
Most of the time, we just capture an image and upload it on our Facebook.
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.
Here are some tips to help you edit images for your website:
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.
Thus, it is not always wise to make our image bog, most especially in a
 website. Know how much space you want the image consume. Or have
a “preview” image where the audience has the option to “see full size”.
3. Caption it – Remember to put a caption on images whenever possible.
If it is not related to web page, then remove it.

CREATING AND MANIPULATING IMAGES USING PHOTOSCAPE

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. PhotoScape is a good tool
because it is feasible for beginners and advanced users alike. It is a fun and
easy photo editing software that enables you to fix and enhance photos. You
can download it for free online. Install it in your computer and try to discover
its feature by yourself, its easy and convenient.

PhotoScape’s main screen shows the features you can use in creating web
content:
1. Viewer - as the name implies, is a picture viewer with features that
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 – link 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 save 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.
A. EDITOR EDIT
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.
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.

4. From the preview, select 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

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.
the preview
 If you have similar problem as mentioned in the previous step, try to
reduce the size of the image. Most monitors with the aspect ratio of
16.9 support resolutions 1366x768. Try to resize your image to lower
than 800.
b. OBJECTIVE TAB – this is
where you can place a wide
variety of images like text,
shapes, and symbols.
c. CROP- this is where you
Can be found in order to
properly crop an image to a
desirable size.
d. TOOLS- includes the 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 editor.jpg. Check the file size and see how much you space you
saved.

B. BATCH EDIT
Batch editing is one of the most useful tools when trying to easily
manipulate all images at the same time. This is most useful when you
create a gallery of photos for a website. You can make their sizes uniform
to what you have specified. For this activity you will need to take at least
ten pictures and save in your desired folder. It is highly recommended that
your photos share the same orientation (portrait or landscape).

1. Select folder where photos are located, then on the Preview window,
drag the photos you want to be part of the batch edit to the work
area(center).
2. Use tools on the right to edit your photos. This is similar to the option
in edit except Crop and Tools tab which are replaced by the Filters
tab. The filters tab is used to add a certain filter that will apply to all
your photos.
3. Resize the pictures so that they do not exceed 800 pixels in width. Add
filters if you want.
4. Click on Convert All button found on the upper right. ( The tools used
for batch editing found on the right side of the program,
5. The Save dialog box will appear that will allow you to change the
location, the name of the images, and the file type. Since we are
working on photographs, we are going to keep it as JPEG file. For this
activity, save the batch images in a new folder labeled as “batch” inside
your resources folder.
 WRAP-UP
Let’s summarize what you have understood from this module.
Differentiate the image file formats.

1. ____________________________________________
2. ____________________________________________
3. ____________________________________________

VALUING
Why do you think these principles and techniques are important in creating
good pictures? Share your thoughts by using the space below.
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

POSTTEST

Directions: Write T if the statement is TRUE, and write the correct answer if
the statement is FALSE. Write your answer on the blank space provided.
__________________1. Graphics Interchange Format or GIF is a “lossy”
format meaning that the image is compressed to make a smaller file.
The compression does create a loss in quality but this loss is generally
not noticeable.
___________________2. Batch Editor alters the appearance of multiple
images.
___________________3. In Home tab this is where you can add a frame,
resize, sharpen, and add filters and effects to your image.
___________________4. Splitter is a one features in PhotoScape that
allows the user to grabs a pixel from your screen to be used in editing.
_________________5. PhotoScape is a fun and easy photo editing
software that enables you to fix and enhance photos.
Innovative Training Works, Inc. Empowerment Technologies: 5th Edition
(2016), Rex Publishing, Manila

“M LIBRARY Research Guide”. Accessed July 20,2020 form

https://guides.lib.umich.edu/c.php?g=282942&p=1885348