Computer Arts and Technological College, Inc.

Legazpi ● Ligao ● Polangui

COMPUTER 9: Visual Graphic Design

Second Quarter Module

 REMEMBER:

To do well in this module, you need to remember and do the following:

1. Read the all instructions carefully before starting anything.

2. Complete all the activities and worksheets. Follow instructions on how to

submit them.

3. Look up the meaning of words that you do not know.

4. You will frequently come across process questions as you go through

different lessons. Keep a notebook (or use the Notepad) where you can
write (and revise) your answers to these questions. Also use the notebook to
jot down short notes, draw diagrams, and summarize what you have just
read.

5. For activities and reports that need to be submitted, use the provided
checklist and rubric to evaluate your work before submission.

6. Allow time for relaxation and recreation when you are mentally tired.

Unit 2: Introduction to Graphic Design (Part 2 of 2)

 INTRODUCTION:

When we look around we find that we are surrounded by a number of

pictures, photos and images. These visuals are various forms of graphic design.
Graphic design is part of our daily life from simple things such as postal stamps to
huge hoardings and advertisements on clothes, etc.

Graphic design makes it easier to interact and communicate, stimulate mind,

attract attention and provide information to the user in an aesthetically elegant
manner. Graphic design is a major component of visual communication and it
comprises a variety of communication medium and strategies in order to convey a
visual message to the target audience. These visuals are representations of
thoughts, emotions, ideas and reality.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 1|Page

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

 LESSON AND COVERAGE:

In this module, you will examine these questions when you take the following
lessons:

 Lesson 5 – The Fundamentals of Graphic Design

 Lesson 6 – Typography
 Lesson 7 – Color
 Lesson 8 – Images for Print and Web

In these lessons, you will learn the following:

Lesson 5  Discuss the fundamentals of design.

 Identify the design elements and principles.
 Describe and practice using each element and
principle.

Lesson 6  Differentiate type, typeface, and font.

 Define typography in graphics.
 Identify the anatomy of a letter.
 Classify the types of font.
 Discover the important rules in typography.

Lesson 7  Discuss about the elements and theories of color.

 Explain how color affects the human mind and feeling.
 Apply the tips in choosing appropriate colors for a
design.

Lesson 8  Discover the common file formats of an image.

 Differentiate raster and vector images.
 Understand the legal protections of an image.

2|Page COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

LESSON 5: THE FUNDAMENTALS OF GRAPHIC DESIGN

Explore
Instruction: Analyze the pictures about product endorsements or logos that
convey a message. What do you notice about the pictures. Motivate your answer.
Write your answers in your notebook.

END OF EXPLORE

COMPUTER 9: TLE – ICT (Visual Graphic Design) 3|Page

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

Firm-Up
Instruction: Do one or all of the following:

1. Read and comprehend the iDiscuss: The Fundamentals of Graphic

Design on Page 34-44 of the Textbook.

2. Read and comprehend the VGD-IPRESENT-U2L5 file shared by your

subject teacher.

3. Watch the Video Lesson namely VGD-VLESSON-U2L5 shared by your

subject teacher.

iWorksheet 5: Quiz

Instruction: Write the answers on your notebook.

I. Choose whether the following sentences are TRUE of FALSE.

1. The fundamentals of design are the foundation of every visual medium – from
fine art to modern web design.

2. The elements of design are the objects that make up a design while the
principles of design refer to the way those elements are used together.

3. A good reference for establishing hierarchy of elements includes using the

silvered ratio which brings the focus to specific elements that should be
emphasized.

4. The contrast makes elements stand out from one another and catch a
prospect’s eye.

5. Harmony is about making the most important element of a design stand out
from the rest.

6. Balance is how the elements of a design are distributed throughout a layout.

7. Radial balance places elements in a circular pattern.

8. A color wheel is a group of colors that work well together.

9. A line is the most basic of the design elements used to create patterns, set a
mood, provide texture, create movement and define shapes.

10. Hierarchy is the arrangement and presentation of design elements in order of

their importance.

4|Page COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

11. Repetition occurs when the two sides of a design look different but still have
similar elements.

12. Color context refers on how color behaves in relation to other colors and
shapes.

13. Symmetrical balance occurs when both sides of a design are the same in
shape, lines and other elements.

14. Shapes are figures and forms that make up logos, illustrations, and other
elements in all types of designs.

15. Saturation refers to the lightness or darkness of the color, providing different
shades ranging from black to white.

II. Complete the sentences by filling out the missing words.

1. The of design are the objects that make up a design while the
principles of design refer to the way those elements are used together.

2. shapes are those that have a recognizable form but are not
real in the same way that natural shapes are.

