Empowerment Technology - Senior High School

Alternative Delivery Mode

Quarter 1 - Module 3: Imaging and Design For the Online
Environment First Edition, 2020

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

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.

Published by the Department of Education – Region X – Northern

Mindanao Regional Director: Dr. Arturo B. Bayocot, CESO V
Development Team of the Module:

Development team of the module

Author: Alan R. Martinez
Author:
Reviewers: Jay Michael A. Calipusan
Alan R. Martinez
Myra Rachelle G. Calipusan
Eric John N. Brandino
Editors:
Illustrator: Jay Michael A. Calipusan Reviewers:
Layout Artist: Alan R. Martinez
Jay Michael A. Calipusan
Myra Rachelle G. Calipusan
Management Team:
Eric John N. Brandino
Chairperson: Dr. Arturo B. Bayocot, CESO III Illustrator
Regional Director
Co-Chairpersons: Dr. Victor G. De Gracia Jr., CESO V Layout
Artist:
Asst. Regional Director
Alan R. Martinez
Mala Epra B. Magnaong
CES, CLMD
Management Team: Himaya B. Sinatao
Members: Dr. Bienvenido U. Tagolimot, Jr. Regional ADM
Coordinator
Printed in the Elson C. Jamero
Philippines by
EPS-Designate-TLE
Department of Education - Alternative Delivery Mode (DepEd-ADM)

Office Address: Masterson Avenue, Upper Balulang, Zone 1, Cagayan de Oro

Printed in the Philippines by: Department of Education – Regional Office 10 City,
Cagayan de Oro, Lalawigan ng Misamis Oriental
Office Address: Zone 1, Upper Balulang Cagayan de Oro City 9000
Telefax: ________________________________________________
Telefax: (088) 880-7071, (088) 880-7072
E-mail Address: [email protected]
E-mail Address: ________________________________________________
Senior High School

Empowerment
Technology
Quarter 1 - Module 3:
Imaging and Design For
the Online Environment

This instructional material was collaboratively developed and reviewed by

educators from public and private schools, colleges, and or/universities. We
encourage teachers and other education stakeholders to email their feedback,
comments, and recommendations to the Department of Education at action@
deped.gov.ph.
We value your feedback and recommendations.

Department of Education ● Republic of the Philippines

Table of Contents
 What This Module is About…………………………………………………………………i
What I Need to Know……………………………………………………………………….i
How to Learn from this Module………………………………………………………….....ii
Icon of this
Module………………………………………………………………………….ii
What I

Know………………………………………………………………………………..iii

Lesson 1:

Evaluate Existing Websites And Online Resources What I Need to

Know…………………………………………..………………………….…1 What's New:
Evaluate the design of Arngren website. ………………………………………2 What Is It:
Basic Principles of Graphics and Layout………………………………………….3 What's
More: Different Principles of Design and Elements of Design Used. (Website)
…………………………………………………...………………………………..7 What Is
It: What is Infographic? …………………………...…………………………………8 What
More: Different Principles of Design and Elements of Design Used (Infographic)
…………………………………………….………………………………….10 What I Have
Learned: Synthesizing Your Learning……..………………………………….11 What I Can
Do: Giving Advice for Good Design ………..…………………………………..12

Use Image Manipulation Techniques

What’s In…………………………………………………………………………..………..13
What I Need to
Know………………………………………………………………………..13 What's New:
Different ways to Manipulate Images…………………………………………14 What Is It:
Photo Editing Software………………………………………………………….14 What’s
More: Gathering Client Information ……………………..………………………....25 What I
Have Learned: Creating Election Paraphernalia…………………………………...25 What I
Can Do: Create an awareness campaign against water pollution…………………26

Summary:
………………………………………………………………………..……...….27
Assessment: (Post -Test) ……………………………………………………….…….……28
Key to Answers:
…………………………………………………………………….………29 References:
…………………………………………………………………………..…….30
What This Module is About

We all know that a graphic design plays a very important role in world today. Everybody
loves beautiful design. Some would say a good design is magical but actually they just use a
set of tools properly and apply the rules to have a good design. Hopefully, this module will
help you improve your creativity in designing, may it be in website, tarpaulin or in infoghaphic.
This module is all about imaging and design for online environment. It covers the
following topics of:
 1. Basic principles of graphics and layout
2. Principles of visual message design using infographics
3. Online file formats for images and text
4. Principles and basic techniques of image manipulation
5. Basic image manipulation using Photoshop or open source software
6. Combining text, graphics, and images
7. Uploading, sharing, and image hosting platforms.

What I Need to Know

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

