EMPOWERMENT TECHNOLOGY

Module
Use Image Manipulation Techniques

What’s In

. In lesson 1, you have learned how to make a good design by applying the
different Element of Design and following the Principles of Design. You were also
able to distinguish what is a good and a bad design

What I Need to Know

• How do you manipulate text and images?

• What is the best image format to be use in your projects?
• What is the best resolution in creating your projects?

The questions above are some of the few questions that comes into mind
when we talk about Photo Editing Sofware. The picture above is the Graphical user
interface (GUI) of GIMP Photo Editor that we will be using throughout the lesson 2.
Before we go further, you need to answer the first activity of the lesson

Module 6 – Page 1
 What’s New

Activity 1: Different ways to manipulate images

Image manipulation is an art that involves enhancing or modifying an image

using different methods and techniques to achieve desired result. By using image
manipulation on your photos, you can remove blemishes on your face, change
backgrounds, smooth out rugged areas, and so on and so forth.

Different ways to manipulate images

1. Resizing 5.

2. 6.

3. 7.

4. 8.

What Is it

Photo editing and designing software allow you to manipulate or edit images.
In order to perform image manipulation, you need to have basic knowledge of image
editing operations such as cutting, cropping, replacing and more.
For this, you need an image editing software for image manipulation practices.
The followings are some examples of image editing software:
• Adobe Photoshop
• Gimp
• Corel Draw
• Pixlr Editor
• PAINT.NET
• InPixio

Module 6 – Page 2
Online File Formats for Images and Text

Image file format refer to how data associated to the image will be stored. It
can be compressed to decrease file size of the image. There are two different
compression you can choose when enhancing your images: lossy and lossless
compression. Lossy compression reduces file size by removing redundant
information means that some data from the image file is lost. While Lossless
compression retains values and manages to lower file size.

Common image file formats

Name Extension Color Compression Common Uses

Joint .jpg, 24- bit Lossy Used for Online photos and / or
Photographic .jpeg artwork
Experts
Group

Graphic .gif 8 – bit Lossless Animated graphics like banner

Interchange ads, email images and social
Format media memes

Portable .png Up to Lossless High-quality transparent web

Network 24-bit graphics. Considered as best
Graphics image file type for web graphics.

Tagged .tif, 24-bit lossless Primarily used in photography

Image .tiff and desktop publishing.
File Format

Image resolution refers to the number of pixels in an image or the detail an

image holds. It is identified by the height and the width of the image. A pixel is just
one unit of the whole digital image it is the smallest unit of an image. The higher the
resolution, means that there more pixels per inch (PPI), resulting in more pixel
information and creating a high-quality, crisp image.

Module 6 – Page 3
What is GIMP?
GIMP is a cross-platform image editor available for
GNU/Linux, OS X, Windows and more operating systems. It is free
software, you can change its source code and distribute your
changes.

GIMP means "GNU Image Manipulation Program". It is free

software to download at http://www.gimp.org/. GIMP was built for
a Linux system, but it can also runs on any platforms like Windows and Mac OS.
Gimp Tutorials
• Download and install Gimp Image Editor

a. Open your browser and visit

http://www.gimp.org/.
b. From the GIMP website, click on the button that says “Download” to
proceed to the download page.

c. Scroll down and look for the Current Stable Version. Click Download
GIMP directly.

d. Choose where you going to save your GIMP installer and Click Save.
Wait for the download to finish, it may take some time.
e. To install the GIMP application, Double click or Right Click on the file
installer to start the installation.
f. Just follow the on screen instruction to install the GIMP.

Module 6 – Page 4
 g. For more detailed instruction on how to download and install Gimp in
your computer, please visit youtube website and type in “How to
download and Install Gimp” in the search bar and click search. See
picture below for the guide.

• Crop and Resize an image.

a. Open GIMP photo editor and click on File > Open to open the image you
wish to crop and resize.
b. The image opens in a new editing window. Select
the rectangular icon from the GIMP toolbar.
c. After select that tool, move your mouse to the
image window and create a selection that you
wish to crop.
d. Then, select Image > Crop to selection from the
menu bar or you can also right click the image window and select Image
> Crop to selection.

e. To resize the image, you can click Image > Rescale Image.
f. Enter your desired width and click Scale. The image will then be resized
and automatically rescaled using the width you entered.
g. If you are satisfied with the result, you may now save you file by clicking
File > Save as.

