Imaging and Design for

Online Environment
At the end of the lesson, you should be
able to:
1. Understand the basic principles of graphics and
layout;
2. Create a simple infographic using web tools;
3. Understand and use several file formats used on
the web;
4. Easily manipulate image using a image-editor;
and
5. Upload and share images using Photobucket.
What is the most visited
website in the world?

Think about it for a second.

It is not Facebook or Twitter
Here is a clue, the site’s mission
statement is to organize the world’s
information and make it
universally accessible and useful.”
On March 23, 2016, Alexa.com, a renowned
website for ranking web page popularity,
ranks this website number one in the entire
world.

Why do you think Google ranks number

one despite the countless search engines
and websites in the internet?
 Basic Principles of
Graphics and Layout
What principle of design applies in the
given image below?
Balance
•A distribution of visual weight
on either side of the vertical
axis.
Symmetrical balance uses the
same characteristics. Asymmetrical
uses different but equally weighted
features.
Which one is the symmetrical,
asymmetrical balance?
What principle of design applies in the
given image below?
Contrast
•The arrangement of opposite
elements in a composition so
as to create visual interest.
light vs. dark,
rough vs. smooth,
small vs. large, etc
What principle of design applies in the
given image below?
Emphasis

Used to make certain parts of

an Artwork stand out. It creates
the center of interest or focal
point. It is the place in which an
Artist draws your eyes first.
What principle of design applies in the
given image below?
Movement
•How the eye moves through
the composition;
•leading the attention of the
viewer from one aspect of the
work to another.
•Can create the illusion of
action.
What principle of design applies in the
given image below?
Pattern
• The repetition of specific visual
elements such as a unit of shape
or form. A method to organize
surfaces in a consistent regular
manner.
Which one shows pattern?

The other image shows what

principle of design?
Rhythm
• Regular repetition of, or
alternation in elements to create
cohesiveness and interest.
What principle of design applies in the
given image below?
Proportion
• Visual elements create a sense of
unity where they relate well with
one another.
What principle of design applies in the
given image below?
Variety
• This uses several design elements
to draw a viewer’s attention.
Formative Activity for
Graphics and Layout
• Using Piktochart, create individual images that
would tell something about yourself and would
project each of the following principles of graphic
and layout.

• 1. Balance
• 2. Emphasis
• 3. Movement
• 4. Pattern, Repetition, and Rhythm
• 5. Proportion
• 6. Variety
HOA #4-1 – Infographics using Piktochart

• Signup for free using your google account

• Explore the online platform
• Choose template to create infographics
(your profile)
• Save final output to JPEG
Use filename:
Surname-section-HOA#4-1-Infographics
• Do not forget to send through Edmodo
• Remember to backup your files
Imaging and Design for
Online Environment
LET US DISCUSS…
• Based on Experience in creating
Infographics in Piktochart, what
editing tips you can give or
suggest?
What are different TOOLS did you
used in creating INFOGRAPHICS
in PIKTOCHART?
 Tools in Piktochart
1. Graphics

allows you to insert lines, shapes,

icons and even photos.

2. Uploads
allows you to upload images for
your infographic
 Tools in Piktochart
3. Background
changes the background of a
selected block

4. Text
allows you to insert text to your
infographics with the option to add text
frames.
 Tools in Piktochart
5. Styles
allows you to modify the color scheme
of your infographics.

6. Tools
allows you to create charts and videos
 COMMON
IMAGE FILE FORMAT
USED ON THE WEB
 Image File File Supports Supports
Use
Format Extension transparency animation

Joint .jpeg or jpg Real-life

Photographic photographs,
Experts high NO
NO
Group compression

Graphics Computer
Interchange generated
Format graphics
YES NO
Screenshots,
high
compatibility
Portable Screenshots,
Network high
Graphics compatibility YES NO
 Principle & Basic Techniques
of Image Manipulation

1. Choose the right

file format
 Principle & Basic Techniques
of Image Manipulation

2. Choose the right

image size
Principle & Basic Techniques
of Image Manipulation

3. Caption IT
 CREATING AND
MANIPULATIONG IMAGES
USING PHOTOSCAPE
 Practice:
• Explore all the features of Photoscape.
• Upload your photo/ photos
• Save edited images, rename file to Surname-section-
image1.jpeg
surname-section-image2.jpeg
and so on..
Paste your output in PowerPoint presentation.. Save the
file as HOA4-3-surname-section. pdf
Viewer - a
picture viewer with
features the same
with most image
viewers like
changing image
orientation.
Editor – alters the
appearance of a
single image.
Batch Editor –
alters the appearance
of multiple images
Page– arranges
several photos to
create a single one;
similar to mosaic
Combine – links
several images
together to form a big
image.
Combine – links
several images
together to form a
bigger image.
Animated GIF –
allows you to create
an animated GIF from
several pictures
Print–
Readies picture for
printing
Splitter–
Divides a single photo
into multiple parts
Screen Capture–
Capture the screen
and saves it.
Raw Converter–
Converts RAW images
to jpeg.
Rename–
Allows you to rename
a batch of photos.
Paper Print–
Useful tool for printing
your own calendar,
sheets, lined paper,
graph paper, etc