LESSON 6- IMAGING AND

DESIGN FOR ONLINE

ENVIRONMENT
BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
1. BALANCE-visual weight of objects, texture, colors
and space is evenly distributed on the screen
2. EMPHASIS- An area in the design that may appear
different in size, texture, shape or color to attract the
viewers attention.

Example of balance and emphasis

 3. MOVEMENT-Visual elements
guide the viewers eye around the
screen

The bright color which stands out in

this picture helps draw the viewers
eye.
4. PATTERN, REPETITION AND
RHYTHM-these are the repeating
visual element on an image or
layout to create unity in the layout
or image.

The image uses pattern and repetition which create harmony for the
entire image.
5.PROPORTION visual elements
create a sense of unity where they
relate well with one another.

This web page shows how the font size of headers is proportional to the
size of its content. This is done so that the viewer can easily see what
the article is all about.
6.VARIETY- this uses several design
elements to draw a viewers
attention.

Bing uses a combination of text and images to make the site more
appealing but not distracting from the sites purpose.
INFOGRAPHICS
INFORMATION GRAPHICS or
INFOGRAPHICS- use to represent
information, statistical data or knowledge
in a graphical manner usually done in a
creative way to attract the viewers
attention.
Make complex data more visually appealing
to an average user.
You can create an infographic using
a PIKTOCHART.COM
A free online app that allows you to
create your own infographic
TOOLS USED FOR EDITING
(found 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
infographic.
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.
ONLINE IMAGE FORMATS
NAME FILE USE SUPPORTS SUPPORTS
EXTENSIO TRANSPAR ANIMATIO
N ENCY N
1. JOINT .jpeg or .jpg Real-life no no
PHOTOGRA photographs,
PHICS high
EXPERT compression
GROUPS
2.GRAPHICS .gif Computer- Yes yes
INTERCHAN generated
GE FORMAT graphics
3.PORTABLE .png Screenshots, Yes no
NETWORK high
GRAPHICS compatibility
There are plenty of other image file
formats used in the web but most
of the time you will be using these
three because of the compatibility
with all major web browsers.
PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
EDIT YOUR IMAGES
STRIKE THE BALANCE BETWEEN THE
RIGHT IMAGE QUALITY AND TIME
FOR THE PAGE TO LOAD THESE
IMAGES.
PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION
1. Choose the right file format-knowing
the purpose is the key to finding out the
best file format.
2. Choose the right image size-know
how much space you want the image to
consume.
3.Caption it- Remember to put a caption
on images whenever possible.
PHOTOSCAPE-a free image
manipulation tool that contains many
features to help you in creating images
for websites (photo editing software.)
INSERTING, UPLOADING, AND
SHARING PHOTOS OVER THE
INTERNET

IMAGE HOSTS are websites specializing

in storing photographs.
These photographs can easily be
embedded to a web page or website.