SENIOR HIGH SCHOOL

EMPOWERMENT TECHNOLOGY
ROY B. CAUBAT
Author
WEEK 5

⮚ Evaluate existing websites and online resources based on the principles of layout,
graphic, and visual message design.

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

Before starting the module, I want you to set aside other tasks that will disturb you
while enjoying the lessons. Read the simple instructions below to successfully enjoy the
objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated on every page of this module.
2. Write in your notebook the concepts about the lessons. Writing enhances learning, which is
important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let your facilitator/guardian assess your answers using the answer key card.
5. Analyze conceptually the posttest and apply what you have learned.
6. Enjoy studying!

You will 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.

After going through this module, you are expected to:

1. identify the basic principles of graphics and layout
2. differentiate the elements of graphic design
3. identify different graphic and text file formats
4. apply the techniques of image manipulation
5. upload and share images using different hosting platforms and;
6. create infographics, logo, poster, and banner.

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 1

WEEK 5
Directions: Choose the letter of the correct answer. Write the chosen letter on a separate sheet
of paper.
1. It is the visual weight of objects, texture, colors, and space is evenly distributed on the
screen.
a. balance c. proportion
b. movement d. unity
2. Refers to distance or closeness between elements that shows the connection and convey
the visual message.
a. balance c. proportion
b. movement d. unity
3. Refers to visual elements creating motion and guide the viewer’s eyes in certain
direction.
a. balance c. proportion
b. movement d. unity
4. Refers to the relative size and scale of the various elements in a design.
a. balance c. proportion
b. movement d. unity
5. This file format is commonly used method of lossy compression for digital images.
a. .jpg c. .png
b. .bmp d. .gif
6. It is a raster graphic file format that supports lossless data compression.
a. .jpg c. .png
b. .bmp d. .gif
7. What image online format can display simple animation?
a. .jpg c. .png
b. .bmp d. .gif
8. A text file format that is widely used for read-only file sharing
a. .doc c. .html
b. .pdf d. All of the above
9. Which of these online platforms offers a free hosting that provides editing tools and
allows you to organize your images into album?
a. Google photos c. Flickr
b. Tinypic d. Dropbox
10. Which of the following image manipulation techniques can adjust the tonal range and
correct the exposure of an image?
a. Cropping
b. Compression and Resizing
c. Brightness and Contrast
d. Filters

Use a separate sheet of paper and answer the following:

1. What are the two (2) advanced techniques in MS Word?

2. Give at least 3 advance and complex calculations in Excel
3. What are the three (3) advanced techniques in MS Powerpoint?

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 2

WEEK 5
Lesson 1: Basic Principles of Graphics and Layout

Graphics: are visual images or designs that include a pictorial representation of data,
typesetting, and graphic arts. Images that are generated by a computer are called computer
graphics.

Layout: It is the process of planning and arranging graphics that deals in the arrangement of
visual elements on a page.

1. Balance – the visual weight of objects, texture, colors, and space is evenly distributed on
the screen. It may be in the form (Symmetrical and Asymmetrical)
2. Consistency – these are the repeating visual element on an image or layout to create unity
in the layout or image. It may be in the form of (Pattern, Repetition, and Rhythm)
3. Emphasis – An area in design that may appear different in size, texture, shape, or color to
attract the viewer’s attention.
4. Movement – refers to visual elements creating motion and guide the viewer’s eyes in a
certain direction.
5. Proportion – refers to the relative size and scale of the various elements in a design.
6. Unity – refers to distance or closeness between elements that show the connection and
convey the visual message.
7. Variety – this uses several design elements to draw a viewer’s attention.

Examples:

Symmetrical

Balance Asymmetrical

Pattern

Consistency
Repetition

Rhythm

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 3

WEEK 5
 Different in size

Emphasis

Different in shape

Movement point the way

Movement

Shapes increasing in size

Close with each other

Relate with each other

Unity

Same in color

Variety in shape

Variety in sizes

Variety

Variety in color

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 4

WEEK 5
 *All illustrations are created by the writer using MS Word.

Infographic

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.

Principles in Creating Infographic

1. Be Creative

2. Be Unique

3. Be Informative/Persuasive

4. Be Attractive

5. Make It Simple

Lesson 2: File Formats

