Empowerment Technology

Student Learning Packet

Name: ______________________________________ Section: ______________

Preliminaries

Module #4- Visual Design: Imaging and Layout Design

Module Overview

Images and graphics can change the presentation and appearance of a document and can easily
attract readers. With the help of design elements, achieving the maximum viewing efficiency of a photo is
achievable. To realize this goal, the principles of design have been established. These principles include
balance, contrast, unity, proportion, and rhythm.
In this module, you’ll learn about image editing tools, saving products in a storage device, and
create images that can be shared online with different users.

Learning Competencies At the end of this module, you are expected to:
a. Use image manipulation techniques on existing images to change or enhance their current state
to communicate a message for a specific purpose.
b. Create an original or derivative ICT content to effectively communicate visual message in an
online environment related to specific professional tracks.

Instructional Materials:
Sagun, Marc Lhester, Bandala,Argel.Empowerment Technology 2nd edition Diwa Learning System INC.
Legaspi Village, 1229 Makati City Philippines.

Before you proceed to these lessons, you are required to answer the pre-assessment
test. This test will check your prior learnings about the topics and what you need
more to improve your learnings. Encircle the letter of your best choice in each time.

Pre-Assessment

1. Which phrases is/are not true about Photo Editing means?

a. Changing of images c. make completely images
b. Create logos, icons, etc. d. Photo manipulation
2. Which components of GIMP use to place the image for editing.
a. Work area b. tool box c. layers d. gradients
3. Which component of GIMP use for editing, cropping, and making image enhancement?
a. Work area b. tool box c. layers d. gradients
4. Which component of GIMP creates another image as it forms into layers?
a. Work area b. tool box c. layers d. gradients
5. Where do you have to save your edited image?
a. Select tool b. file c. save as d. opening image file
 INTRODUCTION

Good morning, nice to see you again, and you are now in the 4th week of your learnings.
This time you will learn another topic about image manipulation and ICT’s derivative
content. Another set of lessons you will encounter today. Before you start, take a look first
at the pictures below. Give your opinions based on the given questions below.

1. Motivation

These two examples of the picture above, the left side shows the original form of an image while on the
right side, the image form into a mockup image. 
1. What do you think is the name of this method and technique?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. How this is useful to you as it applies to your professional track? 
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

Great! You Made It

2. Linking Statement

At the end of this module, you'll learn how to manipulate techniques

on existing images to change or enhance their current state and
create an original or derivative ICT content to effectively
communicate the visual message in an online environment related to
specific professional tracks.

INTERACTION
 Learning Activities

Take a look at these learning materials, read and understand each topic these will
guide you and help you while proceeding to your exercises and drills part. Good luck
and have fun.

1. Reading materials/ Concept Notes

Image Manipulation
Image editor- an application that contains tools that can alter digital photos and inages.
To know how to use the GNU Image Manipulation Program (GIMP), a free image editing software, and
Google SketchUp.
The Components of the GIMP
1. The work area of the editor is the spacious area in the middle. When an image is opened, the
whole of the work area is occupied.
2. The tool box is located at the left side of the window and is tiled vertically. This small window
contains various tools for editing, cropping, and making image enhancements.
3. The layers window is located at the right side of the application. It contains layers of the images
in the work area. Layers are defined as another image that is mixed or combined with another
layer.
Other components of the GIMP are the tool options (4) and
the brushes/ patterns/ gradients (5)

GIMP Manipulation
1. Opening Image Files – at the upper portion of the
GIMP editor, press the File option. Then choose the directory where you are going to save the
image you are about to edit.

2. Select tool – select the crop tool from the tool box.
Select the area that you want to enclose while dragging
left-click across the image.

3. Erase tool- select erase tool from the tool box. Then hold
the left mouse button and drag it across the image.
 4. Paintbrush tool – select the paintbrush tool from the tool box. Then hold the left mouse button
and drag it across the image. The paint tool is similar to the erase tool.

5. Saving your work – from the file option, select the Save
As option and save your work in the desired directory.

Combining Text and Image by Using the Text Tool

1. Select the Text tool in the tool box window.
2. Set the properties of the text to be inserted in the lower part of the tool box.
3. Click the area where you want your text to appear.
4. Type the text you want to appear with the image.

SketchUp- (formely Google SketchUp) is a 3D modeling software developed by google That you can use
for drawing applications such as engineering drawing, architectural and interior design, network design,
and civil design.
Creating a New Drawing
At the upper left corner, press the File option. Then click New. A blank work area will appear with a 3D
guide lines for x, y, and z-axes.

Common Shortcuts
1. Changing the camera view – in the workspace, click and hold the mouse wheel, and then drag the
mouse to change the view angle into a 3D space.
2. Changing the camera position – in the workspace, hold the Shift button, and then click and drag
the mouse wheel to change the camera position.
3. Zooming – in the workspace, scroll the mouse wheel to zoom in and out.
4. Using the Line Tool- this is used to draw straight continuous lines in 3D space. If the lines are
closed in a loop, the enclosed area will be converted in a plane and will be shaded.
5. Using the Push or Pull tool –this is used to extrude or protrude a plane from the base. A depth is
produced when this tool is used.

