Imaging and Design for

Online Environment
Learner's Module in
Empowerment Technologies
Quarter 3 ● Module 5

ELJIM V. RAMOS
Developer
Department of Education • Cordillera Administrative Region
 Republic of the Philippines
DEPARTMENT OF EDUCATION
Cordillera Administrative Region
SCHOOLS DIVISION OF BAGUIO CITY
Military Cut-off, Baguio City

Published by:
DepEd Schools Division of Baguio City
Curriculum Implementation Division

COPYRIGHT NOTICE
2020

Section 9 of Presidential Decree No. 49 provides:

“No copyright shall subsist in any work of the Government of the Philippines.
However, prior approval of the government agency of office wherein the work is
created shall be necessary for exploitation of such work for profit.”

This material has been developed for the implementation of K-12 Curriculum
through the DepEd Schools Division of Baguio City - Curriculum Implementation
Division (CID). It can be reproduced for educational purposes and the source must be
acknowledged. Derivatives of the work including creating an edited version, an
enhancement or a supplementary work are permitted provided all original work is
acknowledged and the copyright is attributed. No work may be derived from this
material for commercial purposes and profit.

ii
 What I Know

MULTIPLE CHOICE: Write the letter of the correct answer on the space provided.
____1. It encompasses the processes of altering images, whether they are digital
photographs, traditional photo chemical photographs, or illustrations.
A. Photo editing B. Photo bomber C. Photo D. Layout

____2. Which 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.
A. Graphic software program C. Computer graphics
B. Photo Editing D. Portable network graphics

____3. These are images stored in a computer in the form of a grid of picture
elements or pixels.
A. Vector Images C. Computer Graphics
B. Raster Images D. Images

____4. These 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.
A. Vector Images C. Computer Graphics
B. Raster Images D. Images

____5. It is a commonly used method of lossy compression for digital images,

particularly for those images produced by a digital photography.
A. GIF B. PNG C. JPEG D. BMP

____ 6. It is a raster graphics file format that supports lossless data compression.
A. GIF B. PNG C. JPEG D. BMP

____7. It is a lossless format for image files that supports both animated and static
images.
A. GIF B. PNG C. JPEG D. BMP

____8. It is a raster graphics image used to store bitmap digital images.

A. GIF B. PNG C. JPEG D. BMP

____9 It is a process often called image scaling, making them larger, or smaller.
A. Layers B. Image Size C. Cropping D. Cloning

5
____10. It creates a new image by selecting a desired rectangular portion from the
image being cropped.
A. Layers B. Image Size C. Cropping D. Cloning

____11. It uses the current brush to copy from an image or pattern. It has many
uses: one of the most important is to repair problem areas in digital photos.
A. Layers B. Image Size C. Cropping D. Cloning

____12. These are analogous to sheets of transparent acetate, stacked on top of

each other, each capable of being individually positioned, altered and blended with
the layers below, w/o affecting any of the elements on the other layers.
A. Layers B. Image Size C. Cropping D. Cloning

____13. It is the art of drawing solid objects on a two- dimensional surface so as to

give the right impression of their height, width, depth and position in relation to each
other when viewed from a particular point.
A. Perspective C. Saturation
B. Softening D. Photo manipulation

____14. It makes images softer that removes some of the highly visible flaws.
A. Perspective C. Saturation
B. Softening D. Photo manipulation

____15. It is an expression for the relative bandwidth of the visible output from a light
source. As saturation increase, colors appear more “pure.’’ As saturation decreases,
colors appear more ‘’ washed-out.’’
A. Perspective C. Saturation
B. Softening D. Photo manipulation

What’s In
The most important part of capturing product photos is the work that happens
AFTER they’re shot. Post-processing can both make up for effects you couldn’t create
during the shoot and enhance the beautiful feature you did capture. It’s essentially the
icing on the cake.
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.

