WHAT I NEED TO KNOW
LESSON 2: Imaging and Design for Online
Environment
Graphic design uses visual compositions to solve problems and
communicate ideas through typography, imagery, color and form
6 (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).
What are my goals?
By the end of this lesson, you are expected to:
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 environment.
1 2
4. Which type of balance has two sides that are balanced but
WHAT I KNOW different?
A. Symmetrical C. Asymmetrical
B. Radial D. Centered
You must be excited to flip over the pages and begin with the 5. What is created when hue is combined with white?
lessons. But first, please answer the pre-test to measure what topics A. Hue B. Shade C. Tint
have you known so far. D. Tone
Direction: Read each item carefully and choose the letter of the 6. What type of image manipulation technique is used if you want
correct answer. Write your answers on a separate sheet of paper or to remove unnecessary parts of a picture?
in your notebook. A. Brightness and Contrast C. Cropping
1. A graphic image with a central figure is an example of this B. Color Balance D. Removing Colors
type of composition:
7. What image manipulation technique is done if you change the
A. Balance C. Contrast
color tone of a picture?
B. Alignment D. Symmetry
A. Brightness and Contrast C. Cropping
2. Which statement best defines the principles of graphic B. Color Balance D. Removing Colors
design?
8. What image manipulation technique is done when you
A. These are a set of rules only followed by designers.
desaturate the color of a picture?
B. These are outline of ways designers can use elements
A. Brightness and Contrast C. Cropping
in a composition.
B. Color Balance D. Removing Colors
C. It provides the set of rules on how the graphic design
started. 9. Which of the following manipulation techniques improves photo
D. It is the art and practice of planning and projecting sharpness?
ideas and experiences with visual and textual content. A. Brightness and Contrast C. Cropping
B. Color Balance D. Removing Colors
3. Why do designers use contrast?
A. To show difference between elements of art. 10. What image manipulation technique is done when you adjust
B. To cause controversy in the design world. the overall lightness and darkness of an image?
C. To create harmony and bring elements together. A. Brightness and Contrast C. Cropping
D. To make bright colored compositions. B. Color Balance D. Removing Colors
3 4
WHAT’S IN Answer the following in your notebook:
Look at the numbered images below and answer the questions that 1. What is the story in this graphic novel?
follow. ____________________________________________________
____________________________________________________
2. Who is the main character in the story? How did you know?
____________________________________________________
____________________________________________________
3. What do you think is the profession of the main character? How
did you know it?
____________________________________________________
____________________________________________________
WHAT’S NEW
Lesson 2.1: Graphics and Layout
Images
An Image is a representation of the external form of a 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.
5 6
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).
Image source: https://graphicdesign.stackexchange.com/questions/20044/is-there-a-worldwide-
applicable-color-emotion-chart
7 8
BALANCE means the equal distribution of weight. In layout, White Space is the art of nothing. It is also known as the
visual weight is determined by the darkness or lightness, negative space. It is the portion of a page left unmarked:
thickness of lines, and size. Balance is crucial to the success margins, gutters, and space between columns, lines of type,
of design. There are two kinds of balance: graphics, figures, or objects drawn or depicted.
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.
Asymmetrical Balance. There is an artistic and
different intensity on one side of the page.
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.
PROXIMITY is simply the process of ensuring
Edge alignment determines the placement of
related design elements are placed together. Any unrelated items
elements in relation to the edge of the page or canvas.
should be spaced apart. Close proximity indicates that items are
This can mean the elements are aligned to the left side
connected or have a relationship to each other and become one
or right side, but it can also mean they are aligned to
visual unit which helps to organize or give structure to a layout
the top or bottom of the page, so long as it uses an
(Smith, 2017).
edge to organize everything.
9 10
Center alignment aligns all the elements so that an CONTRAST is the divergence of opposing elements (opposite
invisible, central line on the page will always be in the colors on the color wheel, or value light / dark, or direction –
center of the elements. horizontal / vertical). Contrast allows us to emphasize or
highlight key elements in your design.
Image source: https://blog.thepapermillstore.com/design-principles-alignment/edge-alignment/
Image source:
https://blog.thepapermillstore.com/design-
principles-alignment/center-alignment/
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://learn.g2.com/color-contrast
Image source: https://www.pinterest.ph/pin/500532946059674099/
11 12
WHAT CAN I DO WHAT’S NEW
Lesson 2.2: Image Manipulation
ACTIVITY 2.1: CoViD-19 Infographic
DIRECTIONS: In this time of the CoViD – 19 pandemic, there is a Image Manipulation refers to a process of bringing changes
need to fully inform the public on how to keep ourselves safe even to a digitized image for transforming it to a desired image. The
when we are outside our homes. As a graphic designer of the National changes are made possible by resorting to image processing. Image
Government, you are tasked to create an infographic material to be manipulation is utilized to create magazine covers and albums from
distributed to the people. This will be placed in a short-sized bond photographs. A single photograph may be modified to suit the
paper. You must be guided by the different principles of graphic design requirement, or several photographs can be combined to form a
while making your infographic material. Print your work and be guided collage. Currently, there are numerous software applications ranging
with the rubric below: from professional applications to basic imaging software
(https://www.yundle.com/terms-definitions/i/image-manipulation).
13 14
Principles and Basic Techniques of Image Manipulation COLOR BALANCE. The ambience and the tone of light of the
picture (ex. Warm or cool light)
CROPPING. Cutting parts away to remove distracting or
irrelevant elements.
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://photo-works.net/photo-cropping-techniques.php
Image source: https://pippin.gimp.org/image-processing/chap_point.html
15 16
FILTERS. Making the image look sketched, grainy, classic REMOVING THE COLOR. Removing certain colors in your
black and white or even let it have neon colors. This gives your image or desaturating the color of the image.
image a twist from its original look.
Image source: http://www.digitalcamerareview.com/review/photoshop-elements-11-
Image source: https://www.cosmo.ph/entertainment/how-to-choose-the-best-instagram-filter premiere-elements-11-review/
• CHANGING THE BACKGROUND. Adding background to COMBINING TEXT, GRAPHICS AND IMAGE. Adding multiple
make your image stand out. elements in your layout.
Image source: https://apkhubs.com/en/phonto-text-on-photos-apk
Image source: http://photoshopcctutorial.com/adobe-photoshop-7-0-tutorial-how-to-change-
or-remove-background/
17 18
3. Color balancing
SAMPLE OF IMAGE MANIPULATION 4. Combining text with images preferably positive
quotes. Don’t forget to cite the original writer!
5. Changing background for portraits only.
Rubric
Criteria 4 3 2 1
Creativity The work The work The work The work
and demonstrat demonstrate demonstrate demonstrate
Originality es superior s good use s average s little
creativity
of creativity use of evidence of
Weight: and
(x2) originality in and creativity creativity and
the originality in and originality in
selection of the selection originality in the selection
the visuals. of the the selection of the
visuals. of the visuals.
Original Image Manipulated Image
visuals.
Compositi Artwork Artwork Compositio Ideas are
WHAT CAN I DO
on and exhibits exhibits n expressed
Design masterful good demonstrat with no unity
execution compositio
Weight: es limited in
Activity 2.2: Let’s Do Magic! of balance, n and
(x1) knowledge composition
emphasis, design
pattern, elements. of design .
Directions: Take a photo of a landscape and a portrait – be it of unity, elements.
color, and
yourself, a family
contrast.
member, a friend or a pet. Create a photo collage where Required All 4 of the Only 2 of Only 1 of
both pictures are edited. Print your work in a short-sized elements required the the
requiremen
elements requirement requirement
photo paper. Check the rubric for grading. The following Weight: are ts are met.
s is met. s is met.
things shall be done on the picture: (x2) present
Project is
1. Cropping unacceptabl
e.
2. Adjusting brightness and contrast
19 20
3. Which design principle is seen below?
WHAT I HAVE LEARNED A.
B.
Alignment
Asymmetrical balance
C. Contrast
D. Proximity
You have learned that image editing is an enjoyable activity,
but it entails a lot of patience and creativity. As a photo editor, you
must have an eye for art. Bear in mind that the pictures you will come 4. Which of the following is NOT a way to use contrast in a
up with support the idea that you wish to convey. composition?
A. Placing shapes around a central axis.
B. Pairing different typefaces together.
C. Changing the color values.
ASSESSMENT D. Using various textures.
5. Which best describes the image on the right?
A. Alignment C. Contrast
Direction: Read each item carefully and choose the letter of the
B. Balance D. Repetition
correct answer. Write your answers on a separate sheet of paper or
in your notebook. 6. Which type of balance has two sides that are balanced but
different?
1. How many types of balance are in graphic design?? A. Asymmetrical B. Centered C. Radial
A. 2 B. 4 C. 6
D. Symmetrical
D. 8
2. Which principle of design is seen by the shapes on the right? 7. Which image manipulation technique is used in the picture?
A. Balance C. Color A. Brightness and Contrast
B. Contrast D. Proximity B. Color Balance
C. Cropping
D. Removing Colors
Image source: https://www.tutorialspoint.com/dip/brightness_and_contrast.htm
21 22
8. Which image manipulation technique is used in the picture?
A. Brightness and Contrast
B. Changing Background
C. Color Balance
D. Inserting Texts
Image source: https://www.jihosoft.com/photo/replace-photo-background.html
9. What is created when hue is combined with white?
A. Hue B. Shade C. Tint D. Tone
10. What type of image manipulation technique is used if you want
to remove unnecessary parts of a picture?
C. Brightness and Contrast C. Cropping
D. Color Balance D. Removing Colors
24
23
