TLE Grade 8 Quarter 1 Week 4, Day 1 Home About Contact

Technology and Livelihood

Education
Information & Communication Technology
Introduction to Graphic Design
Basic Functions of Adobe Photoshop
Start Slide End of Slide
 CURRICULUM CONTENT, STANDARDS, AND LESSON COMPETENCIES Home About Contact

Content
Standards
The learners demonstrate an
understanding of graphic design
tools.

Read More

www.adobe.com Search Presentation

 CURRICULUM CONTENT, STANDARDS, AND LESSON COMPETENCIES Home About Contact

Performance
Standards The learners create videos with
graphics design in a safe and
responsible manner

Read More

www.adobe.com Search Presentation

 CURRICULUM CONTENT, STANDARDS, AND LESSON COMPETENCIES Home About Contact

Learning competencies and Objectives

Learning Competency Learning Objectives
At the end of the lesson, students are
The learners will expected to:
• Utilize graphic 1. Identify common graphic design tools
and their function.
design tools for 2. Demonstrate how to use graphic
graphic production design tools to create designs.
3. Appreciate the importance of graphic
design principles in creating visually
appealing projects.

www.adobe.com Search Presentation

Unlocking Content
Area Vocabulary
www.adobe.com. Search Presentation
 UNLOCKING CONTENT AREA VOCABULARY Home About Contact

• Adode Photoshop
is a powerful photo and image editing
application.
Part of the Adobe Suite of productivity
software and considered by many to be a
benchmark in the world of professional
digital image solutions.
www.adobe.com Search Presentation
 UNLOCKING CONTENT AREA VOCABULARY Home About Contact

• Resolution
refers to the number of dots per
inch (dpi) that appear in your
images final form. For print
these really may just be dots. On
screen, however, these dots are
referred to as pixels.

www.adobe.com Search Presentation

 UNLOCKING CONTENT AREA VOCABULARY Home About Contact

• Raster (also called "Bitmap") graphics

are created from
rows of different
colored pixels that
together form an
images.
www.adobe.com Search Presentation
 UNLOCKING CONTENT AREA VOCABULARY Home About Contact