3. space, sometimes referred to as whitespace, refers to the

blank space around or between elements in a design. and understanding
works of art.

4. is how the elements of a design are distributed throughout a

layout.

5. refers to a visible difference in the properties of objects.

6. is basically just another term for “color” but it also means a

pure color before black or white is added to it.

7. refers to the lightness or darkness of the color, providing

different shades ranging from black to white.

8. balance occurs when the two sides of a design look

different but still have similar elements.

9. lines move the eye in a direction and indicate movement

and fluidity.

10. help a concept to be clean and refined before it is finalized.

END OF FIRM-UP

COMPUTER 9: TLE – ICT (Visual Graphic Design) 5|Page

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

Transfer
Your goal in this section is apply your learning. You will be given a practical
task which will demonstrate your understanding.

iLab 5-A: 3D Illusion

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Paint on your computer.

1. First, open paint on your computer by

typing Paint in the search bar for the
application to show up. Then click it to
open.

2. Then a blank canvas will show up. Click the

Rectangle shape to create a box.

3. Create 2 Squares with almost same size.

Make sure that the other square is located
at the upper right of the first square.

4. Then, connect the upper left corner of both

boxes with a line. Do the same with the
bottom right corner and upper right corner
of both boxes.

5. Use the eraser to remove the lines to be

able to achieve this output.

6|Page COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

6. After creating a 3D square, you can add other details

to make it more convincing at realistic. You can also
add some colors to make it more presentable.

7. Use the provided rubric below to evaluate your work.

8. Once you are done, save your work as “ilab5a-

yoursurname.jpeg”.

9. Upload or pass your accomplished output.

RUBRIC: Directed Activity

COMPUTER 9: TLE – ICT (Visual Graphic Design) 7|Page

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

iLab 5-B: Shadow Highlight and Shading

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Adobe Photoshop on your computer.

1. Open Adobe Photoshop on your computer and create a new canvas.

2. You can access the shapes by pointing your

cursor at the Rectangle tool then press right
click. A selection box will open. Left click the
Ellipse tool to create a circle.

3. After creating a circle, change the fill option,

instead of solid color, use Gradient.

4. Adjust the rotation of the gradient into 127.

5. Then open the blending options by pointing the cursor at the shapes layer
located at the bottom right and then right click. Then select Blending options.

6. Enable inner shadow and inner glow to create a more convincing and realistic
effect on the 2D object.

8|Page COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

7. Use the provided rubric to evaluate your work on Page 7 of this Module.

8. Once you are done, save your work as “ilab5b-yoursurname.jpeg”.

9. Upload or pass your accomplished output.

END OF TRANSFER

COMPUTER 9: TLE – ICT (Visual Graphic Design) 9|Page

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

LESSON 6: TYPOGRAPHY

Explore
Instruction: Observe the different pictures of graphic design that uses typography
below. Share your idea about the typography used and how they affect the graphic
design. Write your answers in your notebook.

1. 2.

END OF EXPLORE

10 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

Firm-Up
Instruction: Do one or all of the following:

1. Read and comprehend the iDiscuss: Typography on Page 46-52 of the

Textbook.

2. Read and comprehend the VGD-IPRESENT-U2L6 file shared by your

subject teacher.

3. Watch the Video Lesson namely VGD-VLESSON-U2L6 shared by your

subject teacher.

iWorksheet 6: Quiz

Instruction: Write the answers on your notebook.

I. Complete the sentences by filling out the missing words. (3 pts. each)

1. The basic component of typography is the , and each letter of

the alphabet is distinguished by its unique shape or . The
terms ‘letter anatomy’ and ‘typeface anatomy’ are the standard set of terms
used to describe the parts of a .

2. is the generic term for everything that goes into visual text.
is a group of characters, letters and numbers that share the
same design. refers to the specific style of a typeface.

3. The of a typeface consists of specific

measurements, and central that should always
be identified and taken into consideration.

4. typefaces were popular earlier than sans-serif typefaces and include

semi-structural details on many of the letters. The typefaces
are based on the forms made with a flexible brush or pen and have varied
strokes resembles handwriting. The typefaces are script style
calligraphy that have popularized in Germany.

5. add to any as well as the ability

to highlight points of interests for users.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 11 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

II. Match Column A to Column B.

COLUMN A COLUMN B

1. A.

2. B.

3. C.

4. D.

5. E.

COLUMN A COLUMN B

6. Serif A. This small flair that extends off the edge of

letters, also known as feet.

7. Lowercase & B. This letters are capital letters while in this letters
Uppercase Letters are the smaller ones.

8. Stem C. It is the main stroke of a letter and is usually

