11

PRINCE OF PEACE COLLEGE, INC.

Balete, Poblacion, Puerto Galera, Oriental Mindoro

EMPOWERMENT TECHNOLOGIES
12
Quarter 1 – Module 6
Imaging and Design
for Online
Environment

Prepared by

Mrs. Mary Grace B. Pacultad

ETECH Teacher
i Submitted to

Yolanda L. Manongsong, MaEd

School Principal
 What I Need to Know

This module was designed and written with you in mind. It is here to
help you master the context of Empowerment Technologies. It contains
varied activities that can help you as a Senior High School student to
succeed in environments that require the use of computer and the
Internet.
The module contains lessons in Imaging and Design for Online
Environment which allows students to understand the principles and
techniques in image manipulation.
Happy learning!
Content Standard:
 How to manipulate text, graphics, and images to create ICT
content intended for an online environment

Performance Standard:
 At the end of the 2-week period independently apply the
techniques of image manipulation and graphic design to create
original or derivative ICT content from existing images, text and
graphic elements for use in specific professional tracks.
These may be in the form of, but not limited to:
1. Team/ athlete/ league recruitment posters (Sports)
2. Logo or crest for a community, school organization or
barkada (Arts)
3. Labeling and manual of operation for tools and equipment
(Tech-Voc)
4. Presentation of cafeteria patronage data (Business/ Academic)

MOST ESSENTIAL LEARNING COMPETENCIES:

 evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design
(CS_ICT11/12-ICTPT-Ie-f- 6)
 use image manipulation techniques on existing images to change or
enhance their current state to communicate a message for a
specific purpose (CS_ICT11/12-ICTPT-Ie-f- 7)
 create an original or derivative ICT content to effectively
communicate a visual message in an online environment related to
specific professional tracks… (CS_ICT11/12-ICTPT-Ie-f- 8)
Smart Check up

Direction: Write the letter of the correct answer in your notebook.

1. It makes complex data become more visually appealing to the average user.
a. Tables c. Infographics
b. Piktochart d. Slideshows

2. The elements should not be cluttered and not compete with each other.
a. Proximity and harmony c. Asymmetrical
b. Emphasis c. Consistency

3. There should be one point of interest in a page.

a. Symmetrical c. Color and shape
b. Image d. Emphasis

4. It is a web-based infographic application which allows users without

intensive experience as graphic designers to easily create infographics
and visuals using themed templates.
a. Adobe Photoshop c. Piktochart
b. Photobucket d. PhotoScape

5. It allows you to insert lines, shapes, icons, and even photos.

a. Graphics c. Text
b. Background d. Upload

6. It allows you to insert text to your infographic with the option to add
text frames
a. Tools c. Uploads
b. Text d. Graphics

7. It allows you to modify the color scheme of your infographic.

a. Styles c. Graphics
b. Tools d. Uploads

8. It is a raster graphics editor used for editing images, designing

websites, editing videos, and creating 3D artwork.
a. Photobucket c. Piktochart
b. Adobe Photoshop d. PhotoScape

9. It is an image hosting site in the Internet.

a. Adobe Photoshop c. Photobucket
b. PhotoScape d. Piktochart

10. Use this to select parts of your images that you want to edit or enhance
a. Drawing tool c. Typing tool
b. Selection tool d. Painting tool
Knowledge Bank

Layout is the process of planning and arranging graphics or text in a

page or book. A good layout should have a balanced make up and
alignment of elements.
Basic Principles of Graphics and Layout
1. Symmetrical: There should be equal weights or elements on both sides
of the page.

2. Asymmetrical: It may be asymmetrical when there is an artistic and

different intensity on one side of the page.

3. Text: It should be: • Legible • Has appropriate font face • Left justified, right
justified, or centered • The flow of text should be easy to read.
4. Image: The image should be: • Proportionate • Sharp in color • With high
resolution • With appropriate captions.

5. Proximity and Harmony: The elements should be close together and

scattered and arranged apart from each other. Elements should not be
cluttered and not compete with each other.