Online File Formats For Images And Text

Graphic files store an image and are divided into two basic types:

⮚ Raster-based files

⮚ Vector-based files

Raster-Based Files

→Stores the image as a collection of pixels

→Cannot be scaled without distortion

Common types of Raster-Based File Formats

⮚ Joint Photographic Experts Group (JPEG) – is a commonly used method of lossy

compression for digital images. JPEG files are good for photographic images as well as
images for uploading on the internet or sending through email.

⮚ Tagged Image File Format (TIFF) – A file format for storing images such as photographs and
line art. File size can be huge. It is commonly used when sending images to be included on
printed books, brochures, or magazines.

⮚ Graphic Interchange Format (GIF) – a lossless format for image files that supports both
animated and static images.

⮚ Portable Network Graphic (PNG) – is a raster graphics file format that supports lossless
data compression.

Vector-Based Files

Store an image as mathematical formulas

Common types of Vector-Based File Formats

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 5

WEEK 5
⮚ Drawing Interchange Format (DXF) – commonly used in computer-aided design software
programs such as those used by engineers or architects.

⮚ Encapsulated PostScript (EPS) – widely used in desktop publishing software programs.

⮚ Shapefiles (SHP) – uses vector coordinates to store non-topological geometry and attribute
information for features.

Text Files

Often created in word processing software programs

Common types of text files formats

⮚ Proprietary formats (Microsoft Word Files) – carry the extension of the software in which
they created
⮚ Rich Text Format (RTF) – supported by a variety of applications and saved with formatting
instructions
⮚ Portable Document Format (PDF) – contains an image of the page, including text and
graphics. It is widely used for read-only file sharing. Adobe Acrobat is the most common
popular PDF file application.

Lesson 3: Image Manipulation

Principles and Basic Techniques of Image Manipulation

Image Manipulation Principles

1. Choose the right file format
2. Choose the size of the right image
3. Caption

Image Manipulation Techniques

1. Cropping – removing unwanted outer areas helps you focus on your subject image. It is
also a way to get the important details.
2. Color Balance – manipulating color and adjustment is a great way to match the texture
of color to the image.
3. Brightness and Contrast – adjustments of tonal range can correct the exposure of an
image
4. Compression and Resizing – resize the image to make it proportionate and realistic.
5. Filters – adding effects in an image makes it more attractive and catch the viewer’s
attention.
6. Change the Background – change the background if it does not match the image.
7. Shadow – this effect will make the image realistic.

Combining Text, Graphics, And Images

Text overlaid on the image Text wrapped around the image

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 6

WEEK 5
 Text and image intersect Text and image aligned

Text and image in repeating shapes

*All images taken from Pixabay, Licensed under Creative Commons.

*Images are edited by the writer for an appropriate example

Basic Image Manipulation Using Offline or Open-Source Software

SketchUp GIMP Adobe Picasa Pixen

Photoshop

*All logo images taken from Wikimedia Commons, Licensed under CC

Uploading, Sharing and Image Hosting Platforms

Sites that offer free image hosting and make the process of uploading and sharing your images
easier than ever.

Imgur A hosting platform that can store an

unlimited number of photos without
expirations.
Google It is one of the best image hosting services for
photos uploading high-quality photos in large
quantities.

Dropbox It is a free cloud storage provider that

provides you with shareable links to
individual files or folders.

Tinypic A kind of free image hosting service that can

upload photos for sharing without an
account.

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 7

WEEK 5
Flickr It offers free hosting that provides editing
tools and allows you to organize your images
into an album.

*All logo images taken from Wikimedia Commons, Licensed under CC

Activity 1: Find me!

Identify the principles in graphics and layout. Choose your answer inside the box below.
Write your answer on a separate sheet of paper.

Balance Consistency Emphasis

Movement Unity Variety

1. 6.

2. 7.

3. 8.

4. 9.

5. 10.

*All illustrations are created by the writer using MS Word.

Activity 2: Group me!

Classify the following file formats as either RASTER, VECTOR, or TEXT file formats.
Choose your answer in the given legend below. Write your answer on a separate sheet of paper.

A. RASTER B. VECTOR C. TEXT

1. .txt 6. .jpeg
2. .png 7. .doc
3. .pdf 8. .html
4. .eps 9. .tif
5. .rtf 10. .dxp

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 8

