INDUSTRIAL ARTS DEPARTMENT

SELF-INSTRUCTIONAL PACKETS
EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 5 September 21 – 22, 2020

The learners demonstrate an understanding of how to manipulate

Content Standard: text, graphics, and images to create ICT content intended for an
online environment.

The learners shall be able to independently apply the techniques of

Performance image manipulation and graphic design to create original or
Standard: derivative ICT content from existing images, text and graphic
elements for use in specific professional tracks.

Learning The learners evaluate existing websites and online resources based
Competency: on the principles of layout, graphic and visual message design.

Objectives: At the end of the lesson the student should be able to:
1. discuss the basic concept of website, design, principles of graphics and layout.
2. distinguish text, graphics, images and file formats as elements of ICT contents.
3. evaluate selected websites and online resources using evaluation instrument.
Content:
Imaging and Design for the Online Environment
(Subject Matter)
Learning Resources:
a. References:
https://en.wikipedia.org/wiki/Website
https://www.interaction-design.org/literature/topics/web-design
https://www.wearetrident.co.uk/six-main-principles-graphic-design/
https://99designs.com/blog/tips/image-file-types/
https://infograph.venngage.com/p/221558/basic-principles-of-graphics-
and-layout
https://www.resourcetechniques.co.uk/news/web-design/5-basic-
elements-of-web-design-100152
https://slideplayer.com/slide/7431196/

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson

Activity 5.6.1 IMAGE FORMAT AND EMBEDDED FILE (5 minutes)

1. Give 2 sample objects/materials that can be integrated or embed in a file.
2. Give 2 sample file image format you’ve learned in the previous lesson.

B. Establishing a purpose for the lesson

Activity 5.6.2 WEBSITES I VISIT REGULARLY (10 minutes)

1. Have you ever visited any website? Were you attracted to these websites? Why?
2. Will you keep visiting these websites? Please explain briefly your answer on your
sheet of paper.
3. List 5 different websites that you have or kept on visiting.

33
C. Presenting examples/instances of the lesson

A website is a collection of web pages and related content that is identified by a

common domain name and published on at least one web server. Examples
are wikipedia.org, google.com, and amazon.com.

Websites are typically dedicated to a particular topic or purpose, such as news,

education, commerce, entertainment, social networking, etc.

Users can access websites on a range of devices, including desktops, laptops, tablets,
and smartphones. The software application used on these devices is called a web
browser.

Web design refers to the design of websites that are displayed on the internet. It
usually refers to the user experience aspects and it used to be focused on designing
websites for desktop browsers; however, since the mid-2010s, design for mobile and
tablet browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a
website. Appearance, for instance, relates to the colors, font, and images used. Layout
refers to how information is structured and categorized. A good web design is easy to use,
aesthetically pleasing, and suits the user group and brand of the website.

D. Discussing new concepts

The main design principles that apply to any piece of graphic design

The principles of design suggest how a designer can best arrange the various elements of
a page layout in connection to the overall graphic design and to each other. How these
principles are applied determines how effective the design is in conveying the desired
message and how attractive it appears.

The elements or principles of visual design include balance, alignment, contrast,

proximity/unity, repetition/consistency, and white space. These principles of design work
together to create something that is aesthetically pleasing and optimizes the user
experience of an ICT content whether for soft copy, print, or for online environment.

Balance
Visual balance comes from arranging the elements so that no section is heavier than
another. Sometimes elements are thrown out of balance to give emphasis or create a
certain mood. Typography, colors, images, shapes, patterns, etc.—carries a visual weight.
Some elements are heavy and draw the eye, while other elements are lighter. The way
that these elements are laid out on a page should create a feeling of balance

34
Contrast refers to how different elements are in a design, making them more easily
discernible from one another. Contrast is very important in creating accessible designs.
Insufficient contrast can make text content in particular very difficult to read, especially for
people with visual impairments

Proximity/Unity
The relationship between people or elements in a design is affected by proximity. How
close or far apart elements are suggests a relationship or lack of. Unity can be created by
using a third element to connect distant parts. Are all the title elements together? Is
contact information all together? Are all related elements together? In design proximity or
closeness creates a bond or a link.

Alignment
Alignment brings order to the design. How type and graphics are aligned on a page and in
relation to each other makes the layout easier or more difficult to read. Has a grid been
used? Is there a common alignment?