(Notes taken from https://clippingpathindia.com/blogs/tips/what-is-photo-editing)

6
 What’s New
Graphic software programs
 Which 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 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

Activity 1: What’s the difference

In your own words, describe the difference between vector format and raster
format.
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

7
 What Is it
RASTER IMAGES use many colored pixels or individual building blocks to form a
complete image JPEGs, GIFs and PNGs are common raster image types. Almost all
of the photos found on the web and in print catalogs are raster images.

VECTOR IMAGES alternatively, allow for more flexibility. Constructed using

mathematical formulas rather than individual-colored blocks, vector file types such as
EPS, AI and PDF are excellent for creating graphics that frequently require resizing.

3D MODELING (OR MODELLING) is the process of developing a mathematical

representation of any three-dimensional surface of an object via specialized software.
The product is called a 3D model. It can be displayed as a two-dimensional image
through a process called 3D rendering or used in a computer simulation or physical
phenomena. The model can also be physically created using 3D printing devices.

IMAGE FORMATS
Ø JPEG is a commonly used method of lossy compression for digital images,
particularly for those images produced by a digital photography.
Ø PNG (PORTABLE NETWORK GRAPHICS) is a raster graphics file format that
supports lossless data compression.
Ø GIF a lossless format for image files that supports both animated and static images.
Ø BMP is a raster graphics image used to store bitmap digital images
Ø EPS used in vector-based images in Adobe Illustrator.
Ø SVG is an XML-based vector image format for two-dimensional graphics w/ support
for interactivity and animation
Ø .3ds is one of the file formats used by the Autodesk 3Ds Max 3D Modelling,
animation and rendering software.
Ø .fbx is an exchange format, in particular for interoperability between Autodesk
products and other digital content creation software

8
FEATURES OF IMAGE EDITORS

SELECTION One of the prerequisites for many of the app mentioned below is a
method of selecting part(s) of an image, thus applying a change selectively without
affecting the entire picture
Ø MARQUEE TOOL for selecting rectangular or other regular polygon-shaped
regions
Ø LASSO TOOL for freehand selection of a region
Ø MAGIC WAND TOOL selects objects or regions in the image defined by proximity
of color or luminance

LAYERS which are analogous to sheets of transparent acetate, stacked on top of

each other, each capable of being individually positioned, altered and blended with the
layers below, w/o affecting any of the elements on the other layers.

IMAGE SIZE resizing images in a process often called image scaling, making them
larger, or smaller. High image resolution cameras can produce large images which are
often reduced in size for Internet use.

CROPPING creates a new image by selecting a desired rectangular portion from the
image being cropped. The unwanted part of the image is discarded. Image cropping
does not reduce the resolution of the area cropped.

9
BEFORE AFTER

CLONING uses the current brush to copy from an image or pattern. It has many uses:
one of the most important is to repair problem areas in digital photos.

IMAGE ORIENTATION – Image editors are capable of altering an image to be rotated

in any direction and to any degree. Mirror images can be created and images can be
horizontally flipped or vertically flopped. Rotated image usually requires cropping
afterwards, in order to remove the resulting gaps at the image edges.

SHARPENING AND SOFTENING– Sharpening makes images clearer. Too much

sharpening causes grains on the surface of the image. Softening makes images softer
that removes some of the highly visible flaws. Too much causes the image to blur.

SATURATION- is an expression for the relative bandwidth of the visible output from a
light source. As saturation increase, colors appear more “pure.’’ As saturation
decreases, colors appear more ‘’ washed-out.’’

CONTRAST AND BRIGHTENING

Contrast of images and brighten or darken the image. Underexposed images can be
often be improved by using this feature.
Brightening lightens the image so the photo brightens up. Brightness is a relative
expression of the intensity of the energy output of a visible light source.
Adjusting contrast means adjusting brightness because they work together to make a
better image.

10
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
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 styles, eliminating blemishes from a person’s face and changing the
features of a person’s body.

Infographics also known as data visualization, information design, and

communication design

 It is any graphic that display and explains information, whether that be data or
words. When we use the term ‘’infographics’’, we’re using it as a general term
used to describe data presented in a visual way.

 Infographics are important because they change the way people find and
experience stories. Infographics are being used to augment editorial content on
the web, it creates a new way of seeing the world of data, and they help
communicate complex ideas in a clear and beautiful way.

11
TYPES OF INFOGRAPHICS
1. Statistical
2. Process Flow
3. Geographic

PROCESS OF MAKING INFOGRAPHICS

1. Research
a) Know what is needed b) Take a reference
c) Know the audience d) Decide the type of infographics

2. Brainstorm
a) Gather ideas b) Build thought process

3. Design
Choose your tool and start designing

4. Review
Cross check the data to deliver flawless output

5. Launch
a) Make it viral b) Share on social network

