Chapter 3

IMAGING AND DESIGN FOR
THE ONLINE ENVIRONMENT

INTRODUCTION : BASIC PRINCIPLES
OF GRAPHICS AND
LAYOUT
These Principles controls the connections
between the elements used in the design and
organize the structure as a WHOLE. Successful
design layouts integrate the use of the
principles to express the intended messages
effectively. They help designers organize the
images and type on pages, so that it will deliver
a greater impact and make it more comfortable.
BASIC PRINCIPLES OF GRAPHICS AND
LAYOUTS
PROXIMITY ALIGNMENT BALANCE

BALANCE
Generally, Balance means it is the equal
distribution of weight. In terms of graphics,
this applies to visual weight. Each segment on
a layout gas visual weight that is determined
by its darkness or lightness, thickness of lines,
and size. Balance is crucial to the success of a
design. There are two kinds of Balance:
SYMMETRICAL BALANCE
Is the order of elements so that they are
evenly allocated to the left and to the right,
or top and bottom center
`
ASYMMETRICAL BALANCE
Is the order of different objects of the same
weight on each side of the page. Color shape
size, texture and value can be use as
balancing elements
`
LAYOUTS

ALIGNMENT
People without experience usually tend to put text
and graphics on the part of the page wherever
there happens to be space, without giving concern
to any other item page. (Principle of Alignment)
“Nothing should be place on the page arbitrarily,
Every item should have a visual connection with
something else on the page.” Basically, purpose of
Alignment is to unify and organize the page.
ALIGNMENT
Twinkle, twinkle, little Twinkle, twinkle, little
star star
How I wonder what How I wonder what
you are you are
Up above the world Up above the world
so high so high
Like a diamond in Like a diamond in
the sky the sky
Twinkle Twinkle Twinkle Twinkle Little
Little Star Star
BAD GOOD
LAYOUTS

PROXIMITY
The principle of Proximity shows that you
ensemble related objects together, move
them physically close to each other so the
related items are seen as united group rather
than a group of unrelated things.
LAYOUTS
REPETITION CONTRAST WHITE

SPACE
REPETITION
According to the principle of Repetition, “Respect some
aspect of the design throughout the entire piece.” The
possibilities are endless and it can be anything that are
readers will visually recognize as a part of a “THEME”
Repetition aids organize the information; it guides
readers and help to make parts of the design become
more united. Repetitive elements create a more
sophisticated continuity and can make it more
complete.
LAYOUTS

SPACE
CONTRAST
It is an important factor and principle to the organization of
information; a reader must be able to glance at a document
and instantly understand what’s happening. Add contrast
to your color, font choices, line thickness, shapes, space,
sizes, etc.
Contrast has two purposes, One is to create an interest on
a page, simply because if a page is interesting to look at
when it would most likely to be read by viewers. Second
purpose is to aid the arrangement of information, basically
the message should be crystal clear and easily
LAYOUTS

SPACE
WHITE SPACE
According to the principle of White Space, “
White space is the art of nothing. White space is
the absence of text graphics.” White space
doesn’t mean have to be white; it got its name
from the early days of graphic design, where
most printing was done on white paper. White
space can be any color of the background used.
White Space is also known as “Negative Space.”
PRINCIPLES OF VISUAL MESSAGE
DESIGN USING INFOGRAPHICS
o BE UNIQUE
o MAKE IT SIMPLE
o BE CREATIVE AND
BOLD
o LESS IS MORE
o THE IMPORTANCE OF
GETTING IT ACROSS
ONLINE FILE FORMATS FOR IMAGES AND TEXT
A file format is a
standard process that
data is encoded for
storage in a computer
file. It defines how bits
are used to encode
information in digital
storage device.
1. JPEG = JOIN PHOTOGRAPHIC EXPERT
GROUP
◼This format is used

when a small file size
is more important
than the maximum
quality of the
images,
2. GIF = GRAPHICS INTERCHANGE
FORMAT
◼This is one of the most

