2 8

1|P age
EMPOWERMENT TECHNOLOGIES (ICT for the Strands) 12

Quarter 2- Module 8: Principles and Basic Techniques of Image Manipulation

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

Regional Director: Gilbert T. Sadsad

Assistant Regional Director: Jessie L. Amin

Development Team of the Module

Writers: Mary Jean B. Barde, Pauline Edna B. Blanza, Alyza B. Duran

Editors: Diana Rose Bermillo, Joan S. Barallas

Reviewer: Danilo P. Alano

Support Team:

Illustrators:
Layout Artist: Froilhan V. Salgado

2|P age
 EMPOWERMENT TECHNOLOGIES 12
MODULE 8:
Principles and Basic Techniques of Image Manipulation

I. INTRODUCTION:

In creating your website, it is always a requirement for you to check the contents and
anticipate its effect on the audience. Aside from the texts, images are important part also on
the overall look of your webpage. Thus, you need to learn how to edit images using an offline
or online editor to convey the genuine purpose of your website.
In this module, you will learn to manipulate images using an image editor and to
insert, upload, and share photos using an image hosting site. In addition, it will discuss the
importance of image quality, image size, resolution, and format in creating a website.

II. LEARNING COMPETENCY:

Upon completion of this module, you MUST be able to:

 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

WHAT YOU ARE EXPECTED TO LEARN:

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

 Identify and apply the techniques for image manipulation.

 Manipulate images using an offline or open source image editor.
 Upload and share images using Image Hosting Site.
 Appreciate the importance of image editing in the transmission of message to the
audience.

3|P age
III. VOCABULARY LIST:
Principles and Basic Techniques of Image Manipulation
-----------------------------------------------------------------------------------------------------------------

 Batch Editing – is one of the most useful tools when trying to easily manipulate all
images at the same time.

 Composite Image - is an image made from the combination of a variety of pictures.

 .GIF – is a file extension for the Graphics Interchange Format image file. It is used in
computer generated graphics. It supports transparency and animation.

 JPG – is a file extension for the Joint Photographic Experts Group picture file. It is used
in real-life photographs. It does not support animation and transparency.

 Open Source Software – is a software for which the original source code is made freely
available and may be redistributed and modified according to the requirement of the
user.

 .PNG – is a file extension for Portable Network Graphics image file. It is used in
screenshots. It supports transparency but does not support animation.

 PhotoScape – is a free image manipulation tool that contains many features to help you
in creating images for websites.

4|P age
IV. PRETEST
Principles and Basic Techniques of Image Manipulation
------------------------------------------------------------------------------------------------------------------

Name:______________________________________________Score:_________________
Section:_____________________________________________Date:__________________

Instruction: Below the crossword puzzle grid are the description of the words that should be
supplied on the white boxes. On a separate sheet of paper, write your answer from numbers
1-5.

1. 3.

2.

4. 5.

ACROSS
1 In editing images, you can achieve this technique if you adjust or regulate an element
so that it would appear to have suitable relationship to other elements.
2 It is a dark shape that is formed when an object blocks a source of light. Using this
effect will make your image realistic.
4 It refers to the visual or tactile surface characteristics and appearance of something.

DOWN
3 It refers to the number of pixels in an image.
5 It is the process of modifying or improving raw images using different techniques,
tools, or software.

5|P age
V. LEARNING EXPERIENCE:

INFORMATION SHEET 8.1

Principles and Basic Techniques of Image Manipulation
------------------------------------------------------------------------------------------------------------------
LESSON 8.1 Principles and Basic Techniques of Image
Manipulation

Have you ever captured a picture and wanted to change some aspects of it? Have
you ever planned to combine raw images in one photo to convey your own personal
message? Would you like to learn how to edit images so you can add your own personal
touch on them? To achieve that, here are some techniques of image manipulation.

TECHNIQUES OF IMAGE MANIPULATION

1. Know the resolution of the image to be used.

When combining images, always try to make sure that the images you choose for
your photo manipulation project have similar resolution.
The risk of not using high enough resolution images is that the final piece can appear
distorted, pixelated, or blurry. However, you should also know if the webpage where you will
put the image can support its resolution.
Reference: https://design.tutsplus.com/tutorials/10-tips-for-improving-your-photo-manipulation-skills--cms-25740

2. Choose the right image file format.