1. Evaluate existing websites and online resources based on the principles of

layout, graphic, and visual message design. (CS_ICT11/12-ICTPT-Ie-f-7 );

2. 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-8);

3. 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-Ig-h-9)

i
How to Learn from this Module
A guide for you in going throughout the module:

• Carefully read all the lessons.

• Follow the directions and/or instructions in the activities and exercises diligently. •
Answer all the given tests and exercises.
• You can use the internet if you need more information about the lesson.

Icons of this Module

 What I Need This part contains learning objectives
to Know that are set for you to learn as you go
along the module.

What I know This is an assessment as to your level

of knowledge to the subject matter at
hand, meant specifically to gauge
prior relatedt knowledge

What’s In This part connects previous lesson with

that of the current one.

What’s New An introduction of the new lesson through

various activities, before it will be
presented to you

What is It These are discussions of the activities as

a way to deepen your discovery and
understanding of the concept.

What’s More These are follow-up activities that are

intended for you to practice further in order
to master the competencies.

What I Have Activities designed to process what you

Learned have learned from the lesson

What I can do These are tasks that are designed to

showcase your skills and knowledge
gained, and applied into real-life concerns
and situations.

ii

What I Know
Multiple Choice:
Directions: Read and answer the questions below. Write the letter of the correct
answer.
______1. Which principle of design have equal distribution of visual weight?
A. Space C. Proximity
B. Balance D. Alignment
______2. Which principle of design duplicate the characteristics of similar elements?
A. Repetition C. Proximity
B. Balance D. Alignment
______3. Which principle of design refers to lining up the
elements? A. Space C. Rhythm
B. Contrast D. Alignment
______4. Which principle of design use conflicting elements or
colors? A. Space C. Rhythm
B. Contrast D. Alignment
______5. What kind of balance occur when a design have equal graphic
weight? A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______6. What kind of balance occur when a design have unequal graphic
weight? A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______7. What kind of balance occurs when the design elements swirl
out? A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
______8. Which element of design defined by points moving in
space? A. Direction C. Shape
B. Texture D. Line
______9. Which element of design refers to the area that an object
occupies? A. Direction C. Shape
B. Texture D. Line
______10. Which element of design refers to the surface quality of a shape?
A. Direction D. Shape
B. Texture D. Line

iii
______11. Which element of design is used to create emotions to the viewer?
A. Colors C. Size
B. Texture D. Line
______12. Which element of design refers to the relationship of the area occupied
by one shape to that of another?
A. Direction C. Size
B. Texture D. Line
______13. Which principle of design maintains a relationship between items that go
 together?
A. Space C. Repetition, Pattern, and Rhythm B. Balance D.
Proximity
______14. Which principle of design duplicates the characteristics of similar
elements to contribute to design consistency?
A. Space C. Repetition, Pattern, and Rhythm B. Balance D.
Proximity
______15. Which principle of design that is left blank?
A. Space C. Repetition, Pattern, and Rhythm B. Balance D.
Proximity

iv
Lesson

Evaluate Existing Websites And Online

1 Resources

What I Need to Know

Before we can produce a high-quality design project whether designing a
website, designing a tarpaulin, creating banners or logos, we need to know and
follow the basic principles and elements of design. You may ask why? Well, because
people care about the way things look. Take a look at the picture below.

Photo Credit: https://www.carousell.ph/

The picture above shows a good web design website. It uses the different
elements on its design properly. Not only that, the website designer also follows the
rules in organizing and placing the different elements in making website design.

What’s New
Activity 1 – Evaluate the design of Arngren website.
In creating any design, we should always remember the different types of elements to be
used and how to use them properly. Given the picture below, what can you say about the design of
the website? Do you like the design of Arngren website? Why? Why not?
 Photo Credit:
http://arngren.net/

What is It
Basic Principles of Graphics and Layout

The elements and principles of design are the building blocks of a successful
beautiful design. The elements of design are the things or tools that make up a
design while the Principles of design are what we do to those elements.

The Elements of Design

These are the materials or tools to make different designs or Arts.
∙ LINE – Lines are defined by points moving in
space. It can
create a sense of movement or direction in
your design.
Line is can be smooth, rough, straight,
curve, broken, thick
or thin.
Image: "Lines" by Alan R. Martinez

∙ SHAPE – A shape is an enclosed space, the

boundaries of
which are defined by other elements of art like
lines, colors,
values or textures. Shapes can be used to
create patterns
and draw the viewer’s attention.
Image: "Shapes" by Alan R. Martinez

∙ DIRECTION – Applying motion to create the visual illusion of movement. Use