formats that are used to
show index-color
graphics and pictures in
HTML pages on web,
because of the limit that
GIF has, this is not
recommended for larger
images with many
3. PNG = PORTABLE NETWORK
GRAPHICS
◼Combination of GIF
and JPEG. Best uses
for logos that involve
transparency and
fading, images in the
middle of the editing
process and large
complex images if the
file size is not an issue.
4. PDF = PORTABLE DOCUMENT
FORMAT
◼This file format has all the
features of a printed
documents as an electronic
image, print, navigate or
even forward to other
people.
◼When a document is
converted into PDF file
format, it is optimized in a
smaller file size without
losing its quality
5. DOC = DOCUMENT FILE
◼Is a format created by
MICROSOFT
◼Microsoft word can is
able to generate and
distribute doc. using a
writing tool, and it is
possible to include
charts, formatted text,
etc. and has a few
DIFFERENCE BETWEEN PDF AND DOC
PDF DOC
◼Editable
◼Not Editable
◼Microsoft Word file
◼Adobe Acrobat file ◼Offers enormous
◼Very limited features such fonts and
colors
PRINCIPLES OF BASIC TECHNIQUES
OF IMAGE MANIPULATION
◼Image editing of image manipulation
contain the process of adjusting or
modifying images which can be
digital or pictures taken from a
camera. The more advanced image
editing are done using Graphic
software programs, which varies from
vector graphic editors, raster graphic
editor and even 3D modelers.
PRINCIPLES OF BASIC TECHNIQUES
OF IMAGE MANIPULATION
Cropping
Color Balance
Brightness and Contrast
Compression and Resizing
Filters
CROPPING
◼Cropping is used to cut parts away.
Cropping an Image effectively can make
a big difference
COLOR BALANCE
◼The ambience of pictures is also very
important, the tone of light is easily
manipulated using an image editor. For
example, a warm golden light generates a
happy holiday atmosphere, and in the other
hand, a cool light can make a picture
smoother, more professional.
BRIGHTNESS AND CONTRAST
◼Basically, you can manipulate how the
image would look, make it gray, flat and dull
with messing with the contrast. While as the
name states, the brightness of the image
can be darker or lighter, by adjusting
brightness.
COMPRESSION AND RESIZING
◼It is necessary for images to be resized before

being uploaded, as picture’s quality and file size
that come directly from a camera may be too large
for the web page and this is not advisable since it
will take too long to load, slowing down the
website, potentially losing a viewer.
FILTERING
◼Most of the photo editors have a feature that
contains a lot of image filters, like make the image
look sketched, look grainy, classic black and white
or even let it have neon color, these filters will give
you image a twist even though it’s originally plain.
BASIC IMAGE MANIPULATIONS USING OFFLINE OR
OPEN SOURCE SOFTWARE
◼Most photo editors today are licensed and must be

bought, though there are some free software such
as GIMP and Google Sketch Up . These two both
have the features of a premium Adobe Photoshop,
just free!
CLONING
◼Almost every image editor features a Clone tool,
the symbol appears to be a stamp.
CHANGING BACKGROUND
◼This is one of the most commonly used technique
when editing pictures, changing an image’s
background.
REMOVING COLORS
◼Another technique that you can use to modify an
image is by removing colors and making one color
stand out
COMBINING TEXT AND GRAPHICS AND IMAGE
◼According to a studies, people can absorb
information more efficiently when it’s through
visual rather than text.
UPLOADING, SHARING AND
IMAGE HOSTING PLATFORMS
Imgur
Google Photos
Flickr
Photobucket
Imageshack
Dropbox
THANK YOU
FOR PRETENDING
LISTENING

Chapter 3

Uploaded by

Copyright:

Available Formats

Chapter 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 3

Uploaded by

Copyright:

Available Formats

IMAGING AND DESIGN FOR

THE ONLINE ENVIRONMENT

PROXIMITY ALIGNMENT BALANCE

PROXIMITY ALIGNMENT BALANCE

PROXIMITY ALIGNMENT BALANCE

REPETITION CONTRAST WHITE

REPETITION CONTRAST WHITE

REPETITION CONTRAST WHITE

◼This format is used

◼This is one of the most

Brightness and Contrast

Compression and Resizing

◼It is necessary for images to be resized before

◼Most photo editors today are licensed and must be

You might also like