Empowerment Technology MIDTERM

LICEO DE MASBATE
Senior High School Department

Quezon St., Masbate Tel/Fax.: (056) 333-2276 e-mail: liceodemasbateofficial@gmail.com
In the Service of God and Poor
____________________________________________________________
Name of Student/ Grade and Section
REYKARDO LAURIO 11 -A / JAKE JAZON ALMONTE 11 B & C

Name of Teachers
1
Empowerment Technology/ MIDTERM
Park your queries and drop it collectively on any of the following
platforms:
11 – A Teacher’s info:
Email: reykardo.laurio@gmail.com
Facebook Account: Kardz Yu Laurio
Mobile Number: 09108948185
11 – B & C Teacher’s info:

Email: jznalmonte@gmail.com
Facebook Account: Jake Jazon Velo
Mobile Number: 09478128216
DISCLOSING MY PERSONAL INFORMATION IS

STRICTLY PROHIBITED!
2
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 infographic.
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.
Learning Objectives:
At the end of the module, the learners shall 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)
3
Before you start answering the module, I want you to set
aside other tasks that will distract 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 or any writing pad 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.
5. Analyze conceptually the posttest and apply what you have
learned.
6. Enjoy studying!
GOOD LUCK AS YOU BEGIN THE MODULE!
I. MULTIPLE CHOICE:
Directions: Read and answer the questions below. Select the letter
of the best answer from among the given choices.
1. Which principle of design have equal distribution of visual

weight?
A. Space C. Proximity
B. Balance D. Alignment
4
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 has equal graphic
weight?
A. Symmetrical balance C. Asymmetrical balance
B. Linear balance D. Radial balance
6. What kind of balance occur when a design has unequal
graphic weight?
7. What kind of balance occurs when the design elements swirl
out?
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?
B. Texture D. Line
10. Which element of design refers to the surface quality of a
shape?
B. Texture D. Line
11. Which element of design is used to create emotions to the
viewer?
5
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?
15. Which principle of design that is left blank?
Evaluate Existing Websites And

Online 1 Resources
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 on the next page.
6
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.
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? Write your answer in a short bond paper.
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
7
8
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.
• 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.
9
• 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 mean 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 viewers. 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).
10
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.
There are different kinds of balance:

• Symmetrical balance
occurs when identical
weights are on equal
sides of a
composition.
11
• Asymmetrical balance occurs when a design has 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)
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.
12
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.
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.
13
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.
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.
14
What is Infographic?
The term
Information graphic
or Infographic is a
photographic
presentation of data
and information
that use the
different elements
of design to make
data easily
understandable at a
glance.
Infographics make
complex messages
become more
visually appealing
to the viewers.
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.
15
9. Infogram http://infogr.am/
10. Mind the Graph https://mindthegraph.com/
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.
16
3. Watch Tutorials. Select a video and start watching tutorials.
Activity 2 – 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?
17
Activity 3 – 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 infographic?

______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
______________________________________________________
Activity 4 – Giving Advice for Good Design
The website below is considered as one 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?
18
19
Use Image Manipulation
Techniques
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.
• 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
20
that we will be using throughout the lesson 2. Before we go further,
you need to answer the first activity of the lesson
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.
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
21
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.
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.
22
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 run 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.
23
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.
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.
24
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.
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.
25
• Color Adjustment.
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.
26
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.
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.

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
27
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.
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.
28
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.
29
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
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.
30
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
Do a Gaussian blur of 10 pixels.
31
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-bear3336849/
Road : https://pixabay.com/photos/road-scenery-
destination-4125391/
32
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).
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.
33
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.
Combining Text, Graphics, and Images

Combining text, graphics, and images in your design will
make your message clearer.
• Transparent shapes
▪ 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
▪ Used the right font size (not to small and not to big)
and font type in your design and combined it with a
nice shape.
• Text and background
▪ Organized your design. Make used of the different
text alignment on an image(s).
• Clean and clear background
▪ Less is more. Focus on what matters. Use a clean and
clear background for the message to be readable.
34
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. In
a short bond paper.
Five (5) Questions:

1.
2.
3.
4.
5.
Activity 3: Creating Election Paraphernalia

Make a tarpaulin layout based on the importations you gathered on
activity 2.
Rubric for Tarpaulin Design
35
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
has 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.
36
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
presentation 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 refers 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.
37
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.
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.
38

Empowerment Technology MIDTERM

Uploaded by

Copyright:

Available Formats

Empowerment Technology MIDTERM

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Empowerment Technology MIDTERM

Uploaded by

Copyright:

Available Formats

LICEO DE MASBATE

Senior High School Department

REYKARDO LAURIO 11 -A / JAKE JAZON ALMONTE 11 B & C

11 – B & C Teacher’s info:

DISCLOSING MY PERSONAL INFORMATION IS

1. Evaluate existing websites and online resources based on the

GOOD LUCK AS YOU BEGIN THE MODULE!

1. Which principle of design have equal distribution of visual

Evaluate Existing Websites And

Before we can produce a high-quality design project whether

Activity 1 – Evaluate the design of Arngren website

In creating any design, we should always remember the different

The elements and principles of design are the building

The Elements of Design

• LINE – Lines are defined by points moving in space. It can

• SHAPE – A shape is an enclosed space, the boundaries of

• SIZE (SCALE) – Size is basically the relationship of the

• TEXTURE – Texture refers to surface appearance of an

• COLOR – Color is light redirected off objects. It is used to

There are different kinds of balance:

• Radial balance occurs when the design elements swirl out

2. PROXIMITY – Proximity maintains a relationship between

4. REPETITION, PATTERN, AND RHYTHM – Repetition

6. SPACE – It refers to the area that an object occupies. Both

Visual Message Design can help with effectiveness of

Some Tools For Creating Infographics

Principles of Visual Message Design using Infographics

Tutorials and trainings in Creating Infographics using

Activity 2 – Different Principles of Design and Elements of

Answer the following questions based on your learning. Be brief and

1. What makes a good design?

2. What makes a good infographic?

Activity 4 – Giving Advice for Good Design

The website below is considered as one of the worst design

In lesson 1, you have learned how to make a good design by

• How do you manipulate text and images?

Activity 1: Different ways to manipulate images

Photo editing and designing software allow you to

Image file format refer to how data associated to the image

Image resolution refers to the number of pixels in an image

• Crop and Resize an image.

• Brightness and Contrast.

e. You can click on “Edit these Settings as Levels" to bring

d. Type the word “Google” in the image window.

e. Highlight 2 letter “G” and change the color to blue. Next,

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

Do a Gaussian blur of 10 pixels.

• Image Manipulation (Bear on the Road).

Combining Text, Graphics, and Images

Five (5) Questions:

Activity 3: Creating Election Paraphernalia

II. Directions: Read the statements below an answer. Write

1. Infographic is a presentations of data and information that

You might also like