Repetition/Consistency
Repeating design elements and consistency of style shows a reader where to go and
helps them navigate the design. Do the page numbers appear in the same place from
page to page? Are headlines consistent in size style, placement? Is the style consistent
throughout?

White space
Designs that cram too much into a small space are uncomfortable and maybe confusing
and difficult to read. White space gives the design breathing space. Is there enough space
between columns of text? Does text sit clear of the graphics? But beware too much white
space and the elements will seem to float on the page.

What is visual message design?

Visual message design involves the appropriate considerations of visual perceptions

when designing an instructional program. The interpretation of pictures is based on prior
experiences, culture, etc ... The purpose of visual message design is to gain attention,
create meaning, and facilitate retention.

Infographics - also known as data visualization, information design, and communication

design are graphic visual representations of information, data, or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing graphics to
enhance the human visual system's ability to see patterns and trends.

The Elements of Infographics:

 Text
 Graphs
 Pictures
 Diagrams
 Narrative
 Timelines
 Check list

Infographics allow us to TELL a more complete STORY of the data and are more
ENGAGING than most traditional ways of communicating data and information. The focus
of good infographics is always on communicating INSIGHTS.

35
 Types of Infographics
1. Statistical
2. Process Flow
3. Geographic

Process of Making Infographics

Research - know what is needed, take a
reference, know the audience, decide the type
of infographics
Brainstorm - gather ideas, build thought
process
Design - choose your tool and start designing
Review - cross check the data to deliver
flawless output
Launch - make it viral, share on social network

Best Practices When Creating Infographics

a) Maintain a structure
b) Don’t use more than 3 color palletes
c) Typography matters a lot
d) Include source and references

E. Continuation of the discussion of new concepts

A file format is a standard way that information is encoded for storage in a computer file.
It specifies how bits are used to encode information in a digital storage medium. File
formats may be either proprietary or free and may be either unpublished or open.

Types of Image File Format

JPEG (or JPG) - Joint Photographic Experts Group

JPEGs might be the most common file type you run across on the web, and more than
likely the kind of image that is in your company's MS Word version of its letterhead.
JPEGs are known for their "lossy" compression, meaning that the quality of the image
decreases as the file size decreases.

PNG - Portable Network Graphics

PNGs are amazing for interactive documents such as web pages, but are not suitable for
print. While PNGs are "lossless," meaning you can edit them and not lose quality, they are
still low resolution.

36
 GIF - Graphics Interchange Format
GIFs are most common in their animated form, which are all the rage on Tumblr pages
and in banner ads. It seems like every other day we have a new Grumpy Cat or Honey
Boo Boo animated GIF. In their more basic form, GIFs are formed from up to 256 colors
in the RGB colorspace. Due to the limited number of colors, the file size is drastically
reduced.

TIFF - Tagged Image File

A TIF 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.

PSD - Photoshop Document

PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics
editing software ever. This type of file contains "layers" that make modifying the image
much easier to handle. This is also the program that generates the raster file types
mentioned above.

PDF - Portable Document Format

PDFs were invented by Adobe with the goal of capturing and reviewing rich information
from any application, on any computer, with anyone, anywhere. I'd say they've been pretty
successful so far.

EPS - Encapsulated Postscript

EPS is a file in vector format that has been designed to produce high-resolution graphics
for print. Almost any kind of design software can create an EPS.

AI - Adobe Illustrator Document

AI is, by far, the image format most preferred by designers and the most reliable type of
file format for using images in all types of projects from web to print, etc.

INDD - Adobe Indesign Document

INDDs (Indesign Document) are files that are created and saved in Adobe Indesign.
Indesign is commonly used to create larger publications, such as newspapers, magazines
and eBooks.

RAW - Raw Image Formats

A RAW image is the least-processed image type on this list -- it's often the first format a
picture inherits when it's created. When you snap a photo with your camera, it's saved
immediately in a raw file format. Only when you upload your media to a new device and
edit it using image software is it saved using one of the image extensions explained
above.

F. Developing Mastery

Activity 5.6.3 INFOGRAPHIC: ELEMENTS AND PROCEDURE (10 minutes)

1. Enumerate 5 file format that you think are most appropriate in designing an ICT
content.
2. Give the 5 elements of infographics. In your own words, explain briefly each
element.
3. Create your own step by step procedures in accomplishing an infographic.

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