vertical.

9. X-height D. It is the imaginary line upon which type sits.

10. Baseline E. The distance between the baseline where type

sits and the top of lowercase letters.

END OF FIRM-UP

12 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

Transfer
Your goal in this section is apply your learning. You will be given a practical
task which will demonstrate your understanding.

iLab 6-A: History of Typography

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Microsoft Word, WPS Document, or Google Docs and any web browser on your
computer.

1. Open any browser on your computer and do a research about the History of
Typography and Different Typefaces.

2. After researching, open your selected program on your computer to create a

blank document.

3. Put your research in your selected program. Do not forget to cite the web
sources at the end of your document.

4. Once you are done, save your work as “ilab6a-yoursurname.docx”.

5. Use the provided rubric to evaluate your work on Page 14 of this Module.

6. Upload or pass your accomplished output.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 13 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

RUBRIC: Design

14 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

iLab 6-B: Artsy Fonts

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Adobe Photoshop.

1. First, open Adobe Photoshop on

your computer and create a new
canvas.

2. Left-click the Horizontal type tool

or press the letter T on your
keyboard.

3. Pick any letter or word to use as a

base for your art.

4. You can change the font style, font color, orientation, and font size any way
you like.

5. Use the Blending option to put any style you want and make a 3D effect.

6. Once you are done, save your work as “ilab6b-yoursurname.jpeg”.

7. Use the provided rubric to evaluate your work on Page 16 of this Module.

8. Upload or pass your accomplished output.

END OF TRANSFER

COMPUTER 9: TLE – ICT (Visual Graphic Design) 15 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

RUBRIC: Photoshop Activity

16 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

LESSON 7: COLOR

Explore
Instruction: Analyze the image of a color wheel below. Based from your
experiences and idea, what are the meaning of each (or some of the) color. Write
your answers in your notebook.

END OF EXPLORE

Firm-Up
Instruction: Do one or all of the following:

1. Read and comprehend the iDiscuss: Color on Page 54-62 of the

Textbook.

2. Read and comprehend the VGD-IPRESENT-U2L7 file shared by your

subject teacher.

3. Watch the Video Lesson namely VGD-VLESSON-U2L7 shared by your

subject teacher.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 17 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

iWorksheet 7: Quiz

Instruction: Write the answers on your notebook.

I. Choose whether the following sentences are TRUE of FALSE.

1. Color is a seen characteristic of light described by a color name such as red,

orange, yellow, green, blue, and violet.

2. Chroma is the purity, intensity or saturation of a color.

3. A color ring is a circular diagram of the spectrum used to show the

relationships between colors.

4. Color theory refers to different ways of blending colors to create something

visually pleasing and harmonious.

5. Harmony can be defined as a pleasing arrangement of parts – whether it be

music, poetry, or color.

6. Analogous colors are any two contrasting colors that are opposite on the
color wheel.

7. Subtractive color works with anything that reflects light.

8. Pink is a bright and happy color associated with optimism and youth.

9. Black is linked with being elegant, timeless, and infinite.

10. Orange symbolizes energy, fun, and enthusiasm. It is more playful and
youthful than red.

II. Use the definition or description below to identify each word pertained to in each
given statement.

1. This color scheme uses one color but varying tones of it, or uses more than
one color but all with the same depth of tone.

2. These colors have the ability to calm and soothe and provide a sense of
relaxation and calmness.

3. These are colors that are powerful, simulating, and passionate.

4. These colors refer to three colors that are placed next to each other on the
color wheel.

5. These are created by mixing two primary colors together.

6. This color is feminine and tends to evoke feelings of innocence and fun.

18 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

7. This color is a calming color, and promotes productivity and trust.

8. This color is a very powerful color that asserts authority and respect.

9. This color symbolizes energy, fun, and enthusiasm.

10. This color is a calming color that represents life and ecology.

END OF FIRM-UP

Transfer
Your goal in this section is apply your learning to real life situations. You will
be given a practical task which will demonstrate your understanding.

iLab 7-A: Rainbow Wheel

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you will need
to use Adobe Photoshop on your computer.

1. First, open Adobe Photoshop on your

computer and create a new canvas.

2. You can access the shapes by

pointing your cursor at the rectangle
tool then right-click. A selection box
will open. Left-click the ellipse tool to
create a circle.

3. After creating a circle, use the line tool to divide the circle into many slices.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 19 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

4. Using the Paint bucket tool, Fill every area with different colors to make a
color wheel.

5. Make sure that the colors are arranged in order.

6. Once you are done, save your work as “ilab7a-yoursurname.docx”.

7. Use the provided rubric to evaluate your work on Page 16 of this Module.

