Computer Arts and Technological College, Inc.

Legazpi ● Ligao ● Polangui

COMPUTER 9: Visual Graphic Design

Third 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. The Google Classrooms are 23pupvg (ALGOL) and fknnlqt (BINARY).

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

Unit 3: Adobe Photoshop CC (Part 1 of 2)

 INTRODUCTION:

Adobe Photoshop is one of the best-known pieces of software in the world.

Unless you have had your eyes shut for the last decade or two, you have certainly
seen images, there were edited with Photoshop.

The beauty of the Adobe Photoshop is that it has the power to let you create
the most complex pieces of digital art, or it can simply let you adjust the brightness
of a favorite photo. You can use as few or as many of its vast range of tools as you
want.

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 9 – Introduction to Photoshop CC

 Lesson 10 – Photoshop CC Workspace
 Lesson 11 – The Toolbar
 Lesson 12 – Managing Panels
 Lesson 13 – Using Layers

In these lessons, you will learn the following:

Lesson 9  Describe the Adobe Photoshop.

 Determine how Photoshop is developed.
 Identify the new features of Photoshop CC.

Lesson 10  Start the Photoshop CC.

 Create a new project.
 Browse files in Photoshop.
 Identify and describe the parts of workspace.

Lesson 11  Locate and enumerate each tool found in the Toolbar.

 Identify the different groups of tools.
 Describe the uses of each tool.

Lesson 12  Identify the different panels in Photoshop CC.

 Describe the uses of each panel.
 Manage and organize the panels found in Photoshop.

Lesson 13  Explain the importance of layers in Photoshop CC.

 Manage and organize layers.
 Apply different effects and styles in a layer.

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

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

LESSON 9: INTRODUCTION TO PHOTOSHOP CC

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

1. Read and comprehend the iDiscuss: Introduction to Photoshop CC on

Page 75–81 of the Textbook.

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

subject teacher.

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

subject teacher or Supplementary Videos shared in the Google
Classroom.

iWorksheet 9: Quiz

Instruction: Write the answers on your notebook.

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

1. Adobe Photoshop is developed by Adobe Systems Incorporated.

2. Adobe was founded in December 1992 by John Warnock and Charles Geschke.

3. Photoshop 1.0 was officially released exclusively for Macintosh.

4. American brothers Thomas and John Knoll developed an image editing

program called Photo manipulation.

5. Photoshop finally lets users to copy and paste layers between documents using
the standard keyboard shortcuts Ctrl + D and Ctrl + I.

6. Adobe added a new panel called the School panel which gives users the
opportunity to learn how to use the program without ever having to leave
Photoshop.

7. Adobe Creative Cloud provides access to the software used for graphic design,
video editing, web development, and photography.

8. The Luminance feature selectively darkens or lightens any part of an image.

9. The new Curvature Pen tool in Photoshop CC makes it much easier to draw or
trace curved shapes.

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

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

10. After the thirteenth version of Photoshop (CS6), Adobe launched Photoshop CD
(Creative Dloud) on June 2013.

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 9: Inforgraphic History

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.

1. Open your selected program on your computer to create a blank document.

2. Create an infographic history timeline of Adobe Photoshop.

3. Design your infographic. You can add a brief information or introduction

about Adobe Photoshop.

4. Label your infographic as "Adobe Photoshop History Timeline".

5. You can search on the Internet for infographic samples.

6. Be reminded of the proper guidelines in using the web.

7. Once you are done, save your work as “ilab9-yoursurname.docx”.

8. Use the provided RUBRIC to evaluate your work on Page 5 of this Module.

9. Upload or pass your accomplished output.

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

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

END OF TRANSFER

RUBRIC: iLab Activity

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

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

LESSON 10: PHOTOSHOP CC WORKSPACE

As you work with Adobe Photoshop, you will discover that you can often
accomplish the same task in several ways. To make the best use of the extensive
editing capabilities in Photoshop, you must first learn to navigate the work area.

Explore
Instruction: (Essay). Compare the picture of Adobe Photoshop CC’s interface
below with the applications you have used so far (in a computer or other devices).
Cite their similarities and differences. Motivate your answer. Write your answers
in your notebook.

END OF EXPLORE

6|Page 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: Photoshop CC Workspace on Page

83–90 of the Textbook.

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

subject teacher.

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

