INDUSTRIAL ARTS DEPARTMENT

SELF-INSTRUCTIONAL PACKETS
COMPUTER SCIENCE 8
QUARTER 1 – WEEK 3 September 7 – 9, 2020 (Monday- Wednesday)
Content Standard: The learner demonstrates understanding of the basic concepts,
skills and underlying principles in Photo Editing.
Performance Standard: The learner independently demonstrates common competencies
and skills in Photo Editing.
Learning Competency: Explain the basic concepts and underlying theories in Photo
Editing.
Objectives: At the end of the lesson you should be able to:
1. Enumerate steps on how to save a photoshop document and other extension names.
2. Define and differentiate file extension names for photos.
3. Identify shortcut keys in opening, saving and closing a document or the program itself.
Content:(Subject Matter) Overview of Adobe Photoshop
Learning Resources:
a. References: K to 12 TLE Learning Module on Photo Editing, pages 16-23
https://www.scantips.com/
https://blog.hubspot.com/insiders/different-types-of-image-files

b. Instructional Module, whole sheets of pad paper

Materials
Procedure:
A. Reviewing previous lesson or presenting the new lesson
(September 07, 2020 – Monday) Activity 1: Let’s recall
Direction: Enumerate the elements of Adobe Photoshop interface by supplying the missing
letters on each item:
1. __ A __ __ S
2. PH__ __ __ __H__ D __ __ U __E__ __
3. __ PP__ __ C __ __ __ ON __ A __
4. O__ __ IO__ __ B__ __
5. M__ __ __ __ A __
6. __ __ O __ B __ __
7. C __ N __ __ __ _

B. Establishing a purpose for the lesson

In this lesson, you will learn the steps on how to save a photoshop document and other file
extension names use on images. You will also learn the shortcut keys on saving, opening and
closing a photoshop document.
C. Presenting examples/instances of the lesson
(September 07, 2020 – Monday) Activity 2: Supply the keyboard shortcuts of the ff.
commands:

Make a wild guess by choosing your answer on the second column of the table:
1. Save + ___ = Save S
2. Ctrl + __ = New W
3. Ctrl + __ = Open Q
4. Ctrl + __ = Close O
5. Ctrl + __ = Quit or Exit N
6. Ctrl + ___ + ___ Shift S
Tab S

12
D. Discussing new concepts
Saving a Photoshop Document
To save your file after working on your new Photoshop document, follow the steps below:
1. Click the file menu.
2. Click Save as.
3. Type the file name you want to use
4. Choose the file format (e.g. in PSD) you wish to save the file.
5. Click SAVE.
Remember: Saving in Photoshop format (.psd- Photoshop Document) will retain layers, type,
and other editable Photoshop properties. It’s best to save your image in PSD format while you’re
still working on it.
Saving in JPEG Joint Photograpic Experts Group (.jpg) or PNG Portable Network Graphics
(.png) format will save as a standard image file that can be shared, opened by other programs,
and posted online. When you’re finished editing, save a copy in one of these formats too.
Closing a Photoshop Document After saving your Photoshop document, follow the steps below
to close it:
1. Click the file menu.
2. Click the Close button, (or simply press Ctrl+W.)

Closing Adobe Photoshop:

After doing all necessary editing and saving you may opt to close the program by:
1. Click the file menu.
2. Click Exit (or simply press CTRL+Q).

E. Continuation of the discussion of new concepts

Shortcut keys used in Working with Adobe Photoshop:

1. Save = CTRL + S 5. Close document = CTRL + W

2. Save as =CTRL + Shift + S or CTRL + ALT 6. Close All documents = CTRL + Alt +
+S W

3. Open = CTRL + O 7. Exit = CTRL + Q

4. New = CTRL + N 8. Print = CTRL + P

Discussing the file format options in saving a document or image file.

The following are the different file extension formats you can use when saving your work:
1. Joint Photograhic Experts Group (JPEG) format, compression has already taken
place.
By contrast, the JPEG file format uses a lossy compression algorithm by which the
greater the compression, the more information is lost, ultimately reducing image quality
or detail that cannot be restored. JPEG uses knowledge of the way the human brain and
eyes perceive color to make this loss of detail less noticeable.
2. Portable Network Graphics (PNG) file format, are lossless, which means no
information is lost when the file is saved.
3. Photoshop Document (.psd). A .psd file is the file format in which Photoshop saves
documents by default. It is a multi-layer document that retains its full editing options when
saved. In many cases, you will export web graphics from a .psd document file format.

4. GIF - Graphics Interchange Format. GIFs are most common in their animated form,
which are all the rage on Tumblr pages and in banner ads. In their more basic form, GIFs
are formed from up to 256 colors in the RGB color space. Due to the limited number of
colors, the file size is drastically reduced.

13
 5. TIFF - Tagged Image File. A TIFF is a large raster file that doesn't lose quality. This file
type is known for using "lossless compression," meaning the original image data is
maintained regardless of how often you might copy, re-save, or compress the original
file.
F. Developing Mastery
(September 08, 2020 – Tuesday) Activity 3: Identification:
Direction: Identify the keyboard shortcut of the following. Write your answer before the number:

