ST. BLAISE COMMUNITY ACADEMY, INC.
Poblacion, San Luis, Batangas
EMPOWERMENT
TECHNOLOGY
Quarter 2 - Module 6
“Imaging and Design for the Online
Environment (Part 2)”
_________________________________________________________
NAME
Subject Matter: Empowerment Technologies
Topic: Imaging and Design for the Online Environment (Part 1)
(Quarter 1- Module 6)
Learning Competencies:
WHAT I NEED -Evaluate existing websites and online resources based on the
TO KNOW principles of layout, graphic, and visual message design.
-Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose
Specific Objectives:
At the end of the lesson, you should achieve the following objectives:
1. identify the different principles and basic techniques of image manipulation;
2. apply the basic image manipulation techniques using Photoshop; and
3. upload and share images using an online image hosting website.
WHAT I KNOW
Direction: Choose the letter of the best answer. Write your answer on the space
provided before each number.
________1. A free image manipulation tool that has batch edit, viewer, and
paper print features.
a. Picasa c. GIMP
b. Photoshop d. Irfan View
________2. It is the process of editing multiple pictures at once using one setting.
a. batch editing c. paper printing
b. animation d. collage making
________3. All of the following are image hosting sites except
a. Powerpoint c. Flickr
b. Photobucket d. SlickPic
________4. In any image manipulation program, this command will allow you to
make changes in the mixture of colors in an image.
a. Brightness and Contrast c. Cropping
b. Color Balance d. Compression and Resizing
________5. All of the following are online graphics software except.
a. Picasa c. Pixlr
b. Fotor d. Photoshop
1
WHAT’S NEW
Direction: List down what’s wrong with this poster in terms of design.
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
___________________________________________________
WHAT IS IT
Principles and Basic Techniques of Image Manipulation
Whether you are using a free image
manipulation program or purchased
one, there are basic techniques
common to all image editing programs.
1. Cropping – It is a process of
removing unwanted parts of the
image, focusing only on the subject.
When cropping, one must always
follow the Rule of Thirds to organize
the image composition.
2
2. Color Balance – In any image manipulating program, this command will
allow you to make changes in the mixture of colors in an image.
3. Adjusting Brightness and Contrast – This command is the most basic technique
when adjusting the image tone (highlights, shadows, and midtones).
4. Compression and Resizing –
Compressing and Resizing an
image is an important aspect
in image manipulation.
Images to be uploaded on
the web must be pf the
standard resolution of 72 dpi
(dots per inch) to maintain its
image file size of 30-50 KB. If
the image is for printing, set
the maximum resolution to 300
dpi at set its physical printing
size in inches.
3
5. Color Blending – Use the different special effects buttons available in the
different image editing software. You can combine colors and commands that
will give you a more dynamic image result.
6. Combining
Multiple Images –
Compositions must
be planned and
conceptualized first
so that you will be
able to render the
best image and
message possible.
4
Online Graphics Software
There are a lot of image editing sites on the internet that also offer basic
and advanced techniques that we can do with other professional software.
Based on TechRadar, the following are the list of websites that you can
try as beginners in the field or for professionals who would like to try other
software.
1. BeFunky. With BeFunky's photo editor, you can play with hundreds of amazing
photo effects that you can't find anywhere else, like our worldfamous
Cartoonizer®, oil painting, and pop art effects.
2. Fotor. It is a multiplatform photo editing website. It offers a wide range of
effects and tools for editing images.
5
3. Pixlr. It is also a multiplatform image editing program. You can choose
between the editor for editing images or creating an original image right through
the browser.
Other image editing suite that can be downloaded for free:
✅Serif PhotoPlus Starter Edition
✅ GIMP
✅ Paint.Net
Image Hosting Sites
Images also can be shared online through different web hosting sites that are
free. You just need to create a free account, and you will be able to post,
organize, and share your photos. The following is a list of different hosting sites
you can try.
1. Imgur – It is a free image hosting site wherein you
can upload images from your computer. You can also
edit your images before posting it online.
2. Flickr – It is an image social networking site. You can
save and manage your photos for it offers a 1 TB
storage capacity in your account.
6
3. Photobucket – It has almost similar features with Flickr
as you can upload and share your images over the
internet through your account.
4. SlickPic – It is an online image-hosting service that
allows you to upload and store an unlimited number of
photos online. You can create as many albums, and it
also offers professional editing of images.
5. Zenfolio – It is an online image-hosting site that does
not only allow you to upload image but also lets you
create an online image website for your images.
6. Photoshop - is an image creation, graphic design
and photo editing software developed by Adobe. The
software provides many image editing features for
pixel-based images, raster graphics and vector
graphics.
COMMON FEATURES OF PHOTOSHOP
Adobe Photoshop was first released in 1988. Created by Thomas and John
Knoll, it was initially developed for Macintosh computers but is now available
for Windows and macOS platforms.
Photoshop is part of the Adobe Creative Cloud, which includes other popular
tools such as Adobe Illustrator, Photoshop Lightroom and Adobe
Dreamweaver. Photoshop Creative Cloud allows users to work on image and
graphic content from anywhere.
SEPARATE TUTORIAL WORKBOOK WILL BE PROVIDED FOR PHOTOSHOP TUTORIALS
WHAT’S MORE
DIRECTIONS: Answer the following questions
1. Why is Photoshop efficient to use and when is the time we need to
manipulate an image?
7
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. What could be the necessary features of an image hosting site?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
WHAT I CAN DO
RUBRIC FOR POSTER
TASK DESCRIPTION:
Suppose you are a dedicated member of an animal activist group, you are
tasked to create a poster of the pet show that will be sponsored by you group.
The poster should contain adorable images of typical pets and should entice
participants. Basic information of the event should be written clearly. The name
of the organizers and their contact information should be placed also. Use any
image manipulation you are comfortable with. Once you are done, print your
work and submit it to your teacher.
weight
Criteria Exceptional Admirable Marginal Unacceptable
❑ Appropriate ❑ Most details ❑ Few details ❑ No details
details support support to support
support main main idea main idea main idea
idea ❑ Accurate ❑ Lacking ❑ Information
❑ Accurate information accurate is not
and detailed for almost all information accurate
information subject ❑ Inadequat ❑ Information
❑ Information matter e does not
adequately ❑ Information information support the
Content 50% supports is mostly is not visual’s
purpose of adequate clearly purpose
visual and supportive
supportive of visual’s
of visual’s purpose
purpose
8
❑ Topic and ❑ Topic and ❑ Topic and ❑ Topic and
title clear and title are title difficult title are not
easily mostly clear to identify clearly
identified and easily ❑ Main idea identified
❑ Main idea is identified not clearly ❑ No main
clearly ❑ Main idea is stated idea
Focus 20% appropriate appropriate ❑ Few ❑ Illustrations
to topic to topic illustrations do not
❑ All illustrations ❑ Most compleme complemen
complement illustrations nt purpose t purpose of
purpose of complemen of visual visual
visual t purpose of
visual
❑ Outstanding ❑ Adequate use ❑ Inappropriat ❑ Little attempt
use of color, of color, e use of to use color,
design, and design, and color, design and
space Design design, and space
space
is adequate space appropriately
❑ Original and ❑ Overall design ❑ Design lacks ❑ Design is dull
Visual
20% creative is mostly creativity ❑ Project has
Appeal
design pleasing and ❑ Lack of sloppy
❑ Overall harmonious harmonious appearance
design is design in
pleasing and presentation
harmonious
❑ Free of ❑ Mostly free of ❑ Frequent ❑ Too frequent
grammatical grammatical grammatical grammatical
errors errors errors errors
❑ Most words ❑ Presentation ❑ Distractive
Mechanics 10% ❑ Words are
are legible is illegible elements
legible and and pertinent and make
pertinent to to topic confusing illustration
topic ineffective
ASSESSMENT
True or False. Direction: Write true if the statement is correct and False if it is
incorrect.
__________________1. When cropping an image, one must follow the rule of thirds.
__________________2. Accurate compression of an image will help you save
memory space.
__________________3. BeFunky, Pixlr, and Photobucket are examples of image
hosting sites.
__________________4. One must follow the rules that govern a website when
uploading an image.
__________________5. People who work on computer graphics and image
manipulation are called graphic artists.
__________________6. You can resize the picture in PhotoScape on the Viewer’s tab.
__________________7. You can create an animated GIF using PhotoScape.
9
__________________8. You are tasked to enhance an image captured in lowlight
therefore you must manipulate its shadows.
__________________9. If there is too much red in a picture, you will adjust its
brightness to balance the color.
__________________10. Resizing is a process of removing unwanted parts of the
image.
__________________11. Photobucket is an image manipulation program.
__________________12. You can use Pixlr without installing it to your computer.
__________________13. PhotoScape has a feature that can batch edit photos.
__________________14. If the image is for printing, set the resolution to 300 dpi.
__________________15. Imgur is an image manipulation program.
WHAT I CAN SHOW
Direction: Answer the question below.
Given the SBCA’s PVMGO, (Philosophy, Vision, Mission, Goals, and Objectives),
Can you justify if the contents of this lesson is still aligned and relevant to your
learning as a Blaisean student? Site an example.
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
____________________________________________________________________________
REFERENCES
• Callo, E. R. (2018). Imaging and Design for the Online Environment. In
Empowerment Technologies (pp. 35-40). Quezon City, Philippines: Sibs
Publishing House.
• Empowerment Technologies First Edition.(2016).Sampaloc Manila:Rex
Bookstore, Inc.
• https://www.techtarget.com/whatis/definition/Photoshop
• https://helpx.adobe.com/photoshop/tutorials.html
10