subject teacher or Supplementary Videos shared in the Google
Classroom.

iWorksheet 10: Quiz

Instruction: Write the answers on your notebook.

I. Choose the correct answer from the given choices.

1. Which part of the Photoshop CC interface contains various options and

commands and is located at the uppermost part of the program?

A. Panels B. Menu Bar C. Option Menu Bar

2. Which part of the Photoshop CC interface gives access to all sorts of

commands and options?

A. Panels B. Menu Bar C. Option Menu Bar

3. Which part of the Photoshop CC interface shows the controls for each tool by
selecting objects in the document window?

A. Option Menu Bar B. Panels C. Menu Bar

4. Which part of the Photoshop CC interface contains a preset collections and

arrangements of various elements and can change the layout of the tools?.

A. Toolbar B. Option Menu Bar C. Workspace Button

5. Which part of the Photoshop CC interface contains the necessary tools

needed by the users?

A. Menu Bar B. Option Menu Bar C. Toolbar

6. Which part of the Photoshop CC interface displays the size of the document
and its color profile along with other information?

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

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

A. Status Bar B. Document Area C. Menu Bar

7. Which part of the Photoshop CC interface lets the user quickly find tools or
commands in Photoshop, as well as tutorials on different topics, or even
stock images from Adobe?

A. Toolbar B. Search Button C. Status Bar

8. Which column in the panel area contains the most commonly used features
in Photoshop?

A. Secondary Panel B. Panel Group C. Main Panel

9. Which column in the panel area contains icons for the History, Properties,
Info, Layer Comps, Notes and 3D?

A. Panel Group B. Main Panel C. Secondary Panel

10. What do you call the space surrounding the image in document area?

A. Pasteboard B. Document Tab C. Canvas

11-15. What are the workspaces in Photoshop CC?

A. Graphic and Web E. Sketchpad

B. Motion F. 3D

C. Drawing G. Artboard

D. Photography H. Painting

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.

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

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

iLab 10: The Photoshop Interface

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.

1. Open your Adobe Photoshop CC on your computer.

2. Take a screenshot of the interface of the Adobe Photoshop CC and paste it in

your chosen application.

3. You can also use the snipping tool to cut out the interface of the Photoshop.

4. Open your chosen application.

5. On the first page, insert here the title of the activity.

6. On the second page, paste or insert here the image of the interface of
Photoshop.

7. Use an arrow to emphasize the parts of the interface.

8. You can also crop the different parts of interface and label each part. Place
the description below the image.

9. Once you are done, save your work as “ilab10-yoursurname.docx”.

10. Use the provided RUBRIC to evaluate your work on Page 5 of this Module.

11. 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 11: THE TOOLBAR

Think of Photoshop as a garage, where cars (Images) come to get repaired.
So in a garage (Photoshop), the mechanic(You) repair the car (Image) with Tools!

Explore
Instruction: (Essay). The picture below shows some of common tools that can be
found in Photoshop toolbar. Based from your own knowledge and experience, what
does each picture represent. Motivate your answer for each letter. 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: The Toolbar on Page 92–100 of the
Textbook.

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

subject teacher.

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

subject teacher or Supplementary Videos shared in the Google
Classroom.

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

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

iWorksheet 11: Quiz

Instruction: Write the answers on your notebook.

I. Match the following Move and Selection Tools to its corresponding description.

COLUMN A COLUMN B

1. A. Magic Wand Tool

2. B. Lasso Tool

3. C. Move Tool

4. D. Quick Selection Tool

5. E. Rectangular Marque Tool

Match the following Retouching and Painting Tools to its corresponding description.

COLUMN A COLUMN B

6. A. Blur Tool

7. B. Gradient Tool

8. C. Clone Stamp Tool

9. D. Pencil Tool

10. E. Patch Tool

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

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

Match the following Drawing and Type Tools to its corresponding description.

COLUMN A COLUMN B

11. A. Add Anchor Point Tool

12. B. Horizontal Type Tool

13. C. Custom Shape Tool

14. D. Convert Point Tool

15. E. Direct Selection Tool

II. Choose the correct answer from the given choices.

1. Which of the following tools is used for dividing an image or layout into
smaller sections or slices which can be exported and optimized separately?

A. Slice Tool B. Slice Select Tool C. Crop Tool