____________________1. Save
____________________2. Open
___________________ 3. New
___________________ 4. Save As
___________________ 5. Close All documents

(September 08, 2020 – Tuesday) Activity 4: Complete the crossword puzzle below:

Across
2. This format uses a lossy compression algorithm by which
the greater the compression, the more information is lost.
4. They are lossless, which means no information is lost
when the file is saved.
Down
1. It is a large raster file that doesn't lose quality. This file
type is known for using "lossless compression,"
3. This is the file format in which Photoshop saves
documents by default. It is a multi-layer document.

G. Finding practical applications of concepts and skills in daily living

(September 08, 2020 – Tuesday) Activity 5: What do you think?
1. You're asked to create a new header for your school paper publication. You've been
given a photo to include, and you need to add some text with the company name.
Because you'll likely edit and revise this type of project, How are you going to save your
work? Include the steps and the file extension name that you’re going to use. Explain
why.

2. You're planning to share some photos from your recent birthday party with your friends.
You'd just like to make some quick adjustments in Photoshop, like cropping and rotating,
before sharing them. In this case, you could open the original image files in Photoshop;
make the necessary adjustments. How are you going to save your work? Include the
steps and the file extension name that you’re going to use. Explain why.

H. Making generalizations and abstractions about the lesson

Of all the file formats that Photoshop supports, the PSD format is probably the most important.
PSD files are your best choice to serve as your master files and for archiving to CD, DVD or an
external hard drive for safe keeping. If you've done any sort of editing work on an image and
there's even the slightest chance you'll need to come back to it again at some point in the future,
save your work as a Photoshop PSD file.
I. Evaluating learning
(September 09, 2020 – Wednesday) Activity 6: Part I: Differentiate the two
Direction: Answer the questions below:

14
 1. Differentiate saving a file to .psd from saving a file to .jpeg. Briefly explain your answer in
2-3 sentences.
2. In your own words differentiate the command Save from Save As.
3. Differentiate the functions of the shortcut keys CTRL + W and CTRL + Q.

Part 2: What Comes First?

Direction: Arrange the Steps on How to Save a Photoshop Document. Use the letters A – E,
where A is the first step and E is the last step.

_____1. Click Save as.

_____2. Type the file name you want to use
_____3. Click the file menu.
_____4. Click SAVE.
_____5. Choose the file format (e.g. in PSD) you wish to save the file.

J. Additional activities for application or remediation

(September 09, 2020 – Tuesday) Activity 7: Acronyms
Direction: Complete the acronyms below:

1. PSD = _____________________________

2. JPEG = _____________________________

3. TIFF = ______________________________

4. PNG = ______________________________

5. GIF = _______________________________

15
QUARTER 1 – WEEK 3 September 10-11, 2020 (Thursday-Friday)
Objectives: At the end of the lesson the you should be able to:
1. Define and enumerate steps in cropping an image
2. Define Resizing and enumerate steps in resizing an image
3. Define Rotating and enumerate steps in rotating an image
Content:(Subject Matter) Editing an Image
Learning Resources:
c. References: Photoshop online
d. Instructional module, computer or laptop or smartphone or tablet (your choice)
Materials whole sheets of pad paper.
Procedure:
A. Reviewing previous lesson or presenting the new lesson
(September 10, 2020 – Thursday) Activity 1: Shortcut keys
Direction: Write your answer on the space provided:
Write the shortcut keys used for:
1. Open an image or photoshop document - _________________
2. New blank photoshop document- ________________________
3. Save As- _______________________
4. Close _______________________
5. Exit________________________

B. Establishing a purpose for the lesson

(September 10, 2020 – Thursday) Activity 2: Spot it
Study the pictures below.
1. Do you notice the changes?
What do you think were done to the pictures?

Photo A Photo B Photo C

C. Presenting examples/instances of the lesson
There's almost no limit to what you can do in Photoshop, but first you'll need to learn the
fundamentals. The most basic image adjustments you can make in Photoshop, including:
 Cropping: If you want to remove parts of an image, you can crop it. You can
think of cropping like using a pair of scissors to cut out the parts you no longer
want.
 Resizing: If you want to make an image smaller or larger, you can resize it.
However, keep in mind that making an image larger than its original size
generally does not make the image look good.
 Rotating: If you want to change the orientation of an image, you can rotate it to
the left or right.
D. Discussing new concepts
Cropping
There are two main ways to crop an image in Photoshop. You can either use the Crop tool or
make a selection with the Rectangular Marquee tool. These methods work a bit differently,
and you may find that you prefer using one method over the other.
To crop an image (Method 1): 2. In the Control panel, locate
1. With the image open in the Style drop-down menu
Photoshop, select the Crop tool (also called Mode in some
from the Tools panel. versions). If you want the
image to be a specific aspect
ratio, select Fixed Ratio and
type the desired width and
height. Otherwise, make sure
the Style is set to Normal. In

16

