11

Empowerment
Technologies
Quarter 1 – Module 4:
Image Manipulation
Techniques
Compiler/Contextualizer: Wilfredo R. Tura Jr.
 Quarter 1 - Module 4, Week 4
Image Manipulation Techniques
__________________________________________________________________________

Content Standard : The learners demonstrate an understanding of

how to manipulate text, graphics, and images to
create ICT content intended for an online
environment.
Performance Standard : The learners shall be able to 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.
Competencies : Use image manipulation techniques on existing
images to change or enhance their current state
to communicate a message for a specific purpose.
: Create an original or derivative ICT content to
effectively communicate a visual message in an
online environment related to specific professional
tracks.
Learning Objectives :
1. Create and manipulate images using a simple image
editor.
2. Upload and share images online using Photobucket.
______________________________________________________________

What I Know

Multiple Choice: Write the letter of your answer on a separate sheet of paper.
1. Which of the following is a free image manipulation tool that has batch
edit, viewer, and paper print features?
A. GIMP B. IrfanView C. PhotoScape D. Picasa
2. What process of editing multiple pictures at once that uses one setting?
A. animation C. collage making
B. batch editing D. paper printing
3. Which of the following is a useful tool for printing your own calendars,
sheets, lined paper, graph paper, etc?
A. paper print B. print editor C. print D. viewer
4. Which of the following features of PhotoScape grabs a pixel from your
screen to be used in editing?
A. color picker B. page C. screen capture D. splitter
5. Which of the following features of PhotoScape alters the appearance of
a single image?
A. batch editor B. editor C. combine D. viewer
6. What feature of PhotoScape alters the appearance of multiple images?
A. batch editor B. editor C. combine D. viewer

2
 7. What program that is freely distributed for such tasks as photo
retouching, image composition, and image authoring?
A. BMP B. GIF C. GIMP D. JPEG
8. Where can various tools be found to properly crop an image to a
desirable size?
A. Crop B. Home Tab C. Objects Tab D. Tools
9. Where can you place a wide variety of images like texts, shapes, and
symbols?
A. Crop B. Home Tab C. Objects Tab D. Tools
10. Where can you add a frame, resize, sharpen, and add filters and effects
to your image?
A. Crop B. Home Tab C. Objects Tab D. Tools

What I Need to Know

This module helps you to demonstrate your ability to use digital tools
to edit, create, and manipulate images with the aid of an image manipulation
tool, PhotoScape. Moreover, it aids you to produce materials for printing,
posting, and at some later point, uploading images online using a free image
hosting site particularly, Photobucket.
The module comprises five lessons, namely:
• Lesson1: Principles and basic techniques of image manipulation
• Lesson 2: Basic image manipulation using offline or open-source
software
• Lesson 3: Combining text, graphics, and images
• Lesson 4: Uploading, sharing, and image hosting platforms
• Lesson 5: Usable platforms/applications currently include but are not
limited to Google Sketch Up and GIMP.

I know that you are excited to learn new concepts, so let’s get started.

What’s In

Creating a web is like designing or crafting something new. There are

certain things that you need to consider in order to get your message across.
In the previous lesson, you learned the basic principles of graphics and layout
which can be applied in manipulating an image. What are these basic
principles?

What’s New

What do this line mean? “A picture is worth a thousand words”.

We are used to do “selfie” or capture an image and later upload it on

our Facebook account. Do you know that from then, Facebook does the
rest by formatting our image to best fit its standards? Yes, true but once
you have created your own website, there is a need for you to edit your

3
 images. It appears a simple task, but you need to strike the balance
between the right image quality and the time for the page to load these
images.

What is It

Principles and Basic Techniques of Image Manipulation

Personal websites do not necessarily have to downsize the file size of
the images. There is a need to make necessary changes of your images
especially if you targeted a wider audience.
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 a wise to make our image big, most
especially in a website. Know how much space you want image to
consume. Or have a “preview” image where the audience has the
option to “see full size”.
3. Caption it. Place a caption on images whenever possible. Delete if
not related to the web page.
Creating and Manipulating Images Using PhotoScape
There are plenty of image manipulation tools like GIMP, (GNU Image
Manipulation Program). It is a freely distributed program for such tasks as
photo retouching, image composition and image authoring. But if you are to
create a website, you must use the one which is the most efficient. PhotoScape
is a good tool because it is feasible for beginners and advanced users alike. It
is a free image manipulation tool that contains many features to help you in
creating images for websites.

Figure 1. PhotoScape

4
 On PhotoScape’s main screen, you will see its many features that you
can use for creating web content as follows:
1. Viewer – 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 one; like 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
future website project: The Editor and Batch Edit.

I. Editor Edit
Choose any photo from your camera. Make sure you have chosen the
one which is worth spending your time with editing. Transfer and save it
in your computer in a directory most convenient to you.

1) Open PhotoScape. Then, 3) Once you have selected the

choose editor. folder, A preview of all the
images found on that folder
appears at the bottom of the file
2) Choose the folder where
explorer.
the image you want to
manipulate is located
using the file explorer on
the upper left.

Figure 3. PhotoScape's File Explorer Figure 2. Preview of the images found

on the selected folder

5
4) Select the image you want to use. The image will now be shown on a
much bigger preview inside your work area like what is shown below.

5) Observe 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 4. Image Properties at the bottom of the image preview

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.

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.

6
d. Tools – includes other tools like red eye correction, mole removal, mosaic
effect, and brush tools.

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.

II. Batch Edit

Batch editing is one of the most useful tools when manipulating 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 exercise, 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 the folder where your photos are located. On the Preview window,
drag the photos you want to be part of the batch edit to the work area
(center).
2) Use the tools on the right to edit your photo. This is like the options in
edit except the Crop and Tools tab which 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.
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. For this
exercise, save the batch images in a new
folder labeled as “batch” inside your
resources folder.