2. Which of the following tools displays color values for the selected area in an
image?

A. Color Sample Tool B. Eyedropper Tool C. Paint Tool

3. Which of the following tools is used to zoom in or out a specific area of an

image?

A. Zoom Tool B. Rotate View Tool C. Hand Tool

4. Which of the following tools allows the users to attach text-based notes to
the document?

A. Ruler Tool B. Note Tool C. Count Tool

5. Which of the following tools is used to paint over areas on the image to make
them appear dark or dim?

A. Burn Tool B. Gradient Tool C. Sponge Tool

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

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

6. Which of the following tools is used to rotate the canvas so that users can
view and edit the image from different angles?

A. Hand Tool B. Rotate View Tool C. Zoom Tool

7. Which of the following tools allows users to easily design websites or layouts
for different devices or screen sizes?

A. Magic Wand Tool B. Artboard Tool C. Rectangle Marquee

Tool

8. Which of the following tools is used to lighten or brighten the areas in the
image that are painted over?

A. Clone Stamp Tool B. Smudge Tool C. Dodge Tool

9. Which of the following tools is used to increase or decrease the saturation of

the areas that are painted over?

A. Sponge Tool B. Smudge Tool C. Dodge Tool

10. Which of the following tools is used for cropping parts of an image and the
removal of unwanted areas?

A. Perspective Crop Tool B. Slice Tool C. Crop Tool

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 11: Tools Tionary

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 PowerPoint, WPS Presentation, or Google Slides and any web browser
on your computer.

1. Open any browser on your computer.

2. Search for the different icons found on the toolbar that were mentioned on
the previous lesson.

3. Make sure the images are in .png format.

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

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

4. Open your chosen application on your computer.

5. You can download or customize your own template for this activity.

6. On the first slide, insert the title of the activity. You can also add a button
that will lead to the next slide.

7. To do that, go to Insert > Shapes > Action Buttons. Then hyperlink it to the
next slide.

8. On the second slide, paste here all the icons you get from the web. This will
be the table of contents containing all the icons of the toolbar.

9. On the third slide, insert the first icon you paste on the second slide.
Including the name of the icon and a short description.

10. Add a back button leading to the second slide.

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

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

11. Going back to the second slide, click the first icon and hyperlink it to its
respective slide.

12. If adding more content to your activity, repeat the steps 8-11.

13. Once you are done, save your work as “ilab11-yoursurname.pptx”.

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

15. Upload or pass your accomplished output.

END OF TRANSFER

LESSON 12: MANAGING PANELS

Explore
Instruction: (Essay). Imagine will happen if there are no panels in Photoshop
application. Can you use it for graphic design purposes? Why or why not? Motivate
your answer. 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: Managing Panels on Page 102–

107 of the Textbook.

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

subject teacher.

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

subject teacher or Supplementary Videos shared in the Google
Classroom.

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

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

iWorksheet 12: Quiz

Instruction: Write the answers on your notebook.

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

1. It helps users to monitor and modify their work, and can be grouped,
stacked, or docked.

2. It is a collection of panels or panel groups displayed together, generally in a

vertical orientation.

3. This panel allows users to create adjustment layers.

4. This panel includes the current foreground and background color chips, a trio
of sliders and a rainbow-colored bar that can be used to pick a new color for
either chip.

5. This panel stores the color information an image is made from.

6. It is a tool that displays all the colors available.

7. This panel allows users to work with images as if they were a stack of
transparencies, so they can create an image from many.

8. This panel tracks nearly everything that users do to the image.

9. This panel contains layer effect presets which can be applied to image layers,
type layers or vector layers.

10. This panel holds miniature color samples, giving easy access for use in
painting or colorizing images.

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

1. A is a collection of panels or panel groups displayed together,

generally in a vertical orientation.

2. In adding and modifying panel groups, users can open more panels by opening
the menu and clicking one of the panel's name.

3. Some panels, such as the images are made up of paths or line art
that are infinitely scalable because they work based on algorithms rather than
pixels.

4. The is a tool that displays all the colors available.

5. are the outlines which the user makes with the Pen and Shape tools.

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

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

6. panel is also docked to the left of the Color panel group and it
has access on the settings for individual adjustment layers, shape layers,
linked smart objects, and layer masks.

7. The are simply indicators that a panel is already open.