WEEK 5
Activity 3: Arrange me!

Play the anagram below. Arrange the given jumbled letters to reveal the exact words or
names regarding image manipulation. Write your answer on a separate sheet of paper.

Image Manipulation Open-Source software Hosting Flatforms

Techniques
1. TIERLFS 1. BAEOD TPSHPHOOO 1. YNCIPTI
2. HBSSGERTNI 2. ACPIAS 2. LFKCRI
3. SNGRIIEZ 3. TCPUSKHE 3. PROXBDO
4. ORPIGNCP 4. MPIG 4. UIMRG
5. LROOC ABCNLEA 5. XPNEI 5. LOGEOG TOSOPH

In creating an infographic you need to consider the principles of graphics and layout,
such as balance, consistency, emphasis, movement, unity, and variety in order to make your
infographic more artistic and informative.

These are the file name extension of the following formats.

Joint Photographic Experts Group .jpg

Tagged Image File Format .tif
Portable Network Graphics .png
Graphics Interchange Format .gif
Drawing Interchange Format .dxf
Encapsulated PostScript .eps
Shapefiles .shp
Microsoft Word Files .doc
Rich Text Format .rtf
Portable Document Format .pdf
Web Page Source Text .html

Image manipulation can be done through Offline or Open-Source Software such as

Sketchup, GIMP, Adobe Photoshop, Picasa, and Pixen. These are some of the popular and
useful software to create your desire images.

In order to upload and share your images/photos, we have a lot of hosting platforms
online like Imgur, Google Photos, Tinypic, Dropbox, and Flickr.

Let us see if you have learned from our discussion!

In this activity, you will apply the knowledge and skills that you have learned through
our discussion. Follow the instruction and enjoy your journey!
-Create original or derivative ICT content from existing images, text, and graphic elements for
use in making infographics, banner, poster, or logo.
Activity 1: Visit the website and Download any offline or open-source software (freeware) that
can be used for image manipulation.
*Note: If you don’t have internet you can use your existing software or application available on
your laptop or cellphone.
Activity 2: Make your own infographic, poster, banner, or logo by applying the principles of
graphics and layout.

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 9

WEEK 5
Activity 3: Upload and Share your own infographic, logo, or banner using any online hosting
platforms.
*Remember: Always update or communicate to your teacher in every activity you have done in
order to guide and assist you.

Directions: Choose the letter of the correct answer. Write the chosen letter on a separate sheet
of paper.

1. It is the visual weight of objects, texture, colors, and space is evenly distributed on the
screen.
a. balance c. proportion
b. movement d. unity
2. Refers to distance or closeness between elements that shows the connection and convey
the visual message.
a. balance c. proportion
b. movement d. unity
3. Refers to visual elements creating motion and guide the viewer’s eyes in certain
direction.
a. balance c. proportion
b. movement d. unity
4. Refers to the relative size and scale of the various elements in a design.
a. balance c. proportion
b. movement d. unity
5. This file format is commonly used method of lossy compression for digital images.
a. JPEG c. PNG
b. TIFF d. GIF
6. It is a raster graphics file format that supports lossless data compression.
a. JPEG c. PNG
b. TIFF d. GIF
7. A text file format that is widely used for read-only file sharing
a. .docx c. .html
b. .pdf d. All of the above
8. A text file format that is widely used for read-only file sharing
a. .doc c. .html
b. .pdf d. All of the above
9. Which of these online platforms offers a free hosting that provides editing tools and
allows you to organize your images into album?
a. Google photos c. Flickr
b. Tinypic d. Dropbox
10. Which of the following image manipulation techniques can adjust the tonal range and
correct the exposure of an image?
a. Cropping
b. Compression and Resizing
c. Brightness and Contrast
d. Filters

To better understand the lesson, watch the video lesson on

https://www.youtube.com/watch?v=Cj0_PBzZ46Q entitled “Basic Principles of Graphics and Layout
(Image and Design for Online Environment”

Sketch Up Tutorial

https://www.youtube.com/watch?v=YGdLwE4Ue-c

SHS EMPOWERMENT TECHNOLOGY ROY B.CAUBAT-AUTHOR Page 10

WEEK 5