horizontal direction for calmness, stability
and tranquility while vertical direction for
emotions of balance, formality and
alertness.

∙ SIZE (SCALE) – Size is basically the

relationship of the
area occupied by one shape to that of another. Large
elements means more significant than the
small one.

∙ TEXTURE – Texture refers to surface

appearance of an object given by the
dimensions, form, thickness, arrangement,
and amount of its basic parts.

∙ COLOR – Color is light redirected off

objects. It is used to create curiosity and
emotions to the viewer’s. It has three main
characteristics: hue (these are red, green,
blue, etc.), value (lightness/ darkness), and
intensity (saturation, or amount of pigment)
and temperature (warm and cool). 3
Image: "Scale" by Alan R. Martinez

Image: "Texture" by
 Image: "Color" by Alan R. Martinez

Alan R. Martinez
The Principles of Design

These are the rules that help you organize and place the materials to make arts
or designs.
1. BALANCE – Balance in design is the state of equal relationship. It means equal
distribution of visual weight in a design. It can be achieved by adjusting the visual
weight of each element, in terms of size, color, textures, shapes or contrast.
Balance in graphic design provides stability and structure to a design.

Image: "balance" by Alan R. Martinez

There are different kinds of balance:

∙ Symmetrical balance occurs when identical weights are on equal sides of a

composition.

https://www.pexels.com/photo/light-landmark-building
architecture-135018/
∙ Asymmetrical balance occurs when a design have unequal graphic weight on
either side, but those unequal graphics need to balance each other (un-evenly
balanced).

https://pixabay.com/photos/black-and-white-trees-road-path
692155/
 4
∙ Radial balance occurs when the design elements swirl out from a central
axis (emanating from a central point)

https://www.pexels.com/photo/brown-and-black-round-concrete
surface-3602215/

2. PROXIMITY – Proximity maintains a relationship between items that go together.

It helps creates organization by grouping the same elements together or in close
proximity. The elements should be connected visually.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_c
ss_social_login

3. ALIGNMENT – Alignment refers to lining up the elements of a design along the

top, bottom, center or sides of the elements. It allows us to create order and
organization in our design. The whole point of the alignment is that nothing in your
design should look as if it were placed there randomly.

https://www.apple.com/mac/
 5
4. REPETITION, PATTERN, AND RHYTHM – Repetition duplicates the
characteristics of similar elements to contribute to design consistency. It
strengthens a design by tying together individual elements; pattern is a regular
arrangement of alternated or repeated elements like shapes, lines or colors;
rhythm--is a combination of elements repeated, but with variations.

https://pixabay.com/illustrations/circle-district-colorful-structure
2891368/

5. CONTRAST – Contrast refers to the use of conflicting elements or colors while still
remaining harmonious and unified when the artwork is viewed as a whole. It
allows you to give emphasis to key elements in your design.

Fish image from https://pixabay.com/vectors/swordfish-fish

marine-sea-ocean-311074/ modified by: Alan R.
Martinez

6. SPACE – It refers to the area that an object occupies. Both positive and negative
space should be considered in graphic design. White space gives your design
breathing room.

https://www.apple.com
 6

What’s More
Activity 2 – Different Principles of Design and Elements of Design Used. Based on the given
picture below, identify what Principles of Design and Elements of Design being used.

Principles of Design Used

1.
2.
3.
4.
5.

Elements of Design Used

1.
2.
3.
4.
5.

The term Information graphic or Infographic

is a photographic presentations of data and
information that use the different elements
What is It of design to make data easily
understandable at a glance. Infographics
What is Infographic? make complex messages become more
visually appealing to the viewers. https://commons.wikimedia.org/wiki/File:Wom
en_Degraded_in_Music_Videos_Infographics.p ng

Visual Message Design can help with

effectiveness of delivery of a message. It
can lend assistance in presenting your
ideas clearly.

Some Tools For Creating

Infographics

1. Biteable https://biteable.com/infographic/

2. BeFunky https://www.befunky.com/features/infographic-maker/ 3. Visme

https://www.visme.co/make-infographics/ 4. Cacoo https://cacoo.com/

5. Snappa https://snappa.com/create/infographics 6. Canva Infographic

Maker https://www.canva.com/create/infographics/ 7. Google Chart

https://developers.google.com/chart/ 8. Piktochart http://piktochart.com/

9. Infogram http://infogr.am/

10. Mind the Graph https://mindthegraph.com/

 8
