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.

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

1
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/

2
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. Image: "Scale" by Alan R. Martinez

 TEXTURE – Texture refers to surface appearance of an

object given by the dimensions, form, thickness,
arrangement, and amount of its basic parts.
Image: "Texture" by Alan R. Martinez
 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).
Image: "Color" by Alan R. Martinez

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

7
What is It

What is 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. 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.
https://commons.wikimedia.org/wiki/File:Wom
en_Degraded_in_Music_Videos_Infographics.p

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 tutorial

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
Deadline: Today, October 20, 2023
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
Deadline today October 20, 2023

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 .jpg, 24- bit Lossy Used for Online photos and / or
Photographic .jpeg artwork
Experts
Group

Graphic .gif 8 – bit Lossless Animated graphics like banner

Interchange ads, email images and social
Format media memes

Portable .png Up to Lossless High-quality transparent web

Network 24-bit graphics. Considered as best
Graphics image file type for web graphics.

Tagged .tif, 24-bit lossless Primarily used in photography

Image .tiff and desktop publishing.
File Format

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 blur

21
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 I Have Learned

Activity : Creating Election Paraphernalia- Deadline: November 3, 2023

Make a tarpaulin layout based on Election by using a free-to-use online graphic design tool.

Criteria 4 3 2 1
Student can Student can Student can Student appears
Content accurately accurately accurately to have
answer all answer most answer about insufficient
questions questions 75% of knowledge about
related to facts related to facts questions the facts or
in the poster in the poster related to facts processes used
and processes and processes in the poster in the tarpaulin
used to create used to create and processes design.
the tarpaulin the tarpaulin used to create
design. design. the tarpaulin
design.
Graphics are all Most graphics Most graphics Many graphics are
Graphics − in focus and the are in focus and are in focus but not clear or are
content easily the content easily the content is not too small.
Clarity viewed and viewed and easily viewed
identified identified and identified
The tarpaulin The tarpaulin The tarpaulin The tarpaulin
Attractiveness design is design is design is design is
exceptionally attractive in acceptably distractingly
attractive in terms of design, attractive messy or very
terms of design, layout, and though it may poorly designed.
layout, and neatness. be a bit messy. It is not
neatness. attractive.
Free of Mostly free of Frequent Too frequent
Mechanics grammatical grammatical grammatical grammatical
errors errors errors errors

25
29