6. Consistency: There should be uniformity of theme on each page.

7. Color and Shape: Use color to create interest by providing variety in

the design (color contrast and shapes).
 8. Emphasis: There should be one point of interest in a page. The
elements to be emphasized should have a different size, color,
shape, or background.

Infographics

Information graphics or infographics are used to represent

information, statistical data, or knowledge in a graphical manner usually
done in a creative way to attract the viewer’s attention. It makes complex
data more visually appealing to the viewers.

Creating Infographics Using Piktochart

Piktochart is a web-based infographic application which allows users

without intensive experience as graphic designers to easily create
infographics and visuals using themed templates. Let us create an
infographics using piktochart.com

1. In your browser, go to Piktochart.com and click sign up found at the

upper right corner of the page to create your Piktochart account.

2. Fill-up the information on the Sign Up page. You can use to auto-
signup using your Google+ or Facebook account.
3. Once you have created your account and logged in, click infographics
then select a template.

4. The Piktochart editor will open (may take a while to load depending on
your internet connection). You can now edit the template.

5. While editing, you can use the various tools on the left side of the page.

a. Graphics – allows you to insert lines, shapes, icons, and even photos
b. Uploads – allows you to upload images for your infographics
c. Background – changes the background of a selected block
d. Text – allows you to insert text to your infographic with the option
to add text frames
e. Styles – allows you to modify the color scheme of your infographic
f. Tools – allows you to create charts, maps, and videos

6. To save your work, click on Save on the top right of the page. To
save it in your computer, click on Download. In the Download
options, select the medium-sized and the PNG file type.
Creating and Manipulating Images Using Adobe Photoshop

Adobe Photoshop is a raster graphics editor, an imaging

and
graphic design software used by thousands of people in many
different roles across the world. Not only is it for photos but you can use
Photoshop for designing websites, editing videos, and creating 3D
artwork.
As a beginner in Photoshop, it’s important to understand the anatomy of
the interface before you get
started. When you open the
program, you’ll see the
main menu along the top,
like other programs. Along
the left side, you’ll see a
sidebar that shows the main
tools. On the right side,
you’ll see the color tool and
the layers tool. Photoshop
files have default file
extension as
.PSD, which stands for "PhotoShop Document".

Photoshop Toolbox

The toolbox in the left

sidebar will be your best
friend. The tools are
organized into groups based
on what they do:

The top section features

selection, cropping, and
slicing tools. Use these to
select parts of your images that you want to edit or enhance, or
crop and slice out parts you want to exclude.
 The second section features retouch and paint tools. Use these to
get rid of unwanted spots on product items, draw on your image,
erase
certain parts, color them in, or enhance them by sharpening or
blurring.
 The third section is drawing and typing tools. Use these to write text
over your image or draw images onto them by hand using the pen
tool. We’ll go over the pen tool later.
 Image Adjustments: Grayscale (Black and White)
Color photographs can easily be turned into black and white. Changing
from color to black and white is called changing modes.
1. Open the photo that you want to edit.
2. Go to the Image Menu > Mode > Grayscale
3. The original Red-Green-Blue (RGB) image is now black and white.
4. Do a SAVE AS

ALTERNATE METHOD:
1. Reopen the file.
2. Make sure you are opening the unchanged
version of this photo.
3. Go to Image Menu > Adjustments >Hue and
Saturation.
4. Slide the triangle all the way to the left (-100)
and you de-saturate (or remove) all the color.
This image remains a color (RGB) photo. It
simply lacks color. As far as the computer is
concerned,
it is a color (RGB) image that looks black and white. The mode is still
RGB.

Original image Grayscale image

Inserting, Uploading, and Sharing Photos over the Internet

In creating a website, you usually upload photos. In this case, you need
an image host. Image hosts are websites specializing in storing
photographs. These photographs can easily be embedded to a web page
or website.

There are plenty of image hosting sites in the internet, and Photobucket
is one of them. Feel free to check out other free image hosting sites over
the internet.

1. Sign up for a Photobucket account in photobucket.com. You may