• Vector (also known as "object-

oriented") graphics
are constructed using mathematical
formulas describing shapes, colors, and
digital artists for various purposes such
as photo editing, image manipulation,
graphic design, digital painting, and
much more.
www.adobe.com Search Presentation
 Home About Contact

Basic Functions of Adobe

Photoshop

www.adobe.com Search Presentation

 CURRICULUM CONTENT, STANDARDS, AND LESSONS COMPETENCIES Home About Contact

A. Layers:
Photoshop works with layers,
allowing users to stack different
elements of an image on top of
each other. This non-destructive
editing approach enables users to
make changes to individual
elements without affecting the rest
of the image.
www.adobe.com Search Presentation
B. Image Adjustments:
Photoshop offers a wide range of
adjustment tools and commands for
tweaking the colors, tones, and overall
appearance of images. This includes
adjustments such as
brightness/contrast, levels, curves,
hue/saturation, and more.
 CURRICULUM CONTENT, STANDARDS, AND LESSONS COMPETENCIES Home About Contact

C. Masking and Compositing:

Masks allow users to hide or
reveal portions of an image
selectively. This is particularly
useful for combining multiple
images or adjusting specific
areas without affecting the rest
of image.

www.adobe.com Search Presentation

D. Color Management
Photoshop supports various
color modes and color
profiles, allowing users to
work with different color
spaces and ensure accurate
color reproduction across
different devices.
 E. Exporting and Saving
Photoshop enables users to save
their work in various file formats,
including PSD ( Photoshop
Document) for retaining layers
and editing capabilities, as well as
formats like JPEG, PNG, TIFF, etc.,
for sharing and publishing. www.adobe.com
F. Integration with Adobe
Photoshop seamlessly integrates
Creative Cloud: with other Adobe Creative Cloud
applications like Adobe Illustrator,
Adobe InDesign, and Adobe
Lightroom, allowing users to work
across different programs efficiently.

www.adobe.com
Home About Contact

Setting Up a
Document
Start Slide Watch Video
How to setup a new Document with Preset?
1. To set up a new document, click on the
Create New button and a new dialog box will
appear. This allow you to choose what type of
document you wanted to create. Such as phot,
printed, art & illustration, web, mobile, film
and video.
www.adobe.com
How to setup a new Document with Preset?
2. You can also go to File>New at the top of
the screen. Or just simply click Ctrl + N
(win) or Cmd +N (Mac). Whichever way
you choose, it will open a dialog where you
can select the document size you want to
use.
www.adobe.com
 3. At the New Document dialog box, select Print
menu to show the different printable size
document.
4. Choose the Letter size and click Create.

www.adobe.com
 Placing and Transferring Images
1. There are many options in opening an existing
file or images in Photoshop. The official way is:
2. Click the Open button at the Home Screen,
and it will show you the windows explorer
where you can locate the image you want to
open.
3. Navigate to your image and select it.
 1. Click Open. Then it will proceed to the Photoshop
Interface.
2. The Faster way in opening an image or design is
by Drag and Drop from Windows Explorer location
and dropping the image to the Photoshop Home
Screen.
3. If the existing file is already listed at
the Home Screen displayed, just select
and click and it will open at the
Photoshop Interface.
 2. Worked Example
Practice navigating through Photoshop's interface. Open
and close images, create new files, and save your work
3. Lesson Activity
• Students will try to open their desired photo from
their phone to photoshop.
 Week 4, Day 2

NAVIGATION Interface:
Photoshop's interface (also called Workspace)
consists of various panels, menus, and toolbars that
allow users to access it's wide range of tools and
functions. The workspace can be customized
according to the user's preferences. It should look a
little bit like the one shown below. Yours might
look different, but it should look fairly similar.
 Menu Bar
Always located at the top of the screen.

Toolbar
set of tools placed on the left side of the screen
that can manipulate photos in different ways. It
was categories based on six functions.
 Option Bar
this bar interchangeably appear depending on the
selected tool you clicked. These are additional
options you can choose from in relation to the tool
you are using.
Example: Crop tool will show you suggested
aspect Ratio you want to use or set the desired
Ratio. You can also set the kind of grid guide
you want to use.
 Photoshop Panels
placed on the right side of the screen,
and like the toolbar, they can be
dragged out and moved freely around
the workspace. They provide lots of
extra functionality.
 Photoshop offers a vast array of tools editing and
Tools: creating images. Some of the essential tools include:
Move and Selection Tools:
Used to move and select
specific areas of an image.
Crop and Slice Tools:
used to remove some
unnecessary parts of the
image.
 Eyedropper and
Measurement tools:
for picking color and measuring image.
Retouching Tools and
Painting Tools:
Brush, pencil, eraser, etc., for digital painting clone
stamp, healing brush, spot healing brush, etc., for
retouching and repairing images.
 Drawing and Type Tools:
Used to draw shapes, trace, add and
format text and images.
Navigation Tools:
Scale, locate, zoom-in and zoom out
images for better viewing.
Note: Each tool has its additional tools hidden within
itself. It can be accessed by click and hold the small
arrow at the lower right corner of the tools.
 2. Worked Example
Navigate the different tools as demonstrated by the
teacher and practice the use of each tool while
familiarizing the common tools that are frequently
used for editing such as Moving, Cropping
Retouching, and Text tool.
 Week 4, Day 3
Basic Editing Processes
Basic Editing in Photoshop
As a beginner in photo editing, you are expected to learn
the basics of image editing which are presented below.
A. Correcting
One of the first decisions you must make in editing a
photo is to see to it that the white balance is in proper
tone. Adjusts color balance, hue saturation, and contrast to
correct color casts or improve overall color accuracy.
 B. Levels and Curves
allow for precise color over an image's tonal range and
contrast. Adjustments Layer enable non-destructive
editing, so changes don't affect the original image. The
Camera Row Filter offers advanced settings like exposure,
white balance, and clarity adjustments for row image files.
To correct any Image Adjustments, go to:
• Image Menu > Adjustments > Select any options:
Brightness/Contrast, Levels, Curves, Exposure.
• You may experiment with other options for Hue/Saturation.
Color Balance and compare the actual result.
 C. Cropping
lets you remove unwanted parts of an image
or highlight a specific area. Using the Crop
Tool, you can define the area to keep, adjust
the crop boundary, set the aspects ratio, and
resolution. It's important to apply basic
composition rules, like the Rule of Thirds, to
create a more balanced and visually appealing
image.
D. Resizing and Comprehension
in Photoshop let's you adjust an images dimensions to
specific sizes or percentages. Using the image Size
command, you can resize without disorting the aspects ratio.
Photoshop also offers compression options to reduce file
size while still keeping good image quality.
Basic Editing in Photoshop
Save for Web: Allows you to optimize images for the web by
adjusting quality setting, file format, and compression level to
balance image quality with file size.
Go to Image > Image Size > then Image Size Dialogue Box will
appear: Adjust Width and Height with desired unit (Percent,
Pixels, Inches, Centimeters, Points, Picas, Column). Then
adjust Resolution to 300 for printable quality.

Resolution
Refers to the number of dots per inch (dpi) that appear in your
images final form. For print these really may just be dots. On
screen, however, these dots are referred to as pixels.
 An image with high
resolution (one produced
for print, for example) will
look very smooth and no
pixilation (Standard
Resolution is 300 dpi). An
image with low resolution
(one produced for the
screen needs 72 dpi) it may
look far more pixelated if
you zoom-in the image
A. Sharpen Tool
Allows you to selectively sharpen specific areas
of an image by painting over them.
B. Shake Reduction
allows you to sharpen image from shaking shots.
C. Smart Sharpen
Provides sharpening options, including noise
reduction a nd more advanced halo suppression,
with better control over sharpening effects.
 D. Unsharp Mask
A filter that increases the contrast along
edges to make them appear sharper
E. Sharpening and Softening
is the last of the global corrections that are often
applied to digital images to enhance clarify details:
Access Sharpening by selecting Filter > Sharpen >
then select options for Sharpen.
 F. Layering
Is one of the important features in Photoshop that you need
to understand. Usually, every element you add in your design
should have its own layer. Usually, shapes, text, and images
will create their own layer once added. So, you should be
mindful if you are already working in multiple layers.
Applying commands or operations in a wrong layer may
result in an undesirable outcome or no effect at all.
Layer Panel
Can be accessed at the
Right Panel of the
Screen. If not visible, you
can open it under
Window > Layers or
click F7 on your
keyboard for shortcut
command.
 Worked Example
Complete the web Concept Map below by enumerating the basics
of photo editing. Give a brief description of each. Save as .jpg
format then upload it in Google Classroom or Group Chat.
 Apply composition
techniques in Graphic
design
Design promotional
materials using proper
layout and design principles

Create a professional
looking flyer using Adobe
Photoshop
 WATCH
WATCH THE
THE TUTORIAL
TUTORIAL VIDEOS
VIDEOS ON
ON FLYER
FLYER MAKING
MAKING
(VIDEO
(VIDEO 22 AND
AND VIDEO
VIDEO 3).
3). OBSERVE
OBSERVE THE
THE TECHNIQUES
TECHNIQUES
USED
USED IN
IN CREATING
CREATING LAYOUTS,
LAYOUTS, COLOR
COLOR CHOICES,
CHOICES, AND
AND
TEXT
TEXT PLACEMENT.
PLACEMENT. DISCUSS
DISCUSS WHAT
WHAT MAKES
MAKES THE
THE FLYERS
FLYERS
EFFECTIVE
EFFECTIVE
 1.Balance
refers to the equal distribution of visual elements in a
design to create a feeling of stability and harmony.

Importance in Flyer Design:

When a flyer is balanced, it feels organized and pleasing to the eye. Balance can be
symmetrical (elements evenly placed on both sides) or asymmetrical (different
elements arranged to create balance without being exactly the same)
 2. Hierarchy
is the arrangement of elements in a way that shows their order of
importance. It helps guide the reader's eye to what should be noticed
first, second, and so on.

Importance in Flyer Design:

Good hierarchy makes it easy for viewers to know where to look first
(like a headline), then where to find more details (like body text or a
call-to-action).
 3. Emphasis
involves making a certain part of
the design stand out so that it
catches attention immediately

Importance in Flyer Design:

It helps highlight the most important message or offer in
the flyer, such as "50% Off!" or "Enroll Now!"
How to create Emphasis:
Using bold fonts, bright colors, larger sizes, borders, or graphic
elements around the important text or image