6. Using the Move tool – this is used to translate the object in the workspace. Select the object and
the Move tool. After which, you can freely hold the left mouse button and drag the object
anywhere in the workspace.
7. Using the Rotate tool – the Rotate tool is used to rotate an object with a given axis.
8. Using the Scale tool – this is used to increase or decrease the size of an object. Select the object
and the Scale tool.
Web Design Principles and Elements
To create an effective Web site or Web page, the designer of the Web site must instill a number of
pointers. The designer should also make the Web site eye-catching. The Web site should make site
visitors curious so that the information presented on the Web site is widely disseminated. Here are the
factors that greatly contribute to this goal.
1. Purpose – a Web site can be categorized primarily in terms of the goal it aims to fulfill. Web sites
can be categorized into different types and functions depending on the purpose they serve the user
or audience.
2. Communication – the primary objective is to absorb as much valuable information as possible in
the shortest amount of time. Thus, the information or text on a Web site should be concise and
direct to the point. The arrangement of the text should be organized in a manner that would entice
readers.
3. Typefaces – this is an essential factor in Web site design because this is considered the most
dominant and noticeable in terms of visuals. Typeface deals with text format, text style, and text.
The appearance of text can greatly contribute to the perception of the visitors to the Web site.
4. Colors –these enhance the experience of visitors of the Web site. The appropriate combination of
the foreground color and background color can produce a better viewing experience not only in
the images and pictures but also in the texts.
5. Images- image alone placed on the Web site can deliver a complete message that the Web sites
wishes to communicate to the audience.
6. Navigation – navigation refers to the facility that the audience can use to go through the Web site
and its subpages. There are several ways on how to create an effective and good navigation
system on a Web site.
7. Layouts – refers to the physical arrangement of the content and elements on a Web sites. There
are various ways on how to do an effective layout on a Web site, and typically, these ways are
determined by the creator or developer. Possible layout consideration are presented here:
a. Grid – without direction or organization, placing the content of Web site will most likely
appear chaotic.
 b. F-Pattern – based on studies, human vision flows like the letter F. this means that human tend
to look heavily at the left side of a visual material more than the right side. Furthermore,
humans tend to look at the upper portion than the lower portion of the visual material more
than the right side.
c. Mobile – the popularity of using mobile devices in viewing Web content is increasing. This is
because of the portability and convenience brought about by mobile devices to their users.
8. Load Time – another basis for the success of a Web site is the time that the Web site will load or
appear onto the viewers’ display device. Nowadays, people demand information at a very fast
pace. If the Web site takes some time to load, most especially if there are too much content, the
user will most likely search for another source.
Exercises and Drills

Good job you made it, you are now in your activities section and doing
these correctly, you learned much more from today's lessons. Do it so
now this may challenge you, perhaps.

Activity 1
For your familiarization with the Components of the GIMP (GNU Image Manipulation
Program) using Google SketchUp. Basic knowledge on how to operate these 5
components based on your learnings about Image Manipulation. Read the sentences below and give what
components of GIMP indicated?

___________ 1. Illustrate image which gives quite a bit of information about the image.
___________ 2. This section can be displayed by selecting layers and channels from image.
____________3. Clicking on the Active foreground Color or Active Background Color patches in the
Toolbox window, bringing up the Color Selection.
____________4. This displayed by clicking on the Active Brush icon in the Toolbox window.
____________5. Clicking on a gradient from the dialog makes it appear as the new active gradient in the
Toolbox.

Activity 2
Here are the factors that are considered in authoring a Web site. Based on your idea, which is more
important? Rank them from 1 to 8, 8 being the most important.
___________ Load Time ___________ Colors
___________ Layout ____________ Typefaces
___________ Navigation ____________ Communication
___________Images ____________ Purpose
Justify your ranking
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
Processing Questions:
1. There are many useful online tools that can make our tasks easier. If you were to develop a new
online tool, what would it be? Describe.
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. How would that online tool be helpful to others?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________

INTEGRATION
Closure/Synthesis
What You Learned Today
Direction: Think about what you did in your two days working on your module. Write 3 sentences
describing what you learned. You may choose any topic for this lesson.

Day1:___________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
______________________________________________________________________________

Day2:___________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
____________________________________________________________

Reflection Guide
How can we make use of social networking sites as a platform for social change? Cite examples of people
who have made their personal social media accounts as tools to effect social change. Write your opinions
inside the box.

INTERVENTION
Post Assessment
It is your final assessment test. You have already learned the lessons well you can now answer the ten
questions below. You can choose your answer by encircling the letters of your best choice.
1. What do you call the art and practice of planning and projecting ideas and experiences with visual
and textual content?
a. Artistic c. creativity
b. Graphic design d. technology
2. Examples of Presentation/Visualization. to build quickly from concise, well-presented content
from top experts.
a. Mind Meister c. Zoho
b. Prezi d. Slideshare
3. Which phrases is/are not true about Photo Editing means?
c. Changing of images c. make completely images
d. Create logos, icons, etc. d. Photo manipulation
4. Which components of GIMP use to place the image for editing.
b. Work area b. tool box c. layers d. gradients
5. Which component of GIMP use for editing, cropping, and making image enhancement?
a. Work area b. tool box c. layers d. gradients
6. Which component of GIMP creates another image as it forms into layers?
b. Work area b. tool box c. layers d. gradients
7. Where do you have to save your edited image?
b. Select tool b. file c. save as d. opening image file
8. Which principle of design enhances the view of the text on a Web site lively and enticing for
viewers?
a. Colors b. Images c. Communication d. Purpose
9. In what way an Image alone placed on the Web site can deliver a complete message that the Web
site wishes to communicate to the audience.
a. Images with proper balance, color, and contrast can deliver great impact and information to
the audience.
b. The physical arrangement of the content and elements on Web site can deliver a great impact
on the audience.
c. The hierarchical organization of information can deliver great impact on the audience.
d. The choices above are true and it applies to the principle of image design.
10. The hierarchical organization of information users can logically anticipate the location of
information. Which design indicated?
a. Typefaces b. Layouts c. Navigation d. Colors