Principles of Visual Message Design using Infographics
1. Be unique
∙ Be creative is one of the most important aspect of designing an effective
infographic.
.
2. Keep it simple
∙ Make a design easy to understand. Straight to the point and focus more
on the message.
3. Less is more
∙ Focus on what matters. Keep your text minimal will most likely produce
more impact than a page full of words.
4. Sharing
∙ Share it with your friends. It is the most important and effective thing to
do in making infographic.

Tutorials and trainings in Creating Infographics using Piktochart

1. Visit youtube website. Open your favorite browser and type in

www.youtube.com in the address bar.
2. Search Infographic Tutorials. Type in piktochart infographic tutorials in the
search bar.

2. Watch Tutorials. Select a video and start watching tutorials.

 9

What’s More
Activity 3 – Different Principles of Design and Elements of Design Used. Based on the given
picture below, what can you say about the infographic in terms of design? What is the message of
the infographic?

Screen capture from: https://visual.ly/community/infographic/computers/think-you-click

 10

What I Have Learned

Activity 4 – Synthesizing Your Learning
Answer the following questions based on your learning. Be brief and concise. From your own
understanding, make a list on:

1. What makes a good design?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

2. What makes a good infographics?

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
 11

What I Can Do
Activity 4 – Giving Advice for Good Design
The website below is considered as on of the worst design website of 2018 by
https://www.loungelizard.com/top-5-worst-website-designs-of-2018/. As a student who knew the
different Elements of Design and Principles of Design, what advice can you give to the creator of
arngren website to make it more attractive?

12

Lesson

Use Image Manipulation Techniques

2
 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

13

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

14
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 Group 24- bit Lossy Used for Online
Photographic Experts .jpg, .jpeg photos and / or artwork
.gif 8 – bit Lossless Animated graphics like
banner ads, email images and social
media memes
Graphic
Interchange Format
Considered as best File Format
Portable Network image file type for web .tif, .tiff
Graphics graphics. 24-bit lossless Primarily
.png Up to 24-bit used in photography and
Lossless High-quality Tagged desktop publishing.
transparent web graphics. Image

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.

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

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

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

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

19
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

20
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 blur21

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/

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

23
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.
 24

What’s More
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.

What I Have Learned

Activity 3: Creating Election Paraphernalia

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

Rubric for Tarpauline Design

Criteria 4 3 2 1

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

Attractiveness The tarpaulin The tarpaulin The tarpaulin The tarpaulin

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

25

What I Can Do
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 Tarpauline Design

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

Graphics − Graphics are Most graphics Most graphics Many graphics

all in focus are in focus are in focus but are not clear or
Clarity and the and the the content is are too small.
content easily content easily not easily
viewed and viewed and viewed
identified identified and identified

Attractiveness The tarpaulin The tarpaulin The tarpaulin The tarpaulin

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

Mechanics Free of Mostly free of Frequent Too frequent

grammatical grammatical grammatical grammatical
errors errors errors errors

26
Summary
Elements of Design - Elements of Design are the materials or tools to make
different designs or Arts.
Line – Lines are defined by points moving in space.
Shape – Shape refers to the area that an object occupies
Direction – Applying motion to create the visual illusion of movement. Size (scale) –
Size is basically the relationship of the area occupied by one shape to that of
another.
Texture – Texture refers to surface appearance of an object given by the dimensions,
form, thickness, arrangement, and amount of its basic parts.
Color – Color is light redirected off objects
Principles of Design - Principles of Design are the rules that help you organize and
place the materials to make arts or designs.
Balance – Balance in design is the state of equal relationship
Symmetrical balance occurs when identical weights are on equal sides of a
composition.
Asymmetrical balance occurs when a design have unequal graphic weight on either
side, but those unequal graphics need to balance each other (un-evenly balanced).
Radial balance occurs when the design elements swirl out from a central axis
(emanating from a central point)
Proximity – Proximity maintains a relationship between items that go together.
Alignment – Alignment refers to lining up the elements of a design along the top,
bottom, center or sides of the elements.
Repetition, pattern, and rhythm – Repetition duplicates the characteristics of
similar elements to contribute to design consistency.
CONTRAST – Contrast refers to the use of conflicting elements or colors while still
remaining harmonious and unified when the artwork is viewed as a whole. SPACE –
Space is the part of a design that is left blank.
Infographic -The term Information graphic or Infographic is a photographic
presentations of data and information that use the different elements of design to
make data easily understandable at a glance.
Photo editing Tool - Photo editing Tool and designing software allow you to
manipulate or edit images.
Image file format - 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.
Lossy compression- Lossy compression reduces file size by removing redundant
information means that some data from the image file is lost.
Lossless compression - Lossless compression retains values and manages to
lower file size.
Image resolution - Image resolution refers to the number of pixels in an image or the
detail an image holds.
Pixel - Pixel is just one unit of the whole digital image it is the smallest unit of an
image. Gimp - GIMP is a cross-platform image editor available for GNU/Linux, OS X,
Windows and more operating systems.