2. Click and drag to select the part of
the image you want to keep, then
release the mouse.
3. Adjust the cropping handles if
necessary.
4. Press Enter on your keyboard to
crop the image. You can
also double-click the image.
To crop an image (Method 2):
With the image open in Photoshop,
choose
1. the Rectangular Marquee tool
from the Tools panel.
Resizing and rotating
To resize an image:
You should avoid making images larger than
their original size. When you do this, the image
simply won't have enough detail to look good at
the larger size.
With the image open in Photoshop,
17
this example, we'll crop the
image to a 4-by-3 aspect
ratio.
3. Click and drag to select the
part of the image you want to
keep, then release the
mouse.
4. If needed, you can click
the edge of the selection box
and move it to the desired
position.
5. Select Image > Crop. The
image will be cropped.
To rotate an image:
It's easy to rotate an image in Photoshop.
You can rotate images clockwise (CW) or
counter-clockwise (CCW), flip the
image horizontally
or vertically, and even rotate by
an arbitrary amount to choose a specific
rotation. However, most modern digital
cameras will adjust the rotation of images
 select Image > Image Size. automatically,
so you may not need to use this feature very
often.
1. With the image open in
Photoshop, select Image >
Image Rotation, then select
the desired rotation option.

1. A dialog box will appear. Make

sure Pixels are the currently
selected unit size and that
the Resample box is checked.
The Lock icon next to the Width
and Height should also be turned
on, which will ensure that
the aspect ratio stays the same 2. The image will be rotated.
to avoid distorting the image.
2. Type the desired dimensions for
the new image. When you enter
the new image width, the height
should be
adjusted automatically to
maintain the original aspect ratio.

3. Click OK. The image will be

resized.
E. Continuation of the discussion of new concepts

(September 10, 2020 – Thursday) Activity 3: My Ideas

Answer the question:
In 3-4 sentences, briefly explain why there is a need to crop, resize or rotate an image?

F. Developing Mastery
(September 11, 2020 – Friday) Activity 4 (Hands on) send your output (original and edited) on
my email ad leindasantos18@gmail.com or pm it to fb messenger
(if photoshop is not possible you may try any app on your smartphone, tablet or you can use your
computer or laptop)
Challenge!
1. Open an image in an image editing application.
2. Use the crop tool to remove parts of an image. Try experimenting to see how different
types of crops affect the image.
3. Try resizing an image to be smaller than its original size. You can turn Constrain
Proportions on and off to see how this affects the aspect ratio.
4. Try resizing an image to be larger than its original size. Notice how the image suffers a
loss in quality and detail.
5. Use the rotate tool to rotate an image.
6. Save a copy of the edited image. You'll want to choose a new file name to avoid
accidentally overwriting the original version.

18
Sample Output:

Original Edited

G. Finding practical applications of concepts and skills in daily living

(September 11, 2020 – Friday) Activity 5: My Ideas
Direction: In your own words answer the questions:
1. What is the difference of cropping and resizing an image?
2. Why is it important to crop, rotate and resize an image?

H. Making generalizations and abstractions about the lesson

Image editing is adjusting your images to make them look better. Precise orientation of an
image is important to the appearance of an image or photo. Cropping is needed to remove
unwanted or unnecessary part of an image.
I. Evaluating learning
(September 11, 2020 – Friday) Activity 6: Sequencing
Part I. What Comes First?
Direction: Arrange the Steps on How Crop an Image. Use the letters A – D, where A is the first
step and D is the last step.
________1. Click and drag to select the part of the image you want to keep, then
release the mouse.
________2. With the image open in Photoshop, select the Crop tool from
the Tools panel.
________3. Press Enter on your keyboard to crop the image. You can also double-
click the image.
________4. Adjust the cropping handles if necessary.

Part II. True/False questions

Directions: Read each statement below carefully. Place a T on the line if you think a
statement is TRUE. Place an F on the line if you think the statement is FALSE.
_________1. To crop an image in Photoshop (or any digital editing program) use the crop
tool.
_________2. Cropping means eliminating distracting elements in an image by cutting away
unwanted bits around the edges
_________3. The Crop tool lets you constrain your crop box to the
images original relationship between its width and height.
_________4. If you shoot an image at an angle and then need to straighten it, you can crop
the image and change its perspective at the same time using the Slop/crop tool.
_________5. There are 3 methods to crop an image.

J. Additional activities for application or remediation

(September 11, 2020 – Friday) Activity 7: What Comes First?
Direction: Arrange the Steps on How Resize an Image in Photoshop. Use the letters A – D,
where A is the first step and D is the last step.
_________ 1. Type the desired dimensions for the new image.
_________ 2. Open the image in Photoshop.
_________ 3. Click Ok. The image will be resized.

19
_________ 4. Click Image size from the drop down choices.
_________ 5. A dialog box will appear. Make sure Pixels are the currently
selected unit size and that the Resample box is checked.
The Lock icon next to the Width and
Height should also be turned on, which will ensure that the aspect
ratio stays the same to avoid distorting the image.
_________ 6. Click Image on the Menu Bar.

20