use your Google+ or Facebook account to automatically sign up.
2. Once your account is set up and you are ready logged in, click the
Start Uploading button.

3. A new page will load allowing you to drag and drop photos or to
choose them manually or the entire folder to upload. Select a folder,
add a password(optional), then feel free to upload any photos you
have right then.

4. Once selected, a progress bar will appear indicating that the image
is uploading. This may take a moment and will depend on your
internet connection.

5. Once you are done you will see these indicators:

a. View Uploads – views photos you just uploaded which also grants
you options to share and edit them individually

b. Share Album – shares everything you just uploaded plus the other
contents of your specified folder

c. Edit Photos – uses Photobucket’s photo editing tools to

manipulate your image

6. Let us assume you will share a photo individually. To do this, click

on View Uploads then once the page uploads, click the photo you
want to share.

7. On the top of the image, you will see the following options:

A – shares your photo directly to social media and blogging

platforms: Facebook, Twitter, Google+, Tumblr, and Pinterest,
respectively
B – gives you a variety of link codes for HTML, Forums, Emails, Instant
Messaging, and a direct link
C – shares your image via email
D – allows you to download your image
E – shares your image to social media sites with the option to add
a custom message

8. You may choose to share your photo to your friends on Facebook. If

you are done sharing, you may now log off and close the browser.
 Skill Exploration

1. Visit three websites. What makes their site design work?

2. Research Photobucket and two more free image hosting sites
and check out the limitations of the free account. What is the
best hosting site for you and why?
3. What is the limitation of Adobe Photoshop compared to other
image editors?

Your Turn to Shine

Option 1: Using any image editor like photoshop or any online editor app,
edit any picture of yours. Indicate the original picture and the
edited picture. Print your output.
Option 2: Using Piktochart, create an infographic promoting “Think before
you click”. Print your output.

Rubric

CATEGORY 4 3 2 1
Require The All required All but 1 of the Several
d infographic elements are required required
Element includes all included on the elements are elements
s required infographic. included on the were missing.
elements as infographics.
well as
additional
information.
Graphics All graphics All graphics are All graphics Graphics
- are related to related to the relate to the do not
Relevanc the topic and topic and most topic and some relate to
e make it easier make it easier to make it easier to the topic.
to understand. understand.
understand.
Layout and The infographic The infographic is The infographic The
design is exceptionally attractive in is acceptably infographic is
attractive in terms of design, attractive distractingly
terms of layout, and though it may messy or
design, layout, neatness. be a bit messy. very poorly
and neatness. designed. It
is
not attractive.

Check What you know

I. Match Column A with Column B. Read each item carefully and use
your notebook to write your answers.

Answers A B
1. It allows you to modify the color a. Photoshop
scheme of your infographic. b. Text
2. It is a web-based infographic c. Selection tool
application which allows users
d. Emphasis
without intensive experience as
graphic designers to easily e. Graphics
create infographics and visuals f. Harmony
using themed templates. g. Piktochart
h. Photobucket
3. Shares everything you just
uploaded plus the other i. symmetrical
contents j. Style
of your specified folder. k. Infographics
4. It is one of the image hosting sites l. .psd
in the Internet. m. Tools
5. The file extension of a photoshop n. Share album
document. o. Retouch tool
6. Allows you to create charts, maps,
and videos

7. It allows you to insert lines,

shapes, icons, and even photos.
8. It makes complex data become
more visually appealing to the
average user.
 9. Use these to get rid of unwanted
spots on product items, draw on
your image, erase certain parts,
color them in, or enhance them
by sharpening or blurring.
10. It is a raster graphics editor used
for editing images, designing
websites, editing videos, and
creating 3D artwork.
11. There should be one point
of interest in a page.
12. Use this to select parts of your
images that you want to edit or
enhance

13. It allows you to insert text to your

infographic with the option to
add text frames.
14. There should be equal weights or
elements on both sides of
the page.
15. The elements should not be
cluttered and do not compete
with each other.

Take the Challenge

Give sample pictures that follow the 8 principles of design and layout.
Print and submit your output to your
teacher.