8

Technology and
Livelihood Education
Quarter 1
Graphics Design with Adobe Photoshop
(Photoshop Interface)
Technology and Livelihood Education–Grade 8
Alternative Delivery Mode
Quarter 1 - Graphics Design with Adobe Photoshop (Photoshop Interface)
First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall

subsist in any work of the Government of the Philippines. However,
prior approval of the government agency or office wherein the work is
created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the
payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos,
brand names, trademarks, etc.) included in this book are owned by
their respective copyright holders. Every effort has been exerted to
locate and seek permission to use these materials from their
respective copyright owners. The publisher and authors do not
represent nor claim ownership over them.
Published by the Department of Education
Secretary : Leonor Magtolis Briones
Undersecretary : Diosdado M. San Antonio

Development Team of the Module

Author: Dante D. Vermon, Jr.

Language Reviewer: Lizette DC. Eladia
Content Editor: Cherlyn DL. Gallardo
Illustrator: Dante D. Vermon, Jr.
Layout Artist: Dante D. Vermon, Jr.

Management Team
Gregorio C. Quinto, Jr., EdD
Chief, Curriculum Implementation Division

Rainelda M. Blanco, PhD

Education Program Supervisor – LRMDS

Agnes R. Bernardo, PhD

EPS-Division ADM Coordinator

Glenda S. Constantino
Project Development Officer II

Joel I. Vasallo, PhD

EPS – Technology and Livelihood Education

Joannarie C. Gracia
Librarian II

Department of Education, Schools Division of Bulacan

Curriculum Implementation Division
Learning Resource Management and Development System (LRMDS)
Capitol Compound, Guinhawa St., City of Malolos, Bulacan
Email address: [email protected]
 8

Technology and
Livelihood Education
Quarter 1
Graphics Design with Adobe Photoshop
(Photoshop Interface)
 Introductory Message
For the Facilitator:

Welcome to the Technology and Livelihood Education 8 Project CAP-LRE Alternative Delivery
Mode (ADM) Module on Graphics Design with Adobe Photoshop (Photoshop Interface)!

This module was collaboratively designed, developed and reviewed by educators both from
public and private institutions to assist you, the teacher or facilitator in helping the learners
meet the standards set by the K to 12 Curriculum while overcoming their personal, social, and
economic constraints in schooling.

This learning resource hopes to engage the learners into guided and independent learning
activities at their own pace and time. Furthermore, this also aims to help learners acquire the
needed 21st century skills while taking into consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator, you are expected to orient the learners on how to use this module. You also
need to keep track of the learners’ progress while allowing them to manage their own learning.
Furthermore, you are expected to encourage and assist the learners as they do the tasks
included in the module.

For the Learner:

Welcome to the Technology and Livelihood Education 8 Project CAP-LRE Alternative Delivery
Mode (ADM) Module on Graphics Design with Adobe Photoshop (Photoshop Interface)!

This module was designed to provide you with fun and meaningful opportunities for guided
and independent learning at your own pace and time. You will be enabled to process the
contents of the learning resource while being an active learner.

This module has the following parts and corresponding icons:

This will give you an idea of the skills or

competencies you are expected to learn in the
module.

1
 This part includes an activity that aims to check
what you already know about the lesson to take.
If you get all the answers correctly (100%), you
may decide to skip this module.

This is a brief drill or review to help you link the

current lesson with the previous one.

In this portion, the new lesson will be introduced

to you in various ways; a story, a song, a poem,
a problem opener, an activity
or a situation.
This section provides a brief discussion of the
lesson. This aims to help you discover and
understand new concepts and skills.
This comprises activities for independent
practice to solidify your understanding and skills
of the topic. You may check the answers to the
exercises using the Answer Key at the end of the
module.
This includes questions or blank
sentence/paragraph to be filled in to process
what you learned from the lesson.
This section provides an activity which will help
you transfer your new knowledge or skill into real
life situations or concerns.
This is a task which aims to evaluate your level
of mastery in achieving the learning
competency.
In this portion, another activity will be given to
you to enrich your knowledge or skill of the
lesson learned.