Activity 5.6.4 FILE FORMAT (15 minutes)

1. Based on your own honest opinion and experience, what is the difference between
PDS and PDF file format? Which one has advantages over the other? Why? Write
your composition on your activity sheet.

2. Compose in a 3 to 5 sentences why web design principles are necessary to consider

in a website?

H. Making generalizations and abstractions about the lesson

Cite instances where:

a. A website is necessary for an individual or organization particularly in our fast-
changing technology nowadays.
b. An image file format is most appropriate for a specific layout design

Knowing the basic design principles in web development is a key to producing, publishing,
and evaluating web resources.

I. Evaluating learning

Activity 5.6.5 WEBSITE EVALUATION (10 minutes)

Direction: Evaluate the given websites/online resources based on the following principles
and criteria:

Contents - relevant news/information, videos, and high-resolution imagery to make your

website ‘stickier’

Usability - must be easily navigable, intuitive, accessible and mobile-friendly.

Aesthetics - brand awareness, increase your credibility, and visually connect with the
audience.

Visibility - how to be found(map, contact info, email), what platforms to target and how to
utilize the content.

Interaction - must engage with your audience, hold their attention, direct them through the
stages of your website by putting a check on the box corresponding to your rating.

Rubric for web evaluation:

CRITERIA 1 2 3 4 5 SCORE
Contents

Usability

Aesthetics

Visibility

Interaction

38
 List of websites to evaluate:

a) facebook.com

b) pampangahigh.school

Note: If necessary, you can use the available connection to validate the given websites
under evaluation or simply recall your previous access of it.

J. Additional activities for application or remediation

Activity 5.6.6 INFOGRAPHICS MAKING (20 minutes)

Direction: Create your own infographics using your available materials in 1 Letter size (8.5”
X 11”) bondpaper. You may use cut-out, drawing, coloring pen, or any combination will do.

Topic: Information Drive / Awareness campaign about COVID19

Please see rubric provided below.

39
Rubric for Infographic Project

Weight
Criteria
Exceptional Admirable Marginal Unacceptable

 Appropriat  Most details  Few details  No details

e details support main support to support
support idea main idea main idea
Content 50% main idea  Accurate  Lacking  Informati
 Accurate and information for accurate on is not
detailed almost all informati accurate
information subject matter on  Information
 Information  Information is  Inadequate does not
adequately mostly adequate information is support the
supports and supportive of not clearly visual’s
purpose of visual’s purpose supportive of purpose
visual visual’s purpose
 Topic and title  Topic and title are  Topic and title  Topic and
clear and mostly clear and difficult to title are not
easily identified easily identified identify clearly
Focus 20%  Main idea  Main idea is  Main idea identified
is clearly appropriate to not clearly  No main idea
appropriat topic stated  Illustrations do
e to topic  Most  Few not
 All illustrations illustrations illustrations complement
complement complement complement purpose of
purpose of purpose of purpose of visual
visual visual visual
 Outstanding  Adequate use  Inappropriate  Little attempt
use of color, of color, use of color, to use color,
Visual design, and design, and design, and design and
Appeal 20% space space space space
 Original and  Design is  Design lacks appropriately
creative adequate creativity  Design is dull
design  Overall design is  Lack of  Project has
 Overall design mostly pleasing harmonious sloppy
is pleasing and and harmonious design in appearance
harmonious presentation
 Free of  Mostly free  Frequent  Too
grammatica of grammatical frequent
Mechanics 10% l errors grammatic errors grammati
 Words are al errors  Presentation is cal errors
legible and  Most words are illegible and  Distractive
pertinent to legible and confusing elements
topic pertinent to topic make
illustration
ineffective

40
 EMPOWERMENT TECHNOLOGY 11

QUARTER 1 – WK 5 September 23 – 25, 2020

The learners demonstrate an understanding of ICT in the context of

Content Standard:
global communication for specific professional track.

The learners shall be able to independently compose an insightful

Performance
reflection paper on the nature of ICT in the context of their lives,
Standard:
society, and professional tracks (Arts, Tech-Voc, Sports, Academic).

The learners use image manipulation techniques on existing images

Learning
to change or enhance their current state to communicate a message
Competency:
for a specific purpose.