8. Photoshop displays the workspace by default. This

workspace includes several useful panels for basic use for starters.

9. By default, the and Color panel stay together in the first set
of panel groups.

10. Users can also temporarily display hidden panels if Auto-Show Hidden Panels is
selected in preferences.

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 12: Panels Presentation

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 Powerpoint, WPS Presentation, or Google Slides and Photoshop CC.

1. Open your Adobe Photoshop CC on your computer.

2. Take a screenshot of the different panels found in the Adobe Photoshop CC.
You can also use the snipping tool to cut out the different panels.

3. Open your chosen application on your computer.

4. Download or customize your own template for your presentation.

5. On the first slide, insert the title of the activity.

6. On the second and following slides, insert the screenshots of the different
panels of the Adobe Photoshop CC.

7. Make sure to input the name of that panel and a short description
about it.

8. Once you are done, save your work as “ilab12-yoursurname.pptx”.

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

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

9. Use the provided RUBRIC to evaluate your work on Page 5 of this Module.

10. Upload or pass your accomplished output.

END OF TRANSFER

LESSON 13: USING LAYERS

Explore
Instruction: (Essay). The pictures below shows some of Layer styles’ effects that
can be applied to individual layers in Photoshop CC. For each picture below, does
the effect help the design? Why or why not? Motivate your answers. Write your
answers in your notebook.

1. 2.

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

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

3. 4.

END OF EXPLORE

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

1. Read and comprehend the iDiscuss: Using Layers on Page 109–114 of

the Textbook.

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

subject teacher.

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

subject teacher or Supplementary Videos shared in the Google
Classroom.

iWorksheet 13: Quiz

Instruction: Write the answers on your notebook.

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

1. Layers are like stacked, transparent sheets of glass on which users can paint
images and see through the transparent areas of a layer to the layers below.

2. Photoshop places the new image on a layer named Background since it

serves as the background for the document.

3. Beside the layer’s name is a thumbnail image known as the layer's glimpse
icon because it shows a small preview of what is on that specific layer.

4. Bevel and Emboss adds various combinations of highlights and shadows to a

layer.

5. Shadow applies interior shading that creates a satin finish.

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

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

6. Layer effects change the appearance of a layer’s content by adding shadows,

glows, bevels, and more.

7. A chain icon appears on the layers that are linked.

8. The Group panel is where users handle all of their layer-related tasks.

9. A layer technique is one or more effects applied to a layer or layer group.

10. Pattern outlines the object on the current layer using a color, gradient, or
pattern.

II. Complete the sentences by filling out the missing word. (2 pts.)

1. To create or add a new layer to a document, click the icon

at the bottom of the panel.

2. The pattern is Photoshop's way of representing

since there is nothing being displayed in the preview
thumbnail..

3. change the appearance of a layer’s content by adding

shadows, glows, bevels, and more. A is one or
more effects applied to a layer or layer group.

4. and add glows that emanate from

the outside or inside edges of the layer’s content.

5. adds a shadow that falls behind the contents of the

layer while adds a shadow that falls just inside the edges
of the layer’s content, giving the layer a recessed appearance.

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 13-A: Play With Layers!

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 CC on your computer.

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

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

1. Pick an image that you will use for this activity. It's either your picture or a
picture from the Internet.

2. Using the different techniques and uses of layers from the previous lesson,
use it on the image you will edit.

3. The Layer can be found at the right side of the Photoshop.nt.

4. If adding a layer, simply click the Layers and on the upper side there's a
down button. Click the Add Layer and you can rename it so that it will not
distract you from editing.

5. Once you are done, save your work as “ilab13a-yoursurname.psd”.

6. Use the provided RUBRIC to evaluate your work on Page 5 of this Module.

7. Upload or pass your accomplished output.

iLab 13-B: How To Use It?

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.

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

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

1. Open a your chosen program on your computer to create a blank document.

2. Based on the previous lesson about using a layer, give at least 5 guides and
tips on how to use the layer properly.

3. On the first page of your paper, insert the title of the activity and don't forget
to add the following:

Name:
Grade and Section:
Teacher:

4. On the second and following pages, input the guides and tips on using the
layers properly.

5. Be creative by adding colors and shapes to your activity.

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

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

8. Upload or pass your accomplished output.

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

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

END OF TRANSFER

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