It is best for you to have knowledge on the characteristics of the different image file
formats before editing. There are plenty of it that is used on the web but most of the time you
will be using these three because of their compatibility with all the major web browsers. The
following are the common image file formats used on the web.

Format File Extension Use Supports Supports

Transparency Animation
1. Joint .jpeg or .jpg Real-life No No
Photographic photographs, high
Experts compression
Group
2. Graphics .gif Computer- Yes Yes
Interchange generated
Format graphics
3. Portable .png Screenshots, high Yes No
Network compatibility
Graphics

Reference: Empowerment Technologies by Innovative Training Works, Inc, 2016, Second Edition, REX Book Store, pages 101-
111

6|P age
3. Light and Shadow
Lighting should be consistent to
make the photo combination believable. If
any element in the image has different
lighting, and therefore different shadows,
that element will never appear to fit in with
its surroundings. The best way to make
sure that the lighting and shadows for your
photo manipulation are on point is to have
a solid understanding of how light and Figure 1: Light and Shadow
Source: mrclippingexperts.com
shadows work in the real world.

Look at the picture to understand

more about the primary light source and
the illuminated or shadowed object. In
manipulating images, remember to always
figure out where the light source is. Also,
make sure that the surface beyond the
object from the light source is shadowed.

Figure 2: Light and Shadow

Source: https://design.tutsplus.com

4. Background editing

You can change the background if it

does not match the image or the totality of
the presentation. You can also add effects to
the background.

Figure 3: Background editing

Source: Pinterest

5. Use of texture
If you are trying to go for a photo manipulation that is
dark and dirty looking, you can use a rough ground surface
as a background texture; or if you are looking for something
smoother, you can use paper or a wall texture. Adding
textures to a photo manipulation project is a fast way to
create the depth of detail that we see in real life. Using
textures created from real life is one of the fastest ways to
accomplish that. It is the use of high-quality textures that
ultimately provides the required level of detail that makes the
surfaces in a manipulated photo believable.
Figure 4: Use of Texture
Source: Pinterest

7|P age
6. Proportion

To achieve proportionate composite image,

you must remember that images that are
supposed to be far away must be smaller than
the ones that are closer to you. When combining
images, resize or adjust the image to make it
proportionate and realistic.

Figure 5: Proportion
Source: Pinterest

7. Perspective
The best method for ensuring that all the
elements are in proper scale agreement is to think
through the perspective of an image. Identify the
horizon and vanishing points, and make sure that
your elements align with these.

Figure 6: Perspective
Source: https://design.tutsplus.com

8. Color Blending
You can use color blending to match the background with the other elements on the page.

9. Combining Images
Images are like missing puzzle pieces; without them you can never fully complete the
puzzle. So, choose them carefully. You may need to look at multiple stock images before
choosing the right ones for your composition. You can combine multiple images to make a
point or to highlight your message.

10. Emphasis
There should be a focal point to a page that will
attract viewers. The element you want to
emphasize should be sharp, big, and most vibrant.

Figure 7: Emphasis
Source: Pinterest

8|P age
COMBINING TEXT, GRAPHICS, AND IMAGES

 Transparent Shapes – When emphasizing texts, you can

add simple shapes with a slight transparency behind it.

Figure 8: Transparent Shapes

Source: Canva.com

 Fonts and Shapes – Fonts and

shapes should complement each
other. You can use rounded shapes
with rounded fonts and sharp
shapes with sharp fonts.

Figure 9: Fonts and Shapes

Source: Canva.com

 Text and background – Text and

background should be aligned to have an
organized look.

Figure 10: Text and background

Source: Canva.com

 Clean and Clear Background – Use a

clean and clear background for the
message to be readable. Background
should not washout your message.

Figure 11: Clean and Clear Background

Source: Canva.com

9|P age
Basic Image Manipulation Using an Offline and Open Source Software
Image editing refers to modifying or improving digital or traditional photographic
images using different techniques, tools, or software. It is done to create the best possible
look for the images and to improve the overall quality of the image according to different
parameters.
Reference: https://www.techopedia.com/definition/7686/image-editing