This contains answers to all activities in the

module.

At the end of this module, you will also find:

References- This is a list of all sources used in developing this module.

The following are some reminders in using this module:

1. Use the module with care. Do not put unnecessary mark/s on any part of the module.
Use a separate sheet of paper in answering the exercises.
2. Don’t forget to answer What I Know before moving on to the other activities included
in the module.
3. Read the instruction carefully before doing each task.
4. Observe honesty and integrity in doing the tasks and checking your answers.
5. Finish the task at hand before proceeding to the next.
6. Return this module to your teacher/facilitator once you are through with it.

If you encounter any difficulty in answering the tasks in this module, do not hesitate to consult
your teacher or facilitator. Always bear in mind that you are not alone.

We hope that through this material, you will experience meaningful learning and gain deep
understanding of the relevant competencies. You can do it!

2
 This module aims to provide activities to help you learn about the
adobe photoshop interface. This will help you know about graphics design with
adobe photoshop, as well as its work area.

At the end of this module, you are expected to:

• identify the adobe photoshop window;
• recognize the part of the environment; and
• work around the different parts and areas of adobe photoshop window.

HUNT ME NOW.
Directions. Find and circle fifteen (15) photoshop interface words on the screen. Words run
horizontally, vertically, diagonally and even backwards.

A D O B E I M A G E

C P L H P R E Y A L

A A R D G A M T I W

N N E O R A N C O O

V G W P A O S E P R

A I E T P O L D L K

S S I I H U O I D S

R E V O I S O T T P

E D A N C W T M L A

D I R S S T O R Y C

P H O T O S H O P E

F I L E S H U N E M

3
DESIGN AREA.
Directions: Write PD if the statement tells about the Principles of Design and ED if the
statement tells about the Elements of Design. Write your answer on the line
provided before each number.
_______________1. Balance in design is similar to balance in physics.
_______________2. Lines and curves are the basic building blocks of two dimensional
shapes.
_______________3. Graduation of size and direction produces linear perspetive.
_______________4. Space is the area provided for a particular purpose.
_______________5. Repetition with various images is interesting, without variation
repetition can become monotonous.
_______________6. Colors refer to a specific hues and has three (3) properties.
_______________7. Contrast is the juxtaposition of opposing elements.
_______________8. Testure is perceived surface quality.
_______________9. Harmony in painting is the visually satisfying effect of combining
similar colors.
_______________10. Shape is a two (2) dimensional line with no form or thickness.

Design Elements and Principles

Design is the creation of a plan or convention for the construction of an object or a

