 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 in every page of
this module.
2. Write on your notebook the concepts about the lessons. Writing enhances
learning, that 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.

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 the separate sheet of paper and answer the following:

1. What are the two (2) advance technique in MS Word?
2. Give at least 3 advance and complex calculations in Excel
3.What are the three (3) advance technique in MS Powerpoint?

Lesson 1: Basic Principles of Graphics and Layout

Graphics: are visual images or designs that includes pictorial representation of data,
typesetting and the 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
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 shows 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

Repetition
Consistency

Rhythm

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

*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 image 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 graphic file format that supports lossless
data compression.
Vector-Based Files
Store an image as mathematical formulas
Common types of Vector-Based File Formats
 Drawing Interchange Format (DXF) – commonly used in computer-aided design software
programs such as those used by engineer 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 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 right images size
3. Caption

Image Manipulation Techniques

1. Cropping – removing unwanted outer areas help 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 image makes 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 image Text wrapped around image

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 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 and upload photo for sharing
without account.
Flickr It offers free hosting that provides editing tools
and allows you to organize your images into
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
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 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 the 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 learn 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 infographic, 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
in your laptop or cellphone.
Activity 2: Make your own infographic, poster, banner or logo by applying the principles of
graphics and layout.
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 graphic 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”

SketchUp Tutorial

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

References :
https://www.thefreedictionary.com
Logos-Download.com
https://makeawebsitehub.com/free-photo-hosting/
Empowerment Technology Curriculum Guide