Imaging and

Design For
the Online
Environment
a representation of
the external form
of a person or
thing in art.
Images may be 2-dimensional,
such as a photograph or screen
display, or 3-dimensional, such
as a statue or hologram. They
may be captured by optical
devices – such as cameras,
mirrors, lenses, telescopes,
microscopes, etc. and natural
objects and phenomena, such as
the human eye or water.
 are visual images or
designs on some
surface, such as a wall,
canvas, screen, paper,
or stone to inform,
illustrate, or entertain
-Photographs -Geometric
-Drawings designs
-Line art -Maps
-Graphs -Computer
-Diagrams Graphics
-Typography -Engineering
-Numbers drawings, or other
images
-Symbols
 is part of graphic
design that deals inthe
arrangement of visual
elements on a page
 Basic Principles of
Graphics and
Layout :
1. Balance. The visual
weight of objects,
texture, colors, and
space is evenly
distributed on the
screen.
 Basic Principles of
Graphics and
Layout :
2. Emphasis. An area in
the design that may
appear different in size,
texture, shape or color to
attract the viewer’s
attention.
 Basic Principles of
Graphics and
Layout :
3. Movement. Visual
elements guide the
viewer’s eyes around
the screen.
4. Pattern, Repetition, and
Rhythm. These are the
repeating visual element on an
image or layout to create
unity in the layout or image.
Rhythm is achieved when
visual elements create a sense
of organized movement.
5. Proportion. Visual
elements create a
sense of unity where
they relate well with
one another.
6. Variety. This uses
several design
elements to draw a
viewer’s attention.
 INFOGRAPHICS
Information graphics or
infographics are used to
represent information, statistical
data, or knowledge ina
graphical manner usually done
in a creative way to attract the
viewer’s attention.
 5 Principles in Making an
Effective Infographic Design
1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting
it Across
1. Joint Photographic
Experts Group (JPEG)
– does not support
transparency and
animation (.jpeg or
jpg)
2. Graphics
Interchange Format
(GIF) – supports
transparency and
animation (.gif)
3. Portable Networks
Graphics (PNG) –
supports transparency
but not in animation
(.png)
 Image Manipulation
Principles
1. Choose the right file
format. Try to make a real-life
photograph into GIF to see
the difference between PNG,
GIF, and JPEG. Knowing the
purpose is the key to finding
out the best file format.
 Image Manipulation
Principles
2. Choose the right image size. A
camera with 12 megapixels
constitutes to a bigger image size.
Monitors have a resolution limit, so
even if you have a million
megapixels, it will not display
everything.
 Image Manipulation
Principles
3. Caption it. Remember to
put a caption on images
whenever possible. If it is not
related to the web page, then
remove it.
 Image Manipulation
Techniques
1. Cropping. Cutting parts
away to remove distracting
or irrelevant elements.
 Image Manipulation
Techniques
2. Color Balance. The
ambience and the tone of
light of the picture (ex. Warm
or cool light)
 Image Manipulation
Techniques
3. Brightness and Contrast.
One of the most basic
techniques in image editing,
making the image darker or
lighter.
 Image Manipulation
Techniques
4. Compression and
Resizing. The higher the
quality and the larger the
photo is, the bigger the file
size of the picture is.
 Image Manipulation
Techniques
5. Filters. Making the image
look sketched, grainy, classic
black and white or even let it
have neon colors. This gives
your image a twist from its
original look.
 Image Manipulation
Techniques
6. Cloning. Copying or
duplicating a part of
an image.
 Image Manipulation
Techniques
7. Changing the
Background. Adding
background to make your
image stand out
 Image Manipulation
Techniques
8. Removing the Color.
Removing certain colors in
your image or desaturating
the color of the image.
 Image Manipulation
Techniques
9. Combining Text,
Graphics and Image. Adding
multiple elements in your
layout
- Google+ - Amazon
Photos Prime
- Flickr Photos
- Smugm - DropBo
ug x
- Imgur - Chevere
- 500px to
END