system (as in architectural, blueprints, engineering drawing, business process, circuit diagrams
and sewing patterns.

It is a specification of an object, manifested by an agent, intended to accomplish goals,

in a particular environment, using a set of primitive components, satisfying a set of requirements,
subject to constraints; to create a design, in an environment (where the designer operates).

• Design elements and principles describe fundamental ideas about

the practice of good visual design that are assumed to be the basis
of all intentional visual design strategies. The elements formed the
'vocabulary' of the design, while the principles constitute the
broader structural aspects of its composition.

• Awareness of the elements and principles in design is the first step

in creating successful visual compositions. These principles, which
may overlap, are used in all visual design fields, including graphic
design, industrial design, architecture, and fine arts.

4
MIX MY WORD.
Directions: Rearrange the following jumbled letters to form the Photoshop Workspace. Write
your answer on the space provided.

1. X L O O B O T
2. O S I T O N P
3. S V N A A C S
4. P S T E L T E A
5. U N E M
6. T O L O
7. L I F E
8. T I D E
9. E G A M I
10. Y A L E R

Scan Me Now:

*Note: For those who

have smartphone and
using the internet, you
can scan the QR code to
view more examples of
the Adobe Photoshop
Interface Window.

Notes to the Teacher

The activities in this module are arranged in a manner of
learning progression. This means that activities are written from a simple
to complex manner to help the learners gradually learn the learning
competency. However self-paced the module is, you are encouraged to
give your student the needed support and guidance in understanding
the functions of different tools and materials used in embroidery and
realizing that properly handling them is important.

5
 What is Adobe Photoshop?

Adobe Photoshop is a graphic editing program developed and

published by Adobe Systems Incorporated.

Adobe Photoshop is a software program used to edit and manipulate

photographic images. Photoshop files can be delivered using multiple
file formats.
The direct Photoshop document file format is .psd.

Photoshop What it Does

Feature

• Retouching It is to repair a photograph to get rid of dust flecks, wrinkles, blemishes

or any other undesirable elements of your photograph.

• Painting It uses the paint tasks to colorize black-and-white photographs to

create effects in your photographs.

• Drawing It allows you to create elements in their images such as lines and
shapes that don’t exist in real life.

The Photoshop Workspace

It is an image editing software created by Adobe, which provides an array of tools to
create, alter, and add effects to a variety of digital or original images.
As you work with Adobe Photoshop, you’ll discover that there is often more than one
way to accomplish the same task. To make the best use of the extensive editing capabilities
in these programs, you first must learn to navigate the work area.
Adobe Photoshop work areas include the command menus at the top of your screen
and a variety of tools and palettes for editing and adding elements to your image.
Photoshop is designed primarily for professional use, which is why we need to study
its interface more carefully.
Photoshop is a type of image editing, from touching up photos to creating high-quality
graphics. In this lesson, we'll introduce you to the Photoshop interface, including how to open
files, work with panels, customize the workspace, and change the display size.
You create and manipulate your documents and files using various elements, such as
panels, bars, and windows. Any arrangement of these elements is called a workspace.
Perhaps the most important element of the Photoshop interface is the toolbar. It
contains a bunch of icons that represent the different tools. Photoshop offers to alter and
create images. These include tools for selecting specific areas of images, changing the colors
of the image, stretching, transforming, and erasing parts of an image, and many more. To get
an idea of what some of these tools can do, mouse over the icons and you’ll get an explanatory
tool tip.

6
 Menu Bar

Tool Option Bar

Toolbox/ Palettes
Tools
Panel

Status Bar Canvas

The Menu Bar

The Main Menu bar contains the various options and commands that you will be using
within Photoshop.
The Menu Bar consists of nine menus: File, Edit, Image, Layer, Select, Filter, 3D, View,
Window, and Help. It works like any menu bar in a standard application, with submenu for
other commands related to the parent menu. You may recognize some of the available menus,
such as file and save.
Most of the Main menus are similar in other applications.
The Toolbox/ Tools Panel
The toolbox provides icons linked in a one-step click to access the various Photoshop
tools.
To select a tool, you can click the tool in the toolbox, or you can press the tool’s
keyboard shortcut.
Some of the tools in the toolbox display a small triangle at the bottom right corner,
indicating the presence of additional hidden tools.
The tools panel is the long, narrow panel on the far left side of the work area. It contains
selection tools, painting and editing tools, foreground and background color selection boxes,
and viewing tools.
The Tool Options Bar
Most tools have options that are displayed in the tool options bar. The tool options bar
is context sensitive and changes as different tools are selected. Some settings in the tool
options bar are common to several tools and some are specific to one tool
The options bar gives additional configuration settings depending on the tool selected.
It also provides access to important configuration settings for a particular tool that is selected.
You can move the tool options bar anywhere in the work area.

7
 The Palettes
The Palettes are typically miniature versions of elements that accompany any
particular window. Every palette has four specific features and its own options. Options may
include icons, pop-up menus or slider bars.
The Canvas
The working area where you can insert and display the image.
Tools Panel is the tool bar that are loosely grouped according to their
functionality. You may notice that there are small lines or spaces separating the group
of tools, for creating selections, the second group is the pixel editing tools, the third
group is the vector editing tools, and the final group is the navigation tools.
At the bottom of the of the toolbar, there is a color picker, and at the very bottom
is an icon that allows you to enter the Quick Mask Mode for creating and editing
selections.

A. Selection, cropping,
and measuring tools

B. Retouching and
Paintings tools

C. Drawing and type

tools

D. Navigation Tools

E. Foreground/Background and
Quick Mask

8
 Enrichment Activity

WHAT’S MY LABEL?
Directions: Supply the missing letter to identify the name of the Tools Panel in each number.
Write your answer on the given blank spaces provided to form the Tools Panel.

1. M _ r q _ e _ T _ o _ (M) --------------

-------------- 2. Q u _ c _ S _ l e _ t _ o n T o _ l (W)

3. _ r o p _ n d S l _ c _ T _ _ l (C) --------------

-------------- 4. _ r u _ h T o _ _ (B)

5. C _ _ n e _ _ a m p _ o o _ (S) --------------

-------------- 6. P _ _ n t B _ c k _ t T _ _ l (G)

7. B _ u _ _ o _ l --------------

8. P _ _ _ o _ l (P)-------------- -------------- 12. T _ p _ T o _ _ (T)

9. P _ t h S _ l e _ t _ o _ T _ _ l (A)--------------

10. _ a n _ T _ o _ (H)-------------- -------------- 13. Z _ _ m T _ _ l (Z)

-------------- 14. F _ r _ _ r o _ n _/
B__kg_o_n_ Sw__ch
11. D _ _ a u _ t F _ r _ g r _ _ n d/
_ a _ k g _ _ u n _--------------- -------------- 15. _ _ c k _ r _ u _ d _ o l _ _

9
 Independent Activity 1

Identity Tech
Directions: Identify the following. Choose the correct answer on the box below. Write your
answer on the space provided before each number.

CANVASS
PALETTES

OPTIONS BAR
MENU BAR

TOOL OPTIONS BAR

_________1. It changes depending on which tool is selected in the tool bar, and provides
access to important configuration settings for a particular tool.
_________2. It is where the image is displayed.
_________3. It contains the various options and commands that you will be using within
Photoshop.
_________4. It is context sensitive and changes different tools that are selected.
_________5. It is a miniature version of elements that accompany any particular window.

Independent Assessment 1

Window Label
Directions: Label the Adobe Photoshop Window Interface. Write your answers on the given
boxes provided each number.

1.

2.

3. 5.

4.

10
Independent Activity 2

Let’s Check
Direction: Put a check (√ ) below the column in which the Tools Panel belongs.

A. Selection, cropping, and measuring tools

B. Retouching and Paintings tools
C. Drawing and type tools
D. Navigation Tools
E. Foreground/Background and Quick Mask

Toolbox A B C D E
1. Move Tool
2. Foreground Color
3. Eraser Tool
4. Pen Tool
5. Lasso Tool
6. Hand Tool
7. Zoom Tool
8. Dodge Tool
9. Background Color
10. Type Tool

Independent Assessment 2

Is it TRUE or FALSE?
Directions: Write TRUE if the statement is correct and FALSE If the statement is incorrect.
Write the answer on the space provided before each number.

___________1. The Menu Bar is consisting of nine menus: File, Edit, Image, Layer, Select,
Filter, 3D, View, Window, and Help.
___________2. Painting allows you to create elements in their images such as lines and
shapes that don’t exist in real life.
___________3. The tools options provide icons linked in a one-step click to access the
various Photoshop tools.
___________4. Design elements and principles describe fundamental ideas about the
practice of good visual design that are assumed to be the basis of all
intentional visual design strategies.
___________5. Retouching is to repair a photograph to get rid of dust flecks, wrinkles,
blemishes or any other undesirable elements of your photograph.
___________6. Tools Panel is the tool bar that is loosely grouped according to their
functionality.
___________7. The toolbox is where the image is displayed.
___________8. The Palettes are typically miniature versions of elements that accompany
any particular window.
___________9. Drawing uses the paint tasks to colorize black-and-white photographs to
create effects in your photographs.
___________10. Adobe Photoshop is a graphic editing program developed and published
by Adobe Systems Incorporated.

11
Independent Activity 3
LIST IT.
Directions: Complete the table below by providing the necessary information of the grouped
Tools Panel according to their functionality. Write your answer on the space
provided.

Functionality Tools Panel

A. Selection, cropping, and measuring tools (6)
_____________________
_____________________
_____________________
Quick Selection Tool
Crop and Slice Tool
_____________________

B. Retouching and Paintings tools (8)

_____________________
_____________________
Clone Stamp Tool
_____________________
_____________________
Gradient Tool
_____________________
_____________________

_____________________
C. Drawing and type tools (4)
Type Tool
_____________________
Rectangle Tool

Hand Tool
D. Navigation Tools (2)
_____________________

_____________________
E. Foreground/Background and Quick Mask (4)
Foreground/Background
Switch
Default
Foreground/Background
_____________________

12
Independent Assessment 3
MIX and MATCH
Directions. Match column A with the correct answer on column B. Write the letter of your
answer on the line provided before each number.

COLUMN A COLUMN B

______________1. Marquee Tool

a.
______________2. Quick Selection Tool

b.
______________3. Crop and Slice Tool

c.
______________4. Brush Tool

d.
______________5. Clone Stamp Tool

e.
______________6. Paint Bucket Tool

f.

13
______________7. Blur Tool

g.
______________8. Pen Tool

h.
______________9. Path Selection Tool

i.
______________10. Hand Tool

j.
______________11. Default Foreground/Background

k.
______________12. Type Tool

l.
______________13. Zoom Tool

m.

14
______________14. Foreground/Background Switch

n.
______________15. Move Tool

o.

15
Directions. You are now familiar with the different tools panel including their functions
and uses. You have also learned from the lesson and activities about
photoshop interface. Now, write your insight by completing the sentence
provided.

• I have learned that…

___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________

Directions. Illustration.
Illustrate the Tools Panel according to their functionality based on what
you have learned. Write your answer inside the monitor illustration below.

17
Arrange Me Not
Directions: Arrange the letter/s to form the Adobe Photoshop terminologies. Answer the
following questions briefly. Write the correct answer on the space provided.

F I F T
__________1. It is a computer file format that serves as a container for storing raster graphics
images, layers, clipping path, and other data without losing quality because of compression.

S P I T O N O B R A
__________2. It changes depending on which tool is selected in the tool bar, and provides
access to important configuration settings for a particular tool.

A N H D L O T O
__________3. It is used for moving the image around while zoomed in.

G E P J
__________4. It is a widely used format and technique for compressing images to adjust the
size resulting in image quality loss.
F I G
__________5. It is a file format for compressing images that can include layers and create
animation by using a series of separated frames and image transparency.
T N P I R S E Z I
__________6. It shows the image at the size it will be printed based on the documents
resolution setting.
T I F C E R S E N
__________7. Zooms your image to fit the available work area, respecting the panels and tool
bar.
H H P S O O T P O
__________8. It is designed primarily for professional use, which is why we need to study its
interface.

D F P
__________9. This is a file format used to present and exchange documents reliably,
independent of software, hardware, or operating system.

O C W A K P R S E E N M U
__________10. A way for Photoshop to remember which panels should be displayed on the
screen and where they should be located.

17
 Instructions: Answer the following questions. Write your answer on the blank spaces
provided below each number.

1. What are the special features of the program Adobe Photoshop? (5 points)

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

2. What are the 5 main parts of the Photoshop window? Identify each one.
(5 points)

___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________

Comments/Suggestions

__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________

18
 19
What I Know Independent Activity 1
ADOBE 1. OPTIONS BAR
MENU 2. CANVAS
OPTIONS 3. MENU BAR
TOOLS 4. TOOL OPTIONS BAR
PANELS 5. PALETTES
PHOTOSHOP
WORKSPACE Independent Assessment 1
CANVAS
FILE 1. MENU BAR
IMAGEL 2. TOOL OPTIONS BAR
LAYER 3. TOOLBOX/ TOOLS PANEL
EDIT 4. CANVAS
VIEW 5. PALETTES
What’s In Independent Activity 2
1. PD A B C D E
2. ED 1. √
3. PD 2. √
4. ED 3. √
5. PD 4. √
6. ED 5. √
7. PD 6. √
8. ED
7. √
9. PD
8. √
10. ED
9. √
What’s New 10.
1. TOOLBOX Independent Assessment 2
2. OPTIONS
3. CANVAS 1. TRUE
4. PALETTES 2. FALSE
5. MENU 3. FALSE
6. TOOL 4. TRUE
7. FILE 5. TRUE
8. EDIT 6. TRUE
9. IMAGE 7. FALSE
10. LAYER 8. TRUE
9. FALSE
10. TRUE
What Is It
1. MARQUEE TOOL
2. QUICK SELECTION TOOL
3. CROP and SLICE TOOL
4. BRUSH TOOL
5. CLONE STAMP TOOL
6. PAINT BUCKET TOOL
7. BLUR TOOL
8. PEN TOOL
9. PATH SELECTION TOOL
10. HAND TOOL
11. DEFAULT FOREGROUND/BACKGROUND
12. TYPE TOOL
13. ZOOM TOOL
14. FOREGROUND/BACKGROUND SWITCH
15. BACKGROUND COLOR
 20
Independent Activity 3
Functionality Tools Panel
A. Selection, cropping, and
MARQUEE TOOL
MOVE TOOL
measuring tools (6) LASSO TOOL
Quick Selection Tool
Crop and Slice Tool
EYEDROPPER TOOL
SPOT HEALING TOOL
B. Retouching and
BRUSH TOOL
Paintings tools (8) Clone Stamp Tool
HISTORY BRUSH TOOL
ERASER TOOL
Gradient Tool
BLUR TOOL
DODGE TOOL
C. Drawing and type tools
PEN TOOL
Type Tool
(4) PATH SELECTION TOOL
Rectangle Tool
D. Navigation Tools (2)
Hand Tool
ZOOM TOOL
E. Foreground/Background
FOREGROUND COLOR
Foreground/Background Switch
and Quick Mask (4) Default Foreground/Background
BACKGROUND COLOR
Independent Assessment 3
1. C
2. O
3. F
4. I
5. K
6. A
7. M
8. E
9. H
10. B
11. D
12. G
13. J
14. L
15. N
Assessment
1. TIFF
2. OPTIONS BAR
3. HAND TOOL
4. JPEG
5. GIF
6. PRINT SIZE
7. FIT SCREEN
8. PHOTOSHOP
9. PDF
10. WORKSPACE MENU
 References
“Photoshop Basics - Getting to Know the Photoshop Interface“.GCF
LearnFree.Accessed July 7,
2020.https://edu.gcfglobal.org/en/photoshopbasics/getting-to-know-the-
photoshop-interface/1/

“Photoshop: Interface and Tools“.EMORY Libraries and Information

Technology.Accessed July 07, 2020.
https://it.emory.edu/studentdigitallife/documents/MediaLab%20Instructio
ns/Adobe%20Photoshop/Basics/1.1%20INTERFACE%20AND%20TOO
LS.pdf

“Adobe Photoshop Interface”.GOOGLE Chrome.Accessed July 6,

2020.https://www.google.com/search?q=adobe+photoshop+interface&s
ource=lnms&tbm=isch&sa=X&ved=2ahUKEwjuxIrZ38fqAhVOy4sBHfvP
CrsQ_AUoAXoECBAQAw&biw=1301&bih=624

“Getting to know the Photoshop Interface”.photoessentials.Accessed July 9,

2020.https://www.photoshopessentials.com/basics/getting-know-
photoshop-interface/
“Familiarizing Yourself with the Photoshop Interface”.oxfordsd.Accessed July 10,
2020.https://www.oxfordsd.org/cms/lib/MS01001032/Centricity/Domain/
281/Photoshop%20Terms%20and%20Defintions.pdf

21
For inquiries or feedback, please write or call:

Department of Education, Schools Division of Bulacan

Curriculum Implementation Division
Learning Resource Management and Development System (LRMDS)
Capitol Compound, Guinhawa St., City of Malolos, Bulacan

Email Address: [email protected]

22