27

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.
6. Texture
7.
1. Color Contrast
2. Proximity 8. Size
3. Direction 9. Balance
4. Alignment 10. Line
5. Space
II. 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 presentations of data and information that use the different
elements of 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.

28

Answer Key

Pre-Test Answer Key:

follow the rules or the Principles of Design.

properly. He/She should The website designer should use
the Elements of
Design ) Answers
may vary (

Giving Advice for Good Design : Activity 5

Lesson 1
 .) to give pointers of a good design able
. However, the learner must be question (Answers may
vary, as this is a personal (Infographics) Used.
Synthesizing Your Learning : Activity 4 Lesson 1

.) principles of visual message used to give the

able . However, the learner must be question
(Answers may vary, as this is a personal
(Infographics) Used.
Different Principles of Design and Elements of
Design : Activity 3
Lesson 1

) (Answers may T 15.

F 14.
vary based on T 13.
personal F 12.
T 11.
inclination.
I Part I
Evaluate the
Space E 10.
Contrast color ∙ design of Arngren website P 9.
Alignment Texture ∙ E 8.
Activity 1: Lesson 1 P 7.
Proximity Shape ∙
Asymmetrical Balance E 6.
P 5.
Line ∙ Principles of P 4.
E 3.
Design Elements of P 2.
Design E 1.
Part I
Test - Post
a 15.
c 14.
d 13.
c 12.
a 11.
b 10.
(Website) of Design Used. c 9.
and Elements Different d 8.
d 7.
Principles of Design : c 6.
a 5.
Activity 2 Lesson 1
b 4.
29
 d 3.
a 2.
Test - Pre
b 1.
References:
Toptal.com, “The Principles of Design and Their Importance”, Accessed January 31, 2019, ,
https://www.toptal.com/designers/ui/principles-of-design,

Medium.com/, “10 Basic Principles of Graphic Design”, Accessed January 20, 2019,
https://medium.com/@anahatrawal/10-basic-principles-of-graphic-design-b74be0dbdb5
8

Hawaii.edu, “Elements of Design”, Accessed January 19, 2019,

http://www2.hawaii.edu/~meidor/art_101/elements_of_design.html

99designs.com, “The 6 elements of design”, Accessed January 19, 2019,

https://99designs.com/blog/tips/elements-of-design/

Ivanexpert.com ,” The 5 Types of Digital Image Files: TIFF, JPEG, GIF, PNG, and Raw
Image Files, and When to Use Each One”, Accessed January 20, 2019,
https://www.ivanexpert.com/blog/2010/05/the-5-types-of-digital-image-files-tiff-jpeg-gif-png
and-raw-image-files-and-when-to-use-each-one/

Designshack.net ,“Designing an Infographic? 5 Elements You Must Include”, Accessed

January 19, 2019, https://designshack.net/articles/graphics/5-key-infographic-elements/

Imagify.io ,” Lossy vs Lossless Image Compression ”,Accessed January 19, 2019,

https://imagify.io/blog/lossless-vs-lossy-image-compression/

“Desource.uvu.edu, “Visual Design Theory & the Web”, Accessed January 27, 2019,
http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/03/l03_04.html?m=1

Johnlovett.com, “Original Design Overview”, Accessed January 27, 2019,

https://www.johnlovett.com/design-overview

Creativemarket.com, “10 Basic Elements of Design”, Accessed January 27,

2019, https://creativemarket.com/blog/10-basic-elements-of-design
Char.txa.cornell.edu, “Art, Design, and Visual Thinking”, Accessed January 28, 2019,
http://char.txa.cornell.edu/language/PRINCIPL/principl.htm

En.wikipedia.org, “Visual design elements and principles”, Accessed January 28, 2019,
https://en.wikipedia.org/wiki/Visual_design_elements_and_principles

99designs.com, “The 7 principles of design”, Accessed January 29, 2019,

https://99designs.com/blog/tips/principles-of-design/

Venngage.com ,“What is an Infographic? Examples, Templates & Design Tips”, Accessed

January 20, 2019, https://venngage.com/blog/what-is-an-infographic/
Wmich.edu,“ Using GIMP to Crop and Resize an Image”, Accessed January 29, 2019,
https://wmich.edu/helpdesk/webgimp

Gimp.org ,“Tutorials”, ”, Accessed January 20, 2019, https://www.gimp.org/tutorials/

30