SUBJECT EMPOWERMENT TECHNOLOGIES

MODULE NUMBER 5
TITLE IMAGING AND DESIGN FOR ONLINE ENVIRONMENT
OVERVIEW In creating a web page, it is like creating of work of art, there are certain
INTRODUCTION things that you need to consider in order to get your message across. In
this module you will learn the principles of graphic layout and design and
some techniques of image manipulation that would help you create a web
page or infographics that could catch the attention of your viewer.
CONTENT STANDARD The learners demonstrate an understanding of:
ow to manipulate text, graphics, and images to create ICT content intended
for an online environment
PERFORMANCE The learners shall be able to:
STANDARD at the end of the 2-week period independently apply the techniques of
image manipulation and graphic design to create original or derivative ICT
content from existing images, text and graphic elements for use in specific
professional tracks.
LEARNING At the end of the module, the student should be able to:
OBJECTIVES 1. evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
2. use image manipulation techniques on existing images to change
or enhance their current state to communicate a message for a
specific purpose.
3. create an original or derivative ICT content to effectively
communicate a visual message in an online
4. environment related to specific professional tracks
 Content and Discussion

Graphic design uses visual compositions to solve problems and communicate ideas through typography,
imagery, color and form (Cann, 2018). It can be used by companies to promote and sell products through
advertising, by websites to convey complicated information in a digestible way through infographics, or by
businesses to develop an identity through branding, among other things (Malvik, 2020).
Images
An Image is a representation
of the external form of a
GRAPHICS AND LAYOUT person or thing in art.
Images may be 2-
dimensional, such as a
photograph or screen
display, or 3-dimensional, such as a statue or hologram. They may be captured by optical devices such as
cameras, mirrors, lenses, telescopes, microscopes, and natural objects and phenomena, such as the human eye
or water.
Graphics
Graphics are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to
inform, illustrate, or entertain. It can be a photograph, a drawing, a line art, graphical representations, and
typography.
Basic Principles of Graphic Design
Principles of graphic design are set of guidelines that help a design achieve effective composition. These basic
principles aid in creating balance and stability for the piece of work.
 COLOR is used for emphasis or may elicit emotions from viewers. Determined by its hue (name of color),
intensity (purity of the hue), and value (lightness or darkness of hue)

2
 Image source: https://graphicdesign.stackexchange.com/questions/20044/is-there-a-worldwide-applicable-color-emotion-chart

 BALANCE means the equal distribution of weight. In layout, visual weight is determined by the darkness
or lightness, thickness of lines, and size. Balance is crucial to the success of design. There are two kinds of
balance:
o Symmetrical Balance. The visual weight is distributed evenly, either vertically or horizontally. You
can draw a line straight through the middle of the design, and the visual balance would be evenly
distributed.
o Asymmetrical Balance. There is an artistic and different intensity on one side of the page.

 PROXIMITY is simply the process of ensuring related design elements are placed together. Any
unrelated items should be spaced apart. Close proximity indicates that items are connected or have a
relationship to each other and become one visual unit which helps to organize or give structure to a layout
(Smith, 2017).

3
 o White Space is the art of nothing. It is also known as the negative space. It is the portion of a page
left unmarked: margins, gutters, and space between columns, lines of type, graphics, figures, or
objects drawn or depicted.

Image source: http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg

 ALIGNMENT is simply the way visual elements are arranged so that they line up in some way. There are
two basic kinds of alignment; edge and center.
o Edge alignment determines the placement of elements in relation to the edge of the page or canvas.
This can mean the elements are aligned to the left side or right side, but it can also mean they are
aligned to the top or bottom of the page, so long as it uses an edge to organize everything.
o Center alignment aligns all the elements so that an invisible, central line on the page will always be
in the center of the elements.

Image source: https://blog.thepapermillstore.com/design-principles-

alignment/edge-alignment/

Image source: https://blog.thepapermillstore.com/design-