Objectives: At the end of the lesson the student should be able to:
1. define and give examples of common Image Manipulation software.
2. define and discuss some common basic tools and features in image manipulation
software.
3. discuss and simulate various manipulating images techniques using Photoshop.
4. perform and/or simulate how to create, enhance layouts/graphics images to
communicate a message.
5.

Content: Principles and basic techniques of image manipulation

(Subject Matter) Combining text, graphics, and images

Learning Resources:
a. References:
https://www.google.com.ph/search?q=starving+people+picture&tbm=isc
h&ved=2ahUKEwijqt3UwYPqAhUjxosBHRedA9YQ2-cCegQIABAA&oq
https://roawieeblogs.wordpress.com/2017/10/05/principles-and-basic-
techniques-of-image-manipulation/
https://ictcom444251764.wordpress.com/2018/03/31/empowerment-
technologies-lessons-1-15/
wikimedia.org
https://helpx.adobe.com/photoshop/using/workspace-basics.html

b. Instructional
Materials SIPacks copy

Procedure:
A. Reviewing previous lesson or presenting the new lesson

Activity 5.7.1 LOOK AT ME! AM I COMBINED OR NOT (5 minutes)

Direction: Identify if the picture shown is a combination of different images or not. Write
“PURE” if the picture is pure (taken without adjusting or adding extra graphics) or
“COMBINED” if the picture shows enhancements or combination of different images on
the space provided before each number.

41
 1. __________________ 2. __________________

3. __________________ 4. __________________

5. __________________

B. Establishing a purpose for the lesson

Activity 5.7.2 ANALYZING IMAGES (10 minutes)

Based from your answers on the activity “Look at me! Am I combined or not?” answer
the following questions in a 1 whole sheet of paper.

1. Which among the pictures shows that it is a combination of different images?

(*use numbers in identifying)

2. What are the possible tools used in combining different images forming one(1)
picture? Give at least 3 tools that you thought were used. In your own words, how were
these images combined using the tools you’ve mentioned in question number 2?

C. Presenting examples/instances of the lesson

Image manipulation or image retouching - involves changing or altering an image in the

way you want it to be. Different software/apps are used in manipulating images to make
the image more appealing and enticing to the eye of the viewer.

Photo manipulation techniques help you be a magician as you can change your
photograph in your way that apparently seems real and fantastic though it’s manipulated.
This method also allows you to make your beautiful images more professional and
enticing.

42
 Examples of image manipulation software are Adobe Photoshop, Mobile Image Editor,
remove.bg, GIMP.

D. Discussing new concepts

Most of the time, we just capture an image and upload it on our Facebook account. From
there, Facebook does the rest by formatting our image to best fit the standards set by
Facebook. But once you run your own website, you will have to edit your images. It seems
a simple task but you have to strike the balance between the right image quality and the
time for the page to load these images.

Personal websites do not necessarily have to downsize the file size of the images. But if
you have a wider target audience, you need to make the necessary changes. Here are
some tips to help you edit images from your website:

Choose the right file format. Try to make a real-life photograph into GIF to see the
difference between PNG, GIF and JPEG. Knowing the purpose is the key to finding out the
best file formats.

You might review the previous lesson to check on other file formats

Choose the right image size. A camera with 12 megapixels constitutes to a bigger image
size. Monitors have a resolution limit, so even if you have a million megapixels, it will not
display everything. Thus, it is not always wise to make our image big, most especially in a
website. Know how much space you want the image to consume. Or have a “preview”
image where the audience has the option to “see full size”.

Caption it. Remember to put a caption on images whenever possible. If it’s not
related to the web page, then remove it.

43
Photo Editing

Photo editing encompasses the processes of altering images, whether they are digital
photographs, traditional photo chemical photographs, or illustrations. Traditional
analog image editing is known as photo retouching, using tools such as an airbrush to
modify photographs, or editing illustrations with any traditional art medium.

Basic of Image Editing

Raster Images are stored in a computer in the form of a grid of picture elements or
pixels.
Vector Images such as Adobe Illustrator, Inkscape and etc. are used to create and
modify vector images, which are stored as descriptions of lines, Bezier curves and text
instead of pixels.
Difference Between Raster And Vector Images

Graphic software programs

Graphics software/apps can be broadly grouped into vector graphics editors, raster
graphics editors, and 3D modelers are the primary tools with which a user may
manipulate, enhance, and transform images. Many image editing programs are also
used to render or create computer art from scratch.

Basic Image Manipulation using Offline or Open-source(free) Application

1. Picasa is a free online photo-sharing tool provided by Google. Once a user
downloads Picasa, it automatically locates photos on the user's PC and moves
them to Picasa. The program then allows users to edit photos, compile and
organize albums and share photos online.
2. Paint.net (stylized as Paint.NET or paint.net) is a freeware raster graphics editor
program for Microsoft Windows, developed on the .NET Framework.
3. Sketch Up - A 3D modelling program from Google that is known for its ease of
use. Used for architectural purposes as well as films and games designs.
4. Pixlr. Photographers may already be familiar with Pixlr, Autodesk’s browser-based
photo editor, and its mobile companion Pixlr Express for iOS and Android. Today,
Autodesk announced Pixlr in a new format: a desktop version for Mac and
Windows.
5. Photoshop an image editing software developed and manufactured by Adobe
Systems Inc. Photoshop is considered one of the leaders in photo editing

44
 software. The software allows users to manipulate, crop, resize, and correct color
on digital photos. (not free)
6. GIMP ( /ɡɪmp/ GHIMP) (GNU Image Manipulation Program) is a free and open-
source raster graphics editor used for image retouching and editing, free- form
drawing, converting between different image formats, and more specialized tasks.
7. Paint 3D – of Microsoft’s Windows 10
8. PicsArt – is the go-to, all-in-one photo and video editor on mobile

Picasa
Paint.net

Google Sketch Up Pixlr

Photoshop (not open source) GIMP

Windows 10 Paint 3D Picsart

E. Continuation of the discussion of new concepts

In this part of the subject, you will be expected to simulate or demonstrate your ability to
use digital tools to produce materials for printing, posting, and at some later point in the
course, uploading images to online.

45
 As a matter of practice and simulation, you will be using the Photoshop.
Some Common Features of Adobe Photoshop

Image Size resize images in a process Layers which are analogous to sheets of
often called image scaling, making them transparent acetate, stacked on top of
larger, or smaller. High image resolution each other, each capable of being
cameras can produce large images which individually positioned, altered and
are often reduced in size for Internet use. blended with the layers below, w/o
affecting any of the elements on the other
layers.

Cloning uses the current brush to copy Cropping creates a new image by
from an image or pattern. It has many selecting a desired rectangular portion
uses: one of the most important is to from the image being cropped. The
repair problem areas in digital photos. unwanted part of the image is discarded.
Image cropping does not reduce the
resolution of the area cropped.

Sharpening And Softening –

Perspective – is the art of drawing solid
Sharpening makes images clearer. Too
objects on a two- dimensional surface so
much sharpening causes grains on the
as to give the right impression of their
surface of the image. Softening makes
height, width, depth and position in
images softer that removes some of the
relation to each other when viewed from
highly visible flaws. Too much causes the
a particular point.
image to blur.

46
Saturation - is an expression for the Contrast And Brightening
relative bandwidth of the visible output Contrast of images and brighten or
from a light source. As saturation darken the image. Adjusting contrast
increase, colors appear more “pure.’’ As means adjusting brightness because they
saturation decreases, colors appear more work together to make a better image.
‘’ washed-out.’’

Photo Manipulation
Photo manipulation involves transforming or altering a photograph using various methods
and techniques to achieve desired results. Some photo manipulations are considered
skillful artwork while others are frowned upon as unethical practices, especially when used
to deceive the public, such as hat used for political propaganda , or to make a product or
person look better.

Differences between Photo Editing and Photo Animation

Photo Editing – signifies the regular process used to enhance photos and to create
them ‘’Actual editing simple process’’. Also includes some of the regular programs used
for editing and expose how to use them.

Photo Manipulation – includes all simple editing techniques and have some
manipulation techniques like erasing, adding objects , adding some graphical effects,
background correction, creating incredible effect, change elements in an image, adding

47
styles , eliminating blemishes from a person’s face and changing the features of a
person’s body.

Some Common Tools of Adobe Photoshop

Move Tool * ( V )is used to Spot Healing Brush Tool *( J

move layers, selections )removes blemishes and other
and guides within a minor problem areas in an
Photoshop document. Enable image. Use a brush size slightly
"Auto-Select" to automatically larger than the blemish for best
select the layer or group you results.
click on.
Lasso Tool * ( L ) can Content-Aware Move Tool
draw a freeform selection (J) select and move part of an
outline around an object. image to a different area.
Photoshop automatically fills in the
hole in the original spot using
elements from the surrounding
areas.
Quick Selection Tool ( W Red Eye Tool ( J ) removes
) lets you easily select an common red eye problems in
object simply by painting a photo resulting from camera
over it with a brush. Enable flash.
"Auto-Enhance" in the Options
Bar for better quality selections.
Magic Wand Tool ( W ) Eraser Tool * ( E )
selects areas of similar permanently erases pixels on
color with a single click. a layer. It can also be used to
The "Tolerance" value in the paint in a previous history state.
Options Bar sets the range of
colors that will be selected.
Crop Tool * ( C ) crop an Magic Eraser Tool ( E )
image and remove selects areas of similar color
unwanted areas. Uncheck with a single click but
"Delete Cropped Pixels" in the permanently deletes those areas.
Options Bar to crop an image
non-destructively.
Perspective Crop Tool ( C Gradient Tool * ( G ) draws
) both crop an image and gradual blends between
fix common distortion or multiple colors and lets you
perspective problems. create and customize your own
gradients.
Freeform Pen Tool ( P ) Horizontal Type Tool * ( T )
allows you to draw use the Horizontal Type Tool
freehand paths or shapes. to add standard type to your
Anchor points are automatically document.
added to the path as you draw.
Hand Tool * ( H ) click and Path Selection Tool * ( A )
drag an image around on (the black arrow) in
the screen to view different Photoshop to select and move
areas when zoomed in. an entire path at once.

Sample simulation on some features/tools of Adobe Photoshop that may seem magical in
their functions.

Note: In this portion, it is assumed that the files necessary for editing/enhancements are
opened in Photoshop and are ready for manipulation by using the appropriate
tools/features

Spot healing brush tool (J)

This tool allows users to remove blemishes on the part of the image where the tool is
applied.

48
Task: Remove/retouch skin blemishes on the face of the given subject (old woman).

Procedures:
1. When the file is opened, click on the Spot Healing Brush Tool or press J from
keyboard
2. Begin applying the tool on the wrinkles part on the face of the subject.
3. You can use other tools such as Ctrl + or Ctrl – in order to zoom in or zoom out the
image.
4. You can use the symbol [ to reduce or the ] to enlarge the brush tip size
5. You can also use the Hand tool (H)
6. Save file when retouch is done.

BEFORE AFTER
2. Content Aware Move Tool
This tool allows user to remove unwanted portion of the image by selecting such portion.
Task: Remove the photobombers(unwanted) body/people of the given subject (young
woman).

Procedures:

1. When the file is opened, select the Lasso Tool or press L from keyboard
2. Begin selecting the portion(in a circular motion) of subject to be removed one at a
time.
3. Drag the selected portion of the image outside the image or click on Edit + Fill +
Content-Aware + Ok
4. Repeat steps #2 and #3 if there are another portion to remove.
5. Save file when retouch is done.

49
 BEFORE AFTER

Note: What happened with the content aware tool is that it copies the surrounding pixels in
replacement to the removed portion. This is particularly effective for portions with uniform
or dominant pixel resolution

3. Quick Selection Tool (W)

This tool allows user to easily and quickly select a portion especially to change its
background.
Task: Quickly select the image of the subject and drag or move it to another opened
background image.

Procedures:

1. When the file is opened, select the Quick Selection Tool or press W from
keyboard
2. Begin selecting the image portion by dragging the mouse inside the portion being
selected. You can press Alt key when you want to deduct unwanted part of the
select.
3. You can use other tools such as Ctrl + or Ctrl – in order to zoom in or zoom out the
image.
4. You can use the symbol [ to reduce or the ] to enlarge the brush tip size
5. Drag the selected portion of the image onto another opened background image by

clicking the Move Tool or by pressing letter M from the keyboard and
releasing it to the background image.
6. Press Ctrl T for Free Transform to resize the moved, quickly-selected image. Press
Shift to maintain aspect ratio of the image while resizing. Deselect when done with
resizing.
7. Save file when retouch is done.

BEFORE AFTER

50
F. Developing Mastery

Activity 5.7.3 IMAGE MANIPULATION TECHNIQUE 1 (15 minutes)

1. Enumerate 5 Image Manipulating Software/Apps

2. Give 5 Tools in Photoshop
3. Simulate the image manipulation technique of spot healing brush tool
TASK: WRITE your own detailed step-by-step procedure for manipulating the given
image (left image – original; right image – enhanced). Use all necessary tools.

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

Activity 5.7.4 IMAGE MANIPULATION TECHNIQUE 2 (15 minutes)

1. Simulate the image manipulation technique of content aware move tool by writing
your own step-by-step procedures for the given image so that the final output will be
the removal/elimination of the hot air balloon on the image. Use all necessary tools.

2. Enumerate at least 5 events/activities which you can use image Manipulation

Techniques.

H. Making generalizations and abstractions about the lesson

Cite an instance in which Image manipulation techniques can help you in daily situation.
How was it become useful to that particular situation?

I. Evaluating learning

Activity 5.7.5 IMAGE MANIPULATION TECHNIQUE 3 (20 minutes)

1. Putting all the manipulation techniques together. Kindly refer to the given images.
Direction:

a. Using spot healing brush tool and all other appropriate tools, remove the
wrinkle blemishes of the subject(old couple) and do necessary retouches.
b. Using content aware move tool and all other appropriate tools, remove the 3
ducks swimming in the fish pond of the white house palace.

51
 c. Using quick selection tool and all other appropriate tools, select and move
the couple picture onto the white house palace as the background.

2. Write your own complete step-by-step procedure for performing or simulating the
entire process of image manipulation applying essential techniques for a derivative ICT
content.

J. Additional activities for application or remediation

Activity 5.7.6 IMAGE MANIPULATION TECHNIQUE 4 (30 minutes)

A. Create by simulation an Election Campaign Poster using Adobe Photoshop. You can
likewise use any other available tools. (please see attached rubric)
B. In your own words, discuss in writing the main difference between photo editing and
photo manipulation within 3 to 5 sentences.
C. Explain in 3 to 5 sentences by highlighting which of the tool/s or feature/s is/are most
essential to you? Why?

52
RUBRIC FOR CAMPAIGN POSTER

4 3 2 1
Best Effort Great Effort Good Effort Little Effort
The campaign The campaign The campaign poster The campaign poster
poster includes poster includes at includes at least 1 does not include any
at least 3 least 2 propaganda propaganda propaganda
propaganda techniques: technique: techniques and is
techniques: bandwagon, bandwagon, unclear.
bandwagon, testimonial, testimonial,
Content
testimonial, repetition, repetition, emotional
repetition, emotional words. words. The
emotional words. The techniques technique used is
The techniques used are somewhat ineffective.
used are effective.
effective.
25 20 15 10
Compelling Slogan present. No slogan. Poster No slogan. Poster is
slogan, poster Poster has has information but it disorganized and
has adequate appropriate amount is not easy to read. difficult to read.
information with information with a Has too much text or
a balance balance between too many pictures.
Organization between pictures and text. Unbalanced.
pictures and Information is easy
text. to read and flows.
Information is
easy to read
and flows.
10 8 6 4
The word choice The word choice is The word choice Word choices are
is unique and appropriate. does not enhance the incorrectly used
clever. propaganda and/or do not make
Word Choice techniques used. sense.
Word usage is bland.

5 4 3 2
Poster has been Poster has been Poster has been Poster has not
Punctuation
edited carefully edited with fewer edited with fewer than been edited and
and and has no than 3 errors. 5 errors. has multiple errors.
Grammar errors.
10 8 6 4
The ideas are The ideas are The ideas are not The ideas are not
fully developed, fully developed, developed, lack focus
developed, somewhat focused or original. and are not original.
Creativity focused and focused and are
original. good but not
original.
5 4 3 2
Appearance Appearance is Appearance is not Appearance is
shows time and neat and colorful. neat and lacks color. unfinished and
effort. Some handwritten The lack of effort is reflects that little
Appearance Poster is neat, text takes away noticeable. time and effort were
colorful and from overall put forth.
attention- polished look.
grabbing.
Overall
polished look.
5 4 3 2

pts pts pts pts

53