Here are the lists of various offline and open source image editors:
1. Paint.net – Paint.net is a Windows-based alternative to the MS Paint editor. It is a
free open source available in Windows. It can be used for photo editing like recolor,
crop, text edit, rotate, multiple layers, and other photo editing work.
2. Canva – Canva is a graphic design platform that allows users to create social media
graphics, presentations, posters, documents, and other visual content. Users can
choose from many professional designed templates, edit the designs, and upload their
own photos through a drag and drop interface. Reference: Wikipedia.org
3. Photoscape – Photoscape provides a simple user interface to perform common
photo enhancements including color adjustment, cutting, resizing, printing, and GIF
animation. It can be used offline or online. Reference: Wikipedia.org
4. Google Sketch Up – Google Sketch Up is a free, 3D-modeling program with tools
that allow you to create 3D models of houses, home renovation, woodworking
projects, and others with dimensional accuracy.
5. GIMP – GNU Image Manipulation Program is a free, open-source image graphics
editing program that is used for image retouching and editing, free-form
drawing/painting, and other specialized tasks.

CREATING AND MANIPULATING IMAGES USING PHOTOSCAPE

PhotoScape is a good tool because it is feasible for both beginners and advanced
users. In case PhotoScape is not yet installed in your computer, you may get it for free from
www.photoscape.org

Photoscape’s Main Screen

10 | P a g e
 On PhotoScape’s main screen, you will see its various features that you can use for