8. Upload or pass your accomplished output.

iLab 7-B: Shade and Tint

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you will need
to use Adobe Photoshop on your computer.

1. First, open Adobe Photoshop on your computer and create a new canvas.

2. You can access the shapes by pointing your cursor at the rectangle tool to
create a bunch of squares across the canvas. You can also use the line tool.

20 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

3. Using the Paint bucket tool, fill every area with different colors to create a
shade to tint effect.

4. Make sure that the colors are arranged in order.

5. Once you are done, save your work as “ilab7b-yoursurname.docx”.

6. Use the provided rubric to evaluate your work on Page 16 of this Module.

7. Upload or pass your accomplished output.

END OF TRANSFER

COMPUTER 9: TLE – ICT (Visual Graphic Design) 21 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

LESSON 8: IMAGES FOR PRINT AND WEB

Explore
Instruction: Analyze the pictures of a vector and raster (pixel) images below.
What do you notice and share what is on their mind. Motivate your answers. Write
your answers in your notebook.

1.

2.

END OF EXPLORE

Firm-Up
Instruction: Do one or all of the following:

1. Read and comprehend the iDiscuss: Images for Print and Web on Page
64-69 of the Textbook.

2. Read and comprehend the VGD-IPRESENT-U2L8 file shared by your

subject teacher.

3. Watch the Video Lesson namely VGD-VLESSON-U2L8 shared by your

subject teacher.

22 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

iWorksheet 8: Quiz

Instruction: Write the answers on your notebook.

I. Complete the sentences by filling out the missing words. (2pts each)

1. refer to any digital copies of pictures stored on a computer

device while are strictly pictures captured through the use of a
camera.

2. images are produced when scanning or photographing an

object. images are made up of paths or line art that are infinitely
scalable because they work based on algorithms rather than pixels.

3. refers to a process of altering an image from its original

state using a software to achieve the desired result.
is the altering of an image to remove or repair damage or unwanted
blemishes or objects.

4. is the legal protection extended to the owner of the

rights in an original work. is a legal exception to the
exclusive rights an owner has for his copyrighted work.

5. A is an uncompressed format that allows transparency and can

handle up to 16 million colors. A produces the highest quality
image format for printing photos but is not suitable for web.

II. Complete the sentences by filling out the missing word.

1. mostly refers to display and the number of picture elements –

pixels or dots.

2. images are produced when scanning or photographing an

object.

3. images are made up of paths or line art that are infinitely

scalable because they work based on algorithms rather than pixels.

4. manipulation refers to a process of altering an image from its

original state using a software to achieve the desired result.

5. is the altering of an image to remove or repair

damage or unwanted blemishes or objects.

6. The term is now used to refer to photographic images

that are edited digitally.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 23 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

7. is the legal protection extended to the owner of the

rights in an original work.

8. A is a format that allows transparency and high-

quality images but large in file sizes.

9. A is a format developed by Microsoft for Windows that

allows high quality images but large in file sizes.

10. A compresses an image to make it smaller and

decreases its quality a little bit.

END OF FIRM-UP

Transfer
Your goal in this section is apply your learning. You will be given a practical
task which will demonstrate your understanding.

iLab 8-A: Raster and Vector

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Microsoft Word, WPS Document, or Google Docs and any web browser on your
computer.

1. Open any browser on your computer, then gather information and images of
Raster and Vector.

2. After researching, open a your chosen program on your computer to create a

blank document.

3. Put everything you gathered in your chosen program. Do not forget to cite
the web sources at the end of your document.

4. Once you are done, save your work as “ilab8a-yoursurname.docx”.

5. Use the provided rubric to evaluate your work on Page 14 of this Module.

6. Upload or pass your accomplished output.

24 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

iLab 8-B: Copyright Law

Instruction: Read carefully and follow the given instructions. Once you are done
saving your work, upload your accomplished output. For this activity, you need to
use Microsoft Word, WPS Document, or Google Docs and any web browser on your
computer.

1. Open any browser on your computer, then gather information about

Copyright and exclusive rights.

2. After researching, open a your chosen program on your computer to create a

blank document.

3. Summarize your research and do not forget to cite the web sources at the
end of your document.

4. Once you are done, save your work as “ilab8b-yoursurname.docx”.

5. Use the provided rubric to evaluate your work on Page 14 of this Module.

6. Upload or pass your accomplished output.

COMPUTER 9: TLE – ICT (Visual Graphic Design) 25 | P a g e

 Computer Arts and Technological College, Inc.
Legazpi ● Ligao ● Polangui

END OF TRANSFER

26 | P a g e COMPUTER 9: TLE – ICT (Visual Graphic Design)