Imaging and Design

for the
Online Environment

ZOILO A. CUNANAN
TEACHER II
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Objectives
At the end of the lesson, student should be able to:
1. Evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design
2. Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose
3. Create an original or derivative ICT content to effectively
communicate a visual message in an online environment related
to specific professional tracks
https://www.youtube.com/watch?v=ta9n1kiGdpc

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

What is image?
An image is an
representation of
the external form
of a person or
thing in art

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Type of images?
2 DIMENTIONAL

Photographs Screen Display

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Type of images?
3 DIMENTIONAL

Statue Hologram
EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Images?
OPTICAL DEVICES NATURAL OBJECTS
AND PHENOMENA
Cameras
Mirros Human eye
Lenses Water
Telescopes
Microscopes

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Graphics and Layout

GRAPHICS
Photographs

Drawing

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Graphics and Layout

LAYOUT
Planning and
arranging
graphic
element in a
page or
template

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

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

When visiting a website,

check if one side holds the
same amount of weight on
the other.
EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

EMPHASIS
An area in the design that may appear different in size,
texture shape or color to attract the viewer’s attention

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

MOVEMENT
Visual elements guide and viewer’s eyes around the screen

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

PATTERN, REPETITION & RHYTHM

These are the repeating
visual element on an image
or layout to create a unity in
the layout or image. Rhythm
is achieve when visual
elements create a sense of
organized movement.

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

PROPORTION
Visual elements
create a sense of
unity where they
relate well with
one another

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

Variety
This uses several
design elements
to draw a viewer’s
attention

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

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

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

INFOGRAPHICS

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

INFOGRAPHICS
JPG PNG GIF
“Joint Photographic Expert “Portable Network Graphics” “Graphic Interchange Format”
Group”  Supports 24-bit images.  Not for large image with
• Used format by Digital  Best for logos that involves many colors.
Camera and other capturing transparency and fading  Good choice for simple
device animation
• When saving pictures on
the internet

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
CROPPING
Cutting parts away
to remove distracting
or irrelevant
elements

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
COLOR BALANCE
The ambiance and
the tone of lights of
the pictures

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
BRIGHTNESS
AND CONTRAST
Is one of the most
basic techniques in
image editing,
making the image
darker or lighter

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
FILTERS

Making the image

look sketch, grainy,
classic black and
white or even let it
have neon colors

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
CLONING

Copying or
duplicating a part of
an image

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
CHANGING AND
BACKGROUND

Adding background
to make your image
stand out.

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
REMOVING
COLOR

Removing certain
colors in your image
or desaturating the
color of image

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN
 MUNOZ NATIONAL HIGH SCHOOL MAIN – SENIOR HIGH SCHOOL

IMAGE MANIPULATION
Combining test,
graphics and
colors
Adding multiple
elements in your
layout

EMPOWERMENT TECHNOLOGY | Imaging and Design for the Online Environment | ZOILO A. CUNANAN