BEST PRACTICES WHEN CREATING INFOGRAPHICS

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

(Notes taken from https://ictcom444251764.wordpress.com/blog/)

12
 What’s More

ACTIVITY 2. What do you think are the advantages of picture editing and
enhancement in our computer? Write at least two advantages.
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________

What I Have Learned

ACTIVITY 3: Answer completely the question below.
Fill in the blanks: Write the correct word inside the blanks
Photo editing encompasses the processes of altering images, whether they
are ____________________, traditional photo chemical photographs, or
illustrations. Traditional analog image editing is known as _______________,
using tools such as an airbrush to ________________, or editing illustrations
with any traditional art medium.

What I Can Do
ACTIVITY 4: In this activity, you will be editing a photo taken from your cellphone and
making it more beautiful than the original. Photos should be from the nature taken near
to your place. You will be using any photo editing application from your phone or in a
computer. You will be submitting to photos, the original and the edited photo. You may
send your photos directly to your teacher.

13
 Assessment
MULTIPLE CHOICE: Write the letter of the correct answer on the space provided.

____1. It uses the current brush to copy from an image or pattern. It has many uses:
one of the most important is to repair problem areas in digital photos.
A. Layers B. Image Size C. Cropping D. Cloning

____2. These are analogous to sheets of transparent acetate, stacked on top of

each other, each capable of being individually positioned, altered and blended with
the layers below, w/o affecting any of the elements on the other layers.
A. Layers B. Image Size C. Cropping D. Cloning

____3. It is the art of drawing solid objects on a two- dimensional surface so as to

give the right impression of their height, width, depth and position in relation to each
other when viewed from a particular point.
A. Perspective C. Saturation
B. Softening D. Photo manipulation

____4. It makes images softer that removes some of the highly visible flaws.
A. Perspective C. Saturation
B. Softening D. Photo manipulation

____5. It is an expression for the relative bandwidth of the visible output from a light
source. As saturation increase, colors appear more “pure.’’ As saturation decreases,
colors appear more ‘’ washed-out.’’
A. Perspective C. Saturation
B. Softening D. Photo manipulation

____6. It encompasses the processes of altering images, whether they are digital
photographs, traditional photo chemical photographs, or illustrations.
A. Photo editing B. Photo bomber C. Photo D. Layout

____7. Which 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.
A. Graphic software program C. Computer graphics
B. Photo Editing D. Portable network graphics

____8. These are images stored in a computer in the form of a grid of picture
elements or pixels.
A. Vector Images C. Computer Graphics

14
 B. Raster Images D. Images
____9. These 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.
A. Vector Images C. Computer Graphics
B. Raster Images D. Images

____10. It is a commonly used method of lossy compression for digital images,

particularly for those images produced by a digital photography.
A. GIF B. PNG C. JPEG D. BMP

____ 11. It is a raster graphics file format that supports lossless data compression.
A. GIF B. PNG C. JPEG D. BMP

____12. It is a lossless format for image files that supports both animated and static
images.
A. GIF B. PNG C. JPEG D. BMP

____13. It is a raster graphics image used to store bitmap digital images.

A. GIF B. PNG C. JPEG D. BMP

____14. It is a process often called image scaling, making them larger, or smaller.
A. Layers B. Image Size C. Cropping D. Cloning

____15. It creates a new image by selecting a desired rectangular portion from the
image being cropped.
A. Layers B. Image Size C. Cropping D. Cloning

15
 16
Pre-Test Activity 1: Activity 2: Activity 4: Assessment
1. a Raster form of Student own Student Project: Picture 1. d
2. a a grid of answer. editing and enhancement 2. a
3. b elements of 3. a
4. a pixels while Activity 3: 4. b
5. c vector Bezier Digital 5. c
6. b curves. photographs, 6. a
7. a Photo 7. a
8. d retouching, 8. b
9. b Modify 9. a
10. c photograph. 10. c
11. d 11. b
12. a 12. a
13. a 13. d
14. b 14. b
15. c 15. c
Answer Key
REFERENCES
What Is Photo Editing?: A Definition. Clipping Path India. Accessed October 30,
2018. https://clippingpathindia.com/blogs/tips/what-is-photo-editing.

Joyce Regis, “Empowerment Technologies Lessons 1 to 15.” March 31, 2018,

https://ictcom444251764.wordpress.com.

17