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
Graphics
-Diagrams
-Typography -Engineering
drawings, or other
-Numbers images
-Symbols
 is part of graphic
design that deals in the
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 in a
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
- Smugmug - DropBox
- Imgur - Chevereto
- 500px - Imageshack
- Photobucket
END