Imaging & Design for

Online Environment

Lesson 6
 VARIETY
VARIETY
PROPORTION
PROPORTION
P.R.R.
P.R.R.
MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS
BALANCE
BALANCE

Basic Principles of
Graphics & Layout
 VARIETY
VARIETY
PROPORTION
PROPORTION
P.R.R.
P.R.R.
MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS

screen.
evenly distributed on the
texture, colors, and space is
The visual weight of objects,

BALANCE
BALANCE
 An area in the design that may
PROPORTION
PROPORTION

MOVEMENT
MOVEMENT

EMPHASIS
EMPHASIS
appear different in size, shape,

BALANCE
VARIETY

BALANCE
VARIETY

P.R.R.
P.R.R.

or color to attract the viewer’s

attention
 VARIETY
VARIETY
PROPORTION
PROPORTION
P.R.R.
P.R.R.

screen.
viewer’s eyes around the
Visual elements guide the

MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS
BALANCE
BALANCE
 These are the repeating visual
PROPORTION
PROPORTION

MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS
elements, image, or layout to

BALANCE
VARIETY

BALANCE
VARIETY

P.R.R.
P.R.R.
create unity in the layout or
image.
 VARIETY
VARIETY

well with one another.

of unity where they can relate
Visual elements create a sense

PROPORTION
PROPORTION
P.R.R.
P.R.R.
MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS
BALANCE
BALANCE
 attention.
This uses several design
elements to draw a viewer’s

VARIETY
VARIETY
PROPORTION
PROPORTION
P.R.R.
P.R.R.
MOVEMENT
MOVEMENT
EMPHASIS
EMPHASIS
BALANCE
BALANCE
CREATING INFOGRAPHIC
USING PIKTOCHART
 Used to represent information,
statistical data, or knowledge
in a graphical manner usually
done in a creative way to
attract the viewer’s attention.

 Make complex data become

more visually appealing to an
average user
1. Go to https://piktochart.com/
and sign up
2. Fill up the information on
the sign up page or connect to
Goggle+ or Facebook.
3. Select a template for your
inforgraphic depending on the
data you are going to use.
4. The piktochart editor will
open. Input the information as
you see fit.
5. VARIOUS TOOLS
GRAPHICS – allows you to insert lines,
shapes, icons and even photos
UPLOADS – allows you to upload
images for your infographic
BACKGROUND - changes the
background of a selected block
TEXT – allows you to insert text to your
infographic with the option to
add frames
STYLES – allows you to modify the
color scheme of your
infographic
TOOLS – allows you to create charts,
maps and videos
6. Save and Download your
work. Select the medium-
sized and the PNG file type.
 ONLINE IMAGE FILE
FORMATS
NAME FILE
EXTENSION USE SUPPORTS
TRANSPARENCY
SUPPORTS
ANIMATION

1. Joint Photographics .jpeg or Real-life No No

Experts Group .jpg photographs, high
compression
2. Graphic Interchange .gif Computer- Yes Yes
Format generated
graphics
3. Portable Network .png Screenshot, high Yes No
Graphics compatibility
CREATING AN CANVA
ACOUNT
1.Go to
https://www.canva.com/ and
sign up.
2.Fill up the information using
your Email or connect to
Google+ or Facebook.
3. After signing up you will
choose what will you use canva
for if its for Work, Personal, or
Education.
4. After that you can use the
Canva application.