Imaging and Designs

for 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
-Symbols images
 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.
2. Emphasis. An area in the
design that may appear
different in size, texture,
shape or color to attract the
viewer’s attention.
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.
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.
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.
2. Color Balance. The
ambience and the tone of
light of the picture (ex. Warm
or cool light)
3. Brightness and Contrast.
One of the most basic
techniques in image editing,
making the image darker or
lighter.
4. Compression and
Resizing. The higher the
quality and the larger the
photo is, the bigger the file
size of the picture is.
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.
6. Cloning. Copying or
duplicating a part of an
image.
7. Changing the
Background. Adding
background to make your
image stand out
8. Removing the Color.
Removing certain colors in
your image or desaturating
the color of the image.
9. Combining Text,
Graphics and Image. Adding
multiple elements in your
layout
- Google Photos
- Flickr
- Smugmug
- Imgur
- 500px
- Photobucket