Inserting, Uploading, and Sharing Photos over the Internet.

Taking your photos and sharing them over the internet has never
been easier using social media. However, it is highly recommended that social
media photos should be set private and are separated from those posted over
the internet. In that way, you need an image host. Image hosts are websites

7
concentrating in storing photographs which are easily be embedded to a 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 straightforward, it is like having a 16GB flash
drive where it limits you to just 16 GB. 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. It is a free image hosting site that allows you to share photos
over the internet.

1) First, sign up for a Photobucket account on photobucket.com. Just like

Piktochart, you may use your Google+ or Facebook account to
automatically sign up.

2) Once your account is set up and you are already logged in, click the
upload images button.

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

8
 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 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 the
photo you want to share, then click share.

7) You will see the following options:

Shares your photo directly to social media and blogging platforms:
Facebook, Twitter, Pinterest, or even via email.

8) You may choose to share your photo to your friends on Facebook. If

you are done sharing, log off and close the browser.

What I Have Learned

Use the Venn Diagram to compare between PhotoScape and Photobucket.
Write your answer on a separate sheet of paper.

PhotoScape Photobucket

9
 What I Can Do

Recall your initial plan from Module 1, Lesson 1-What I Can Do:
Identifying the Correct Web Platform for Social Change (i.e., identify a problem
in your community, example: littering, garbage disposal, blocked drainages,
water shortage, teenage pregnancy, cyber bullying, increasing number of
COVID cases, etc.).

For learners with gadgets and internet connection, do the following:

1. Set up your website. You can choose any platform you are familiar with,
but an easy task would be to create a Facebook page.
2. Use the principles of design when layouting and adding content for your
page.
3. Try adding content like photographs once set up. Use PhotoScape to
edit these photos.
4. Use Photobucket to share these photos to your page.

You are graded according to the rubric.

Category Exemplary Accomplished Developing Beginning

4 3 2 1
Content The output The output is The output is The output is
exceeds the complete. somewhat incomplete.
expectations complete.
Skills All skills in Most skills in Some skills in Few or no skills
principles of principles of principles of from principles
design are design are design are of design are
applied. applied. applied. applied.
Correctness The output is The output The output has The output
free from errors. contains minimal several errors. contains many
errors. errors.

• For learners without gadgets or no internet connection, do this:

1. In a ½ size cartolina, create a picture collage showing ways on solving
the identified community problem.

Category Exemplary Accomplished Developing Beginning

4 3 2 1
Content The output The output is The output is The output is
exceeds the complete. somewhat incomplete.
expectations complete.
Attractiveness The flow chart is The flow chart is The flow chart The flow chart
exceptionally attractive in is acceptably is distractingly
attractive in terms of design, attractive messy or very
terms of design, layout, and though it may poorly designed.
layout, and neatness. be a bit messy. It is not
neatness. attractive.

10
 What’s More

Read the clues below and write the correct answer on a separate sheet of
paper.

Across
2. readies pictures for printing
5. alters the appearance of multiple images
6. like a mosaic
8. has feature to change image orientation
9. links several images together to form a larger image
10. change the appearance of many images

Down
1. divides a photo into many parts
3. for printing calendars, sheets, lined paper, graph paper, etc…
4. allows you to rename a batch of photos
5.crop an image to a desirable size

11
 Assessment

Multiple Choice: Write the letter of your answer on a separate sheet of paper.

1. Which of the following is an image hosting site?

A. Bandwidth B. Bucket C. Photobucket D. PhotoScape
2. Which of the following PhotoScape’s Features changes the appearance
of a single image?
A. batch editor B. editor C. combine D. viewer
3. What graphics editing program allows users to easily edit photographs
taken from digital cameras with features batch edit, viewer, and paper
print?
A. GIMP B. IrfanView C. PhotoScape D. Picasa
4. What term refers to the amount of data used to download your image
by multiple users?
A. Bandwidth B. Photobucket C. PhotoScape D. Piktochart
5. Which of the following features of PhotoScape grabs a pixel from your
screen to be used in editing?
A. color picker B. page C. screen capture D. splitter
6. What program that is freely distributed for such tasks as photo
retouching, image composition, and image authoring?
A. BMP B. GIF C. GIMP D. JPEG
7. Where can various tools be found in order to properly crop an image to
a desirable size?
A. Crop B. Home Tab C. Objects Tab D. Tools
8. Where can you place a wide variety of images like texts, shapes, and
symbols?
A. Crop B. Home Tab C. Objects Tab D. Tools
9. Where can you add a frame, resize, sharpen, and add filters and effects
to your image?
A. Crop B. Home Tab C. Objects Tab D. Tools
10. What process of editing multiple pictures at once that uses one setting?
A. animation C. collage making
B. batch editing D. paper printing

12
 Answer Key

5. crop
4. rename
3. paper print
1.splitter
Down
10. editor
9. combine
8. viewer
6. page
5. batch editor
2. print
Across
What’s More

References

Books :

Empowerment Technologies : Rex Book Store, Inc. and Innovative

Training Works, Inc., 2016, 109-121
Empowerment Technologies Student Reader : Department of Education,
2016, 25-26
Empowerment Technologies Teacher’s Guide : Department of Education,
2016, 8-13

Online Resources

https://designschool.canva.com/blog/image-enhancement/
https://www.gimp.org/tutorials/GIMP_Quickies/
http://lifehacker.com/5808625/five-best-web-sites-for-image-hosting-and-
photo-sharing/
teacherscorner.net Crossword Maker

13