Module 14 Teaching Common Competencies in ICT
Module 14 Teaching Common Competencies in ICT
Module 14 Teaching Common Competencies in ICT
Module 14
I. Title of the Unit: Photo Editing
II. Introduction: Presentation of the Topic/Content
Welcome to the Module “Photo Editing”. This module contains training materials and
activities for you to complete.
The unit of competency “Photo Editing” contains knowledge, skills and attitudes required
for a Computer Hardware Servicing.
If you have questions, don’t hesitate to ask your teacher for assistance.
In this course, you will be introduced to different learning activities preparing you
to be skillful before you take the plunge into the world of work as a photo editor and to
feel more confident while providing support where needed.
This module is specifically crafted to focus on Process and Delivery enriched with
hands-on activities. Learning procedures are divided into different sections such as: What
to Know, What to Process, What to Reflect and Understand and What to Transfer.
Examine and perform the suggested tasks to practice developing a sustainable program,
prioritizing needs and building vision.
So, explore and experience this module and be a step closer to being a photo
editor.
III. Objectives
At the end of this module, you are expected to:
Page 1
❖ explore and examine the basic concepts and underlying principles of photo editing
specifically using the Adobe Photoshop
❖ apply the concepts and skills learned in photo editing
Know
Overview of Adobe Photoshop
Page 2
A. Panes
B. Menu Bar
1. File Menu contains all of the stuff you expect. It lets you open and close documents
with a few extras including import, which deals with scanning, and save for web,
which allows you to export a web-ready image from your Photoshop file.
2. Edit Menu is another familiar menu. In Photoshop, edit houses all of the expected
options as well as fill and stroke, and other image-altering functions.
3. Items on the image menu affect a whole image for the most part. Here you will find
color adjustments, size adjustments, and any other changes you need to make
globally when working with a Photoshop file.
4. The layer menu is similar to the image menu. It allows you to make changes to an
image without altering your original image data. It contains options that affect only
current or selected layers. Just understand that an image in Photoshop consists of
stacked transparent layers. Options in the Layer menu affect these pieces of the
image rather than the complete image.
5. The select menu deals with selections you make. Selecting the specific parts of an
image you would like to change is a difficult part when working with Photoshop.
This menu gives you some options regarding selections, including the ability to
save selections, reverse them, or add to them. Learning the options on the
selection menu can really save you some time.
6. The filter menu is probably what most people think when they work with
Photoshop. The filter menu allows you to apply filters to any part of your image.
These filters include ways to change the texture of the image, with some potentially
radical results.
7. The view menu is where you change the view settings. You can use this to show
and display guidelines on the image and to zoom in and out, among other things.
Page 3
8. The window menu allows you to toggle back and forth between hide and show for
each interface element. This is the first place you should go if you lose track of a
particular window while you are working.
9. Last and least is the help menu. The help documentation is not so helpful, but for
some reasons, this menu contains two nice features: resize image and export
transparent image.
C. Options Bar
The options bar which is located directly underneath the menus is a useful tool
when working with the different Photoshop tools.
As you can see right now, when the selection tool is in use, the options bar reflects
the changes that can be made to how that specific tool operates. Here, you have selection
options and style options which include the ability to make the selection tool a specific
size in pixels. When you switch tools, to the paintbrush tool for instance, these options
change. When a tool in Photoshop is not behaving as you expect it to, the options bar
should be the first place you look to fix it.
Page 4
✓ Print Size: Click to zoom the image to the size of the print file. Often, this option
shows you the same size as 1:1.
An advantage of Photoshop over basic photo editing software is the ability it gives
you to create your own graphics. There are numerous tools in Photoshop.
The foreground color, which will be applied by tools like the paintbrush, is
represented by the top square in the middle of the toolbar.
The most basic ways to apply colors to an image are to use Fill and Stroke, both
available on the edit menu. Make a selection, and choose fill from the edit menu. A dialog
will appear asking you to make some decisions about colors and transparency. Make
your selections, and press OK to fill the selection with the chosen color. Stroke operates
in much the same manner, though you are given the chance to determine the weight of
the lines you create.
Page 5
Paintbrush tool
Make a selection and choose the tool from the toolbar. You can change the size
of the brush in the options bar, as well as the behaviors of the paint. The best way to learn
what these options do (and some of it is pretty surprising) is to experiment. Remember,
you have multiple undo’s and layers so do not worry about ruining your image.
Pencil Tool
The Pencil tool works much like the Paintbrush, but draws a distinct line rather
than a feathery painted one. Click and hold the paintbrush icon to reveal the pencil.
Eraser Tool
The eraser tool works much like the Paintbrush and Pencil, but rather than fill the
selected region with a color, it actually removes whatever is in the selection and reveals
the background. This is a very useful tool for cleaning up images with rough edges.
Process
Little by little, you are gaining knowledge about the different features and skills in
working with Photoshop application. To learn more, open your personal computer or
laptop installed with Adobe Photoshop and do the following:
Activity 1. Do It Right
Click the start button on the Windows taskbar. Point to All Programs on the start
menu. Point to Adobe and then click Adobe Photoshop.
Once you have opened the application (after a few moments of loading time), the
Photoshop interface will appear as shown on the next page.
Page 6
Fig. 5. Photoshop Interface
Use the New dialog box to create a new, blank document. Then, select the
attributes for the new file.
Type a name for your new document and select a preset size from a drop down
list. Then set the resolution and background of your new Photoshop document.
You can choose a colored, white, or transparent background.
The resolution which tells how much information is contained in your image, how
clear it is, how big the file is and what it looks like in the format you want to output
it in. Do not get confused.
As a beginner, just use the default resolution of 72. The recommended setting is:
Page 7
3. Saving a Photoshop Document
To save your file after working on your new Photoshop document, follow the
steps below:
Application Bar
Menu Bar
Canvass Palettes
Options Bar
Image
Photoshop Document
After saving your Photoshop document, follow the steps below to close it:
Other activities are given below for you to accomplish. All you need to do is apply
the learning you derived from the lesson.
Page 8
Activity 2. Memory Enhancer
Provide each learner with a name based on the different parts of the workspace
switcher, Photoshop toolbars, various Photoshop panes, options bar and the key terms
and definitions. Each has to describe the word given to them for their classmates to
identify.
Page 9
Reflect and Understand
You have explored some of the features of Adobe Photoshop. Now,
try to surf the net and look for other photo editing software. Then, compare
and contrast their features with Photoshop.
Transfer
Open an Adobe Photoshop Interface and explore the different menus. Share with
your classmates whatever you will discover as well as the problems that you will
encounter.
Page 10
Know
In the previous lesson, you have learned the steps in launching the Adobe
Photoshop application including the steps on opening, creating, saving and closing a
document. Similarly, you have gained knowledge on the elements of the interface,
particularly the distinguishing features of the panes, menu bars and the options bar.
Now it is time to learn how to use some of the tools in the Photoshop toolbar.
In working with any photo editing software such as Adobe Photoshop, you need to
learn the different tools on when and how to use them. For you to become a good photo
editor, using the different tools as shown in the illustration below will help you come up
with an appealing and quality output.
Selection Tools
Alteration Tools
There are variety of tools to help you draw out specific sizes and shapes of
selections in Photoshop.
A. Cropping
One of the benefits of cropping a photo with Adobe Photoshop is the speed with
which you can perform the task. Unlike some of Photoshop's more complex selection
tools, choosing an area to crop in Photoshop is as quick as drawing a square around a
segment of the picture and pressing the Enter key. Cropping works best when you want
to reduce the size or change the shape of a picture.
Read more:
How to Crop a Photo in Adobe Photoshop | eHow.com http://www.ehow.com/how_2044098_crop-photo-
adobe-photoshop.html#ixzz2DTQ8eBhk
Page 12
Magnetic Polygon Lasso tool works a little like a combination of the other two lasso
tools. As you drag, the selection maps to natural borders in the image. This is a useful
tool when dealing with well-defined and high-contrast images.
Polygonal Lasso tool helps you create a selection composed of straight lines that can
be as short as one pixel. The selection grows with each additional click. This tool is
especially useful for cutting out objects in an image to place on new backgrounds.
The following tools allow you to select regions in your image to alter, copy, move
and apply filters.
Rectangular marquee tool is the default selection setting. You can make a selection of
any rectangular size and shape.
Elliptical marquee tool is available when you click and hold down on the selection tool
region of the tool bar, selects elliptical spaces. To select a round area, hold the shift key
while clicking and dragging.
Single row is a tool that will select a 1pixel region that is as wide as your image. This is
very useful for trimming edges and making straight lines.
Single column is a tool that will select a 1pixel region that is as tall as your image. Similar
to single row tool, this is also very useful for trimming edges and making straight lines.
Move Tool allows you to move an entire layer at a time. When you have selected this
tool, click on a layer in the layer pane, and then click and drag on the image. The current
layer will move all at once. You can even move it outside of the current image size. Do
not worry, though, parts of an image that move outside the borders still exist, they are just
hidden. They will only be cropped out if you flatten the image.
Magic Wand Tool is similar to the magnetic polygon lasso tool except that rather than
dragging to make a selection, you click in a region and a selection appears around similar
colored pixels. You can control how similar pixels must be to be included in the selection
by altering the tolerance value. This tool is useful for selecting monochromatic regions or
pieces of high-contrast images.
Crop Tool works similarly to the Rectangular Marquee tool. The difference is when you
press the [Enter/Return] key it crops your image to the size of the box. Any information
that was on the outside of the box will be gone. However, it is not permanent, you can still
undo.
Slice Tool is used mostly for building websites, or splitting up one image into smaller
ones when saving out. It is a kind of advanced tool, and since you are studying the basics,
you will skip it for the meantime.
Page 13
C. Exposure
D. Cloning
Cloning is a great way to remove blemishes and unwanted objects to bring out the
best in your pictures.
Photoshop's clone stamp tool allows you to duplicate part of an image. The
process involves setting a sampling point in the image which will be used as a reference
to create a new cloned area.
2. Alteration Tools
Alteration tools are also indispensable tools that you need to be familiar of. Each
tool under it is described below.
A. Healing Brush
This is a really useful but mildly advanced tool. You can use this tool to repair
scratches and blemishes. It works like the brush tool. Choose your cursor size, then
holding the [Alt] key, you can select a nice or clean area of your image. Let go of the [Alt]
key and paint over the bad area. It basically copies the info from the first area to the
second, in the form of the brush tool. Only, at the end, it averages the information, so it
blends.
B. Brush Tool
Page 14
This is one of the first tools ever. It is what Photoshop is based on. It paints your
image in whatever color and size you have selected. You can use it to draw lines of
different thickness and colors.
C. Clone Stamp
This is very similar to the Healing Brush Tool. You use it the exact same way,
except this tool does not blend at the end. It is a direct copy of the information from the
first selected area to the second. When you learn to use both of these tools together in
perfect harmony, you will be a Photoshop master.
This tool works just like the Brush Tool. It is used to paint over an image using the
source data from a specified history state or snap shot.
E. Erase Tool
This is the anti-brush tool. It works like an eraser and removes whatever path or
stroke you wish to erase. If you are on a Layer, it erases the information with transparent
color. If you are on the background layer, it erases with whatever secondary color you
have selected. You can use the Erase tool on paths, but not on text.
This tool is used to fill an image or a selection with any color of your choice.
G. Gradient Tool
You can use this to make a gradiation of colors. Gradiation does not appear to be
a word, but it makes sense anyway. It creates a blending of your foreground color and
background color when you click and drag it like a gradient.
H. Blur Tool
The Blur tool blurs the sharp edges of an image. Click and drag the brush along
the edges. The
I. Dodge Tool
This tool is not as crappy as the car brand. It is actually used to lighten whatever
area you use it on as long as it is not an absolute black. Absolute black cannot be
lightened.
Page 15
3. Drawing and Selection Tools
A. Path Selection Tool
.
It is related to the Pen Tool. You use this tool when working with paths.
You can click a single point, and start typing right away. Otherwise, you can click
and drag to make a bounding box of where your text/type goes. There are many options
for the Type Tool that you can choose from. Just play around, it is fairly straight-forward.
C. Pen Tool
It is used for drawing smooth-edged paths, selected in the Path Selection Tool.
Paths can be used in a few different ways, mostly to create clipping paths, or to create
selections. Click and drag the anchor points to modify the path. This will allow you to bend
and shape the path for accurate selections.
By default it draws a Shape Layer in the form of a rectangle. It fills the rectangle
with whatever foreground color you have selected. It is somewhat complicated but as you
increase your skill level in working with Photoshop, you will learn it perfectly.
4. Assisting Tools
A. Notes Tool
This tool serves as a comment feature usually used for electronic text edits but digital just
like post-it notes. You can use this tool to add small note boxes to your image. These are
useful if you are very forgetful, or if you are sharing your Photoshop file with someone
else. It only works with .psd files.
B. Eyedropper Tool
This tool takes color samples from colors on the page and displays them in the Color
Boxes. It works by changing your foreground color to whatever color you click on. Holding
the [Alt] key will change your background color.
Page 16
C. Hand Tool
This tool allows you to move around within the image. It is used for moving your entire
image within a window. Just click and drag. You can get to this tool at any time while
using other tools by pressing and holding the [Spacebar].
D. Zoom Tool
This tool magnifies or reduces the display of any area in your image window. It allows you
to zoom into your image. Hold the [Alt] key to zoom out. Holding the [Shift] key will zoom
all of the windows you have opened at the same time. Double-click on the Zoom Tool in
the palette to go back to 100% view.
These tools consist of the foreground color, background color, quick mask, screen
size, standard and image ready. To reverse the foreground and background colors, click
the Switch Colors icon (the arrow) in the toolbox.
Page 17
Process
Now that you have learned the components of the Photoshop toolbar,
you are ready to apply your new learning to the different activities below. But before doing
so, practice first on cropping images to revisit the skill you learned in previous lessons.
1. Open Adobe Photoshop. Select the "File" menu. Select the "Open" option. Click
on a photo file name.
2. Click the "View" menu and select "Fit on Screen" so you can see the entire image.
3. Click the "Crop" tool, which looks like two crossed right angles and is the fifth icon
from the top of the "Tools" column. The cursor changes to the crop icon.
4. Draw a dotted rectangle or square around the part of the photo that you want to
keep. A nine-square grid with blinking dotted lines appears over the image and the
to-be-cropped area turns dark.
5. Press the Enter key on the keyboard to crop the photo. Go to "File" then click
"Save" to save the crop to the original picture, or select "Save As" to create a new
picture from the cropped image.
Directions: You are given three tasks to do. Open your computer and perform the activity.
1. You want to erase an area. Find the Eraser Tool. What other tools are on the fly
out menu?
2. You want to select an area. Find the Magnetic Polygon Lasso Tool. What other
tools are on the fly out menu?
3. You want to draw a shape. Find the Ellipse Tool. What other tools are on the fly
out menu?
Directions: Choose pictures of nature from the files saved in your computer. Produce a
photo collage by applying the skills you learned on Adobe Photoshop. Save
your Photoshop document as You Can Do Magic.psd. Print your work for
the classroom photo exhibit.
a. Cropping c. Correcting
b. Resizing d. Sharpening/Softening
Page 18
Reflect and Understand
Did you enjoy doing the previous activities? If yes, you are now on the
right track towards attaining your goals of becoming a good photo editor. You now
possess the skills, knowledge and attitude needed by a successful entrepreneur. Just
keep on improving your skills. Remember, constant and correct practice makes a person
perfect.
However, if you find difficulty in doing the given tasks, you have nothing to worry
about because more activities are provided in the next lessons. Just have that positive
mental attitude. If you believe in yourself, you can do it! Always be guided by the
competencies of a successful entrepreneur.
Transfer
Now that you have gained the confidence and determination to pursue your goals,
it is time for you to apply what you have learned.
In your Personal Computer (PC), open Adobe Photoshop and do a nature drawing
with the following elements. Save your file as PS Toolbar apps.psd. Try also to explore
Photo Editing in your own personal cell phone.
Page 19
Reflection:
Write an informal 100-word reflection focusing on what you learned and a 25-word reflection
on each visited Web site. Do not summarize the chapter, instead discuss new ideas and
significant insights and how the information can be used to support classroom integration of
information and communication technology (ICT). Also reflect on your personal reaction to
reading the chapter and the supplemental information provided with this module.
Rubrics:
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________.
References
Page 20
Adobe Photoshop Elements Techniques
Photoshop Tutorials / Tips & Tricks
http://www.thephotoargus.com/tips/3-signs-of-bad-photo-editing-and-how-to-avoid-the-
common-pitfalls/
http://EzineArticles.com/163162
http://www.dslrfanclub.com/resources/tips-and-sharing/129-why-photo-editing-is-
important.html
http://www.sooperarticles.com/art-entertainment-articles/photography
articles/importance-professional-photo-editing-services-884472.html
http://www.axzopress.co
www.youtube.com/watch?v=E8DmvSO-QL0 m/downloads/pdf/1426019181pv.pdf
http://www.mediacollege.com/adobe/photoshop/intro.html
http://lanoie.com/classes/Photoshop/Layers/lectures/lecture.html
http://web.cortland.edu/flteach/mm-cyourse/photoshop.html
http://www.picturecorrect.com/tips/introductory-photoshop-lessons-and-tips/
http://encyclopedia2.thefreedictionary.com/Photo+editing
http://www.pcmag.com/encyclopedia_term/0,1237,t=image+editing&i=44789,00.asp
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e4100103
1ab64-78d2a.html
http://www.nscb.gov.ph/ncs/10thNCS/papers/invited%20papers/ips-06/ips06-02.pdf
HTTP://TINAAVALON.K12.MO.US/ASSIGN_FINAL_WEBSITE/MULTI-
MEDIA/PS_L1/PHOTOSHOP_LESSON_1.HTML
http://pc.net/glossary/definition/jpeg
http://helpx.adobe.com/photoshop/using/tools.html
Page 21
RUBRIC for BANNER
A. CREATIVITY
(30%)
30 24 18 12
• All of the objects • Four (4) to five (5) of • 50% of the objects were • 25% or less of the
Ingenuity/ were used to the objects were used used to form/signify objects were used to
Innovation form/signify meaning to form/signify meaning meaning or individuality. form/signify meaning
(30%) or individuality. or individuality. or individuality.
B. USE OF
PHOTO
EDITING
TOOLS
(50%)
50 40 30 20
Utilization of • All tools and • Four (4) to five (5) tools • Two (2) to three (3) tools • Only one (1) tool and
Tools and features were and features were and features were applied feature was applied
Features (50%) applied in the applied in the in the development of in the development of
development of development of design design design
design
Page 22
10 8 6 4
• All of the objects and • Four (4) to five (5) of • Two (2) to three (3) of the • Only one (1) of the
C. HARMONY choice of color were the objects and choice objects and choice of objects and one (1)
AND based in the of color were based in color were based in the choice of color was
BALANCE elements and the elements and elements and principles
based in the
principles of design. principles of design. of design.
(10%) elements and
principles of design.
10 8 6 4
D. RELEVANCE • The design clearly • The design reflected • The design reflected • No relevance to its
TO THE reflected the some major key points minor key points to its purpose.
PURPOSE concept/purpose. of the theme. purpose.
(10%)
Total : 100%
Page 23