Module 6 – Page 5
 h. For the instruction on how to crop and resize an image, please visit
youtube website and type in “gimp tutorial resize and crop image” in the
search bar and click search. See picture below for the guide.

• Color Adjustment.
a. Open GIMP photo editor and click on File > Open to open the image you
wish to adjust the color.
b. Click Colors > Levels from the menu bar or right click the image
window and select Colors > Levels.

c. Click on textbox beside Channel to view the four options: RGB

(Red,Green, Blue) and alpha.
d. You can adjust the red channel by selecting it and changing the value or
adjusting the input and output level.
e. You can continue adjusting the color levels by selecting the “Green” or
“Blue” channel options and then dragging the triangular slider buttons for
the preferred effect.
f. If you are satisfied with the result, you may now save you file by clicking
File > Save as.

Module 6 – Page 6
 g. For more tutorials about applying color adjustment on an image, please
visit youtube website and type in “gimp tutorial Color Adjustment” in the
search bar and click search. See picture below for the guide.

• Brightness and Contrast.

a. Open GIMP photo editor and click on File > Open to open the image
you wish to adjust the brightness and contrast.
b. Click Colors > Brightness-Contrast from the menu bar or right click
the image window and select Colors > Brightness-Contrast

c. A new dialogue box will appear so that you can adjust your settings.
d. You can adjust the "Brightness" and "Contrast" by clicking and dragging
the scrollers left or right or by entering a value into the text boxes.

Module 6 – Page 7
 e. You can click on “Edit these Settings as Levels" to bring up the
"Levels" pop-up window.
f. The "Brightness-Contrast" is a simpler version of the changes that you
can make with "Levels". "Levels" gives you much more control over the
editing process.
g. For the instruction on how to apply color adjustment on an image, please
visit youtube website and type in “gimp tutorial Brightness & Contrast” in
the search bar and click search. See picture below for the guide.

• Text Tutorial.
a. Open GIMP photo editor. And Create a new document by clicking File
> New. Just accept the default value then click OK.
b. Open the Type tool by clicking on the black "A" in the Toolbox window
or by just pressing the letter “A” in your keyboard.

c. Select the Philosopher font type. If you don’t have philosopher font you
can download it here
https://www.ffonts.net/Philosopher.font?text=ABCDEFG

Module 6 – Page 8
d. Type the word “Google” in the image window.

e. Highlight 2 letter “G” and change the color to blue. Next, highlight the
first letter “o” and change their color to red, highlight the next letter “o”
and change their color to yellow lastly highlight the letter “l” and change
their color to green.

f. Don’t forget to lock the transparency when you’re done.

g. The next step is to convert the text into an image. Right click on your
google text layer and then click "Discard Text Information".

h. GO to your google layer. Right Click > Duplicate Layer, lock

transparency and fill the layer with black.
i. Open Gaussian blur by click Filters > Blur > Gaussian blur

Module 6 – Page 9
 Do a Gaussian blur of 10 pixels.

j. Select the layer that contains the colored Google logo and Open Bump
Map by clicking Filter > Map > Bump Map. Enter the following
information:
Azimuth: 90
Elevation: 45
Depth: 7

Leave the default value for X offset, Y offset, Water level and Ambient.

k. For more tutorials about Text and Text effects, please visit youtube
website and type in “gimp text effects” in the search bar and click search.
See picture below for the guide.

• Image Manipulation (Bear on the Road).

a. Open GIMP photo editor and click on File > Open
b. Locate the 2 images (European brown bear and road). If you don’t have
these images please download it here:
Bear : https://pixabay.com/photos/european-brown-bear-brown-bear-
3336849/
Road : https://pixabay.com/photos/road-scenery-destination-4125391/

Module 6 – Page 10
 c. Select the Free Selection Tool from the tool bar.
d. Go to the tool option, and tick on Feather edges.
e. Change the value of the radius to 10
f. Create a selection in the image(A) then press
CTRL+X to cut the selection and go to the next
image and press CTRL-V paste (B).

Figure 1 :A 2Figure 2 :B

g. You can used the move tool to adjust the bear image.
h. Erase the unwanted outer image by using the Eraser Tool from the
tool bar then go to tool option and select the brush size.
i. Click and drag the outer image to delete.
j. Finally, click on Colors > Hue Saturation
k. Adjust the saturation.