creating web content as follows:
1. Viewer – is a picture viewer that has the same features with most image viewers
(e.g., 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 photo that is 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 image on screen and saves it.
10. Color Picker – grabs a pixel from your screen to be used in editing.
11. Raw Converter – converts RAW images to JPEG.
12. Rename – allows users to rename a batch of photos.
13. Paper Print – is a useful tool for printing your own calendars, sheets, lined paper,
graph paper, etc.

Steps in Image Manipulation using Editor of Photoscape

1. Open the 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 of your screen.

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.

4. From the preview tool, select the image you want to

use.
11 | P a g e
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.

On the image above, notice that the photo is 4160 x 3120 pixels and has a size of 8.2 MB.
Most monitors today do not support that resolution and that would probably fill up the entire
web page. Due to this big resolution, the file size is affected even though this is JPG 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 the aspect ratio of 16:9 support the resolutions of 1366 x
768. Try to resize your image to make it lower than 800 MB.

b. Object tab – This is where you can place a wide variety of images like texts, shapes,
and symbols.

c. Crop – This is where various tool can be found to properly crop an image to a desirable
size.

d. Tools – include 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 that is located on the lower right of the program. The Save As dialog box will
appear. Save it in your activity folder with the file name that you prefer. Check the file size
and see how much space you have saved.

12 | P a g e
INFORMATION SHEET 8.2
Principles and Basic Techniques of Image Manipulation
--------------------------------------------------------------------------------------------------------------
LESSON 8.2 Inserting, Uploading, and Sharing Photos on the
Internet

Image hosting sites allow individuals to upload images to an Internet website. The
image host will then store the image onto its server and show the individual different types of
code to allow others to view that image.

1. Google Photos – allows you to share photos with

friends and family using shared albums. It allows you to
make room for more memories.
Features:
a. It helps you to get back up of unlimited photos,
images, and videos for free, up to 16MP.
b. Helps you to manage phone storage.
c. Allows you to access them from any phone, tablet,
or computer.
d. See your photos automatically organized by the Figure 12: Google Photos Logo
people, places, and things that matter. Source:
https://en.wikipedia.org/wiki/Google_Photos

2. Dropbox – is a file and image hosting tool. It provides

personal cloud, file synchronization, cloud storage, and
client software. It is designed to collaborate on your
projects, whether you are working alone or in the team.
Features:
a. It offers you to sync data across all devices safely.
b. Your file size should be 50 GB or smaller.
c. Service is available for macOS, Linux, and Windows
operating systems.
d. Helps you to bring all your content together
Figure 13: Dropbox Logo
e. Gets notification of progress updates, and to-dos Source:
https://www.finder.com/ph/dropbox
added to descriptions.

3. Flickr – is a video and image hosting software that

enables you to share clips with others. It helps you
to store, sort, and search for online videos.
Features:
a. This website provides various categories to
download videos.
b. This allows you to find videos according to
camera types.
c. You can sort out videos by name, activity, Figure 14: Flickr Logo
oldest, newest, etc. Source:
https://www.flickr.com/photos/bibliotheque_
ul/16521004875
Reference: https://w ww.guru99.com/free-photo-hosting.html

13 | P a g e
USING GOOGLE PHOTOS BY USING IMAGE HOSTING SITE
If you want to learn more about how to use Google Photos, just click this link.
https://youtu.be/JI-5N2OJJaA.

To Get Started
1. Go to photos.google.com.
2. Log in to your google account.

Uploading Photos
1. Click the icon to access your photos.
2. Just drag photos and videos from your library or click the icon
to upload photos or videos.
Upload

Photos

Assistant
1. By clicking the icon , you can access Assistant.
2. The Assistant is similar to adding albums, shared albums, collages and animation.

Assistant

14 | P a g e
Sharing Photos, Album or Video
1. Select a photo, album, or video.
2. Tap Share .
3. Under "Send in Google Photos," select people to share with.
4. To share with one person, tap his/her name.
5. To find someone specific, tap Search . Enter his/her name, phone number, or
email address.
6. To share with more than one person, select multiple people.
(Optional) Add a message to go with your shared media.
7. To share, tap Send. This will create an ongoing conversation thread where you and
the people you have shared with can add additional photos, videos, comments, and
likes over time.

Sharing

Creating and Managing Albums

1. Click the icon to access your albums.

2. To create a new album, click and select Album.

Add

Albums

Above, you can see pre-made albums, each album has specific functions:
1. People – Photos that are grouped based on the faces are sorted here.
2. Places – Photos that are grouped based on the location where you took your photo are
sorted here.
3. Things – Photos that are grouped based on things are sorted here.
4. Videos – All the videos you recorded are in one place.
5. Collages – You can create a collage here and it will also be sorted here. For easy
access, you can also click Collage.
6. Animations – You can create an animation of your photos and it will also be sorted here.
7. Movies – You can make movies with your photos, videos and music and it will be sorted
here.

15 | P a g e
VI. Practice Tasks
ACTIVITY SHEET 8.1
Principles and Basic Techniques of Image Manipulation
----------------------------------------------------------------------------------------------------------------------------
Instructions:
1. Apply the techniques of image manipulation to create the following ICT Contents from
existing images, text, and graphic elements that are used in your specific professional
track.
2. Choose one from among the following topics depending on your track.
A. Digital Posters for Sports Event
B. Logo for Community and School Organization or for Group of Friends
C. Flyer for Promoting Special Events
D. Labelling and Manual of Operation for Tools and Equipment
E. Signage of your Planned Business
F. Flyer Promoting Sustainable Environment
G. Book Cover Design of the Book you are Planning to Write About
3. You will submit it to your teacher through Messenger or gmail.

CRITERIA
Concept - 10 points
Techniques Used - 10 points
Overall Impact - 10 points
Creativity and Originality - 5 points
Timeliness - 5 points
Total 40 points

16 | P a g e
ACTIVITY SHEET 8.2
Principles and Basic Techniques of Image Manipulation
----------------------------------------------------------------------------------------------------------------------------
Instructions:
Roam around and find a subject for your GIF. Bring a camera of any type (cellphone, or
Digital Camera). Provide at least 10 consecutive shots of your chosen subject.

USING LAPTOP OR PERSONAL COMPUTER:

1. Download the PhotoScape program or visit www.photoscape.org .
2. Open the PhotoScape application. Study about the parts, features, and
its functions.
3. Pick at least 5 to 10 pictures depending on your imagined result of your GIF.

4. Manipulate the images using the Editor or Batch Editor, you may add text or other
effects.

5. Create your own GIF in PhotoScape.

6. Submit your GIF to your teacher through Messenger or Gmail.

USING MOBILE PHONE:

1. Download any GIF Maker Mobile Application in your mobile phone.
Sample Applications:
 GIF Maker, GIF Editor, Video Maker, Video to GIF
 GIF Maker
 ImgPlay – GIF Maker
 GIPHY: GIF & Sticker Keyboard & Maker
2. Open the application. Study about the parts, features, and its functions.
3. Use your raw captured images to create a GIF.
4. Create your own GIF depending upon your preferred subject/concept.
5. Submit your GIF to your teacher through Messenger or Gmail.

CRITERIA
Creativity and Originality - 10 points
Concept or Theme - 10 points
Overall Impact - 5 points
Timeliness - 5 points
Total 30 points

17 | P a g e
 I. POST TEST
Principles and Basic Techniques of Image Manipulation
----------------------------------------------------------------------------------------------------------------------------
Name:______________________________________________Score:__________________
Section:_____________________________________________ Date: _________________
Part I
Instruction: Choose from the box below the appropriate technique that is used on each of
the images. Write your answer on the space provided.

Resolution Shadow Color Blending

Transparency Perspective Background Editing
Emphasis Texture Proportion

1. 2.

3. 4.

5.

______________

18 | P a g e
Part II
IDENTIFICATION. Read the following statements carefully. Identify what is being referred to
in each statement and write the answer on the space provided.

____________________1. It is an image hosting site that allows you to store and see your
photos automatically organized according to people, places, and things that matter.

____________________2. This is the link that you can visit if you do not have an application
of PhotoScape in your desktop.

____________________3. It is a video and image hosting software that enables you to share
clips with others. It helps you to store, sort, and search for online videos.

____________________4. This part of the Photoscape is where you can add a frame, resize,
sharpen, and add filters and effects to your image.

___________________5. This is a graphic design platform that allows users to choose from
many professional designed templates, edit the designs and upload their own photos through
a drag and drop interface.

19 | P a g e
 II. ASSIGNMENT
Principles and Basic Techniques of Image Manipulation
----------------------------------------------------------------------------------------------------------------------------
Answer the following questions in three sentences or less. Write your answer on the space
provided below.

1. In your own idea, why do we need to edit photos before putting or uploading it as a
content on a page or website? How will you apply to your professional track what you
have learned in image manipulation?
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

2. Cite three websites that you visit often. What makes their design works? What did you
notice with its contents particularly the photos? Write your answers on the table
below.

Website or Platform What makes their design What did you notice with
works? its contents?

1.

2.

3.

3. What are the benefits of using image hosting sites?

____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________

20 | P a g e
ANSWER KEY

PRETEST
1. PROPORTION
2. SHADOW
3. RESOLUTION

4. TEXTURE
5. EDITING

POST TEST
Part I
1. Emphasis
2. Proportion
3. Background Editing
4. Texture
5. Shadow
Part II
1. Google Photos
2. www.photoscape.org
3. Flickr
4. Home Tab
5. Canva

21 | P a g e
REFERENCES:
Book References:
 Innovative Training Works, Inc. Empowerment Technologies. 2019. 2nd ed.,
1977C.M. Recto Avenue, Manila Philippines, Rex Book Store, 2019, pp. 102–108.
 Jemma Development Group. Visual Guide Empowerment Technologies. 2017. 7
Berkshire St. cor. Pasadena St., Cainta Rizal, Jemma Inc., 2017, pp. 53–56, 77–78.

Website References:

 “What Is Open Source? Definition of Open Source, Open Source Meaning.” The
Economic Times, 12 Apr. 2017, economictimes.indiatimes.com/definition/open-
source. Accessed 20 Aug. 2020.
 PICSERA. “What Is a Composite Image?” Picsera, 2016, www.picsera.com/what-is-
an-image-composite/. Accessed 20 Aug. 2020.
 Nelson, Kirk. “10 Tips for Improving Your Photo Manipulation Skills.” Design &
Illustration Envato Tuts+, 12 Apr. 2017, design.tutsplus.com/tutorials/10-tips-for-
improving-your-photo-manipulation-skills--cms-25740. Accessed 21 Aug. 2020.
 “Shadow Adding.” Mr. Clipping Experts, mrclippingexperts.com/shadow-adding/.
Accessed 20 Aug. 2020.
 Wikipedia Contributors. “Canva.” Wikipedia, Wikimedia Foundation, 27 Feb. 2019,
en.wikipedia.org/wiki/Canva. Accessed 20 Aug. 2020.
 “22 Best FREE Image Hosting Sites in 2020.” Www.Guru99.Com,
www.guru99.com/free-photo-hosting.html. Accessed 20 Aug. 2020.
 Photoscape Main Screen’s Print Screen
 Techopedia - The IT Education Site. “What Is Image Editing? - Definition from
Techopedia.” Techopedia.Com, 28 May 2019,
www.techopedia.com/definition/7686/image-editing. Accessed 21 Aug. 2020.
 6 Months Later Reviews. “How to Use Google Photos in 2020.” YouTube, 10 Jan.
2020, www.youtube.com/watch?v=JI-5N2OJJaA&feature=youtu.be. Accessed 21
Aug. 2020.

22 | P a g e