principlesalignment/center-alignment/

4
 REPETITION. The process of repeating elements throughout a design to give a unified look. Repetition
goes with consistency of your design on font, font size, patterns, and colors.
Image source: https://www.pinterest.ph/pin/500532946059674099/

 CONTRAST is the divergence of opposing elements (opposite colors on the color wheel, or value light /
dark, or direction – horizontal / vertical). Contrast allows us to emphasize or highlight key elements in
your design.

HELLO Made use of two clashing colors, can be

hurting to eyes
HELLO

HELLO Made use of two contrasting colors, pleasing

to eyes
HELLO

In the color contrast theory, the

contrasting nuances are directly or
almost directly positioned across one
from another on the color wheel

5
 ACTIVITY TIME!

DIRECTIONS: In this time of the CoViD – 19 pandemic, there is a need to fully inform the public on how to
keep ourselves safe even when we are outside our homes. As a graphic designer of the National Government,
you are tasked to create an infographic material to be distributed to the people. This will be placed in a short-
sized bond paper. You must be guided by the different principles of graphic design while making your
infographic material. Print your work and be guided with the rubric below:

CRITERIA Exceeds Expectation (5) Meets Expectation Needs Work

(3) (1)
Topic/Purpose The topic/purpose of The topic/purpose was The topic/purpose of the
the infographic was somewhat broad and did infographic was not
clear and concise not allow viewer to clear and
understand the purpose. concise.
Data Data of the infographic Data of the infographic Data of the infographic
was accurate and relevant was somewhat accurate was not
to topic and relevant to topic. accurate and was
not relevant to topic
Layout The infographic had The graphics were The graphics had
a great layout, with somewhat applicable to nothing to do with
applicable graphics. the infographic, creating the topic and had a
an average layout. poor layout. There
was an overload of
text.
Color/Font The font was legible, The font was somewhat The font was not
and the color scheme legible, and the color legible, and the
enhanced scheme didn't affect the color scheme
the infographic. infographic. detracted from the
infographic.

(Note: Print your output to be passed to you teacher)

6
 Image Manipulation refers to
a process of bringing changes
IMAGE MANIPULATION to a digitized image for
transforming it to a desired
image. The changes are made
possible by resorting to image
processing. Image manipulation is utilized to create magazine covers and albums from photographs. A single
photograph may be modified to suit the requirement, or several photographs can be combined to form a
collage. Currently, there are numerous software applications ranging from professional applications to basic
imaging software

Principles and Basic Techniques of Image Manipulation

 CROPPING. Cutting parts away to remove distracting or irrelevant elements.

Image source: https://photo-works.net/photo-cropping-techniques.php

7
 COLOR BALANCE. The ambience and the tone of light of the picture (ex. Warm or cool light)
Image source: https://dragon-roost-island.weebly.com/photo-vocabulary.html

 BRIGHTNESS AND CONTRAST. One of the most basic techniques in image editing, making the image
darker or lighter.

Image source: https://pippin.gimp.org/image-processing/chap_point.html

8
 FILTERS. Making the image look sketched, grainy, classic black and white or even let it have neon
colors. This gives your image a twist from its original look.

Image source: https://www.cosmo.ph/entertainment/how-to-choose-the-best-instagram-filter

 CHANGING THE BACKGROUND. Adding background to make your image stand out.

9
 REMOVING THE COLOR. Removing certain colors in your image or desaturating the color of the
image

Image source: http://www.digitalcamerareview.com/review/photoshop-elements-11-premiere-elements-11-review/

 COMBINING TEXT, GRAPHICS AND IMAGE. Adding multiple elements in your layout.
Image source: https://apkhubs.com/en/phonto-text-on-photos-apk

SAMPLE OF MANIPULATED IMAGE

Original Image Manipulated Image

10
 ACTIVITY TIME!