l. For more tutorials about image manipulation, please visit youtube

website and type in “gimp manipulate images” in the search bar and
click search. See picture below for the guide.

Module 6 – Page 11
Combining Text, Graphics, and Images
Combining text, graphics, and images in your design will make your message
clearer.
• Transparent shapes
o Add simple opacity to your shape to see clearly the text you want to
emphasize. It adds an elegant and focal point to your design
• Fonts and Shapes
o Used the right font size (not to small and not to big) and font type in your
design and combined it with a nice shapes.
• Text and background
o Organized your design. Make used of the different text alignment on an
image(s).
• Clean and clear background
o Less is more. Focus on what matters. Use a clean and clear background
for the message to be readable.

Module 6 – Page 12
MODULE 6: Use Image Manipulation Techniques
ACTIVITY SHEET

Assessment: (Post-Test)

I. Directions: Identify every item below if it belongs to the elements of design or the
principles of design. Write E if it belongs to the Elements of Design and write P if it
belongs to the Principles of Design.

_____1. Color _____6. Texture

_____2. Proximity _____7. Contrast
_____3. Direction _____8. Size
_____4. Alignment _____9. Balance
_____5. Space _____10. Line

I. Directions: Read the statements below an answer. Write “T” if the statement
is true and write “F” if the statement is false.
_____1. Infographic is a presentation of data and information that use the different
elementsof design to make data easily understandable at a glance.
_____2. Pixel refers to the number of pixels in an image or the detail an image holds.
_____3. Visual Message Design can help with effectiveness of delivery of a message.
_____4. Lossy compression retains values and manages to lower file size.
_____5. In Elements of Design, large elements gives more significant than the small one

ACTIVITY 2: GATHERING CLIENT INFORMATION

You were approach by a politician and asked you to make election tarpaulin
for him. In this case, write down at least five (5) questions that you would want to ask
him/her before making the tarpaulin.

Five (5) Questions:

1.

2.

3.

4.

5.

Module 6 – Page 13
RNED

ACTIVITY 3: CREATING ELECTION PARAPHERNALIA

Make a tarpaulin layout based on the importations you gathered on activity 2.

Rubric for Tarpaulin Design

Criteria 4 3 2 1
Graphics are all in Most graphics Most graphics Many graphics are
focus and the are in focus and are in focus, but not clear or are
content easily the content the content is not too small.
Graphics − viewed and identified
Clarity easily viewed easily viewed
and identified and identified

The tarpaulin The tarpaulin The tarpaulin The tarpaulin

design is design is design is design is
exceptionally attractive in acceptably distractingly messy
attractive in terms terms of design, attractive thoughit or very poorly
Attractiveness of design, layout, layout, and may be a bit designed. It
and neatness. neatness. messy. is not attractive.

ACTIVITY 4: CREATE AN AWARENESS CAMPAIGN AGAINST WATER POLLUTION

Directions: Design an Awareness Campaign against water pollution. You can used
any image editing tools (Photoshop, Gimp , etc.)
Size: 4ft x 8ft

Rubric for Tarpaulin Design

Criteria 4 3 2 1
Student can Student can Student can Student appears to
Content accurately answer accurately answer accurately answer have insufficient
all questions most questions about 75% of knowledge aboutthe
related to factsin related to factsin questions related to facts or processes
the poster and the poster and factsin the poster used in the tarpaulin
processesused to processesused to and processesused design.
create the tarpaulin create the tarpaulin to create the
design. design. tarpaulin design.

Graphics are allin Most graphics are in Most graphics are in Many graphics arenot
Graphics − focus and the focus and the focus, but the clear or are too small.
content easily content easilyviewed content is noteasily
Clarity viewed and and viewed
identified identified and identified
The tarpaulin design The tarpaulin design The tarpaulin The tarpaulin design
Attractiveness is exceptionally is attractive in terms design is is distractingly messy
attractive in terms of of design,layout, and acceptably or very poorly
design,layout, and neatness. attractive though it designed.It is not
neatness. may be a bit attractive.
messy.

Free of Mostly free of Frequent Too frequent

Mechanics grammatical errors grammatical errors grammatical errors grammatical errors