Directions: Take a photo of a landscape and a portrait – be it of yourself, a family member, a friend or a pet.
Create a photo collage where both pictures are edited. Print your work in a short-sized photo paper. Check the
rubric for grading. The following things shall be done on the picture:
Cropping
1. Adjusting brightness and contrast
2. Color balancing
3. Combining text with images preferably positive quotes. Don’t forget to cite the original writer!
4. Changing background for portraits only.

CRITERIA 4 3 2 1
Creativity and The work The work The work The work
Originality demonstrates demonstrates demonstrates demonstrates
superior creativity good use of average use little evidence
Weight: (x2) and originality in creativity and of creativity of creativity
the originality in and originality and originality
selection of the the selection in the in the selection
visuals. of the visuals. selection of of the visuals.
the visuals.
Composition Artwork exhibits Artwork Composition Ideas are
and Design masterful exhibits good demonstrates expressed
execution of composition limited with no unity in
Weight: (x1) balance, and design knowledge of composition.
emphasis, elements. design
pattern, unity, elements
color, and
contrast.
Required All required 4 of the Only 2 of the Only 1 of the
elements elements are requirements requirements requirements
present are met. is met is met. Project is
Weight: (x2) unacceptable.

(Note: Print your output to be passed to you teacher)

11
 EVALUATION
Name: __________________________________________________
Strand Grade Block: _____________________________________ Score: _________________

TEST I. Encircle the letter of the correct answer.

1. Which of the following is not a type of Graphic?
a. Photograph b. Drawing c. Typography d. Color
2. Used for emphasis or may elicit emotions from viewers. Determined by its hue (name of color),
intensity (purity of the hue), and value (lightness or darkness of hue).
a. Color b. Contrast c. Brightness d. Proximity
3. How many types of balance in graphic design?
a. 2 b. 3 c. 4 d. 5
4. Which image manipulation technique is used in the picture?
a. Brightness and Contrast
b. Changing Background
c. Color Balance
d. Inserting Texts

5. What type of image manipulation technique is used if you

want to remove unnecessary parts of a picture?
a. Brightness and Contrast c. Cropping
b. Color Balance d. Removing Colors
6. White space is _______.
a. the art of nothing
b. also known as the negative space
c. is the portion of a page left unmarked
d. All of the above
7. Making the image look sketched, grainy, classic black and white or even let it have neon colors. This
gives your image a twist from its original look.
a. Brightness and contrast c. Filters
b. Color Balance d. Cropping
8. What is the main purpose of changing the background of your image?
a. To make your image stand out
b. To make the image darker or lighter
c. To remove distracting or irrelevant elements
d. To give your image a twist from its original look.
9. What is created when hue is combined with white?
a. Hue b. Shade c. Tint d. Tone
10. Which type of balance has two sides that are balanced but different?
a. Centered b. Asymmetrical c. Symmetrical d. Radial

(Note: Detach/Print this evaluation page to be passed to you teacher.)

12
 References

Cann, Mila Jones. (2018). 8 types of graphic design. Retrieved from

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

Malvik, Callie. (2020, Mar. 9). What is graphic design? A beginner’s guide to
this creative career. Retrieved from
https://www.rasmussen.edu/degrees/design/blog/what-is-graphicdesign/.

Quiambao, Angelito. (2019, Sept. 8). Imaging and design for online
environment. Retrieved from
https://www.slideshare.net/AngelitoQuiambao/imaging-and-design-foronline-environment-169954819

Smith, Matt. (2017). The principles of graphic design: how to use proximity
effectively. Retrieved from
https://www.edgee.net/the-principles-ofgraphic-design-how-to-use-proximity-effectively/

Study.com. (2020). Alignment principle in graphic design. Retrieved from

https://study.com/academy/lesson/alignment-principles-in-graphicdesign.html.

Yundle. (n.d.) Image Manipulation Definition. Retrieved from

https://www.yundle.com/terms-definitions/i/image-manipulation

13