SPOT THE

DIFFERENCE
 Module 3:
Visual Design: Imaging
and Layout Design
At the end of this module, We Can:
 Evaluate existing Web sites and online resources based on
the principles of layout, graphic, and visual message
design.
 Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose.
 Create an original or derivative ICT content to effectively
communicate a visual message in an online environment.
 Manipulate text, graphics, and images to create ICT
content intended for an online environment.
Basic Principles of Graphics and
Layout
 Infographic–refers to an image that
combines information, storytelling,
and perceptions that help the cause of
an individual or an institution to
communicate a message to viewers.
Basic Principles of Graphics and Layout
Here are the basic elements of layout and
design:
Lines – Lines are the most basic of
all elements. Lines can define the
characteristics of an infographic.
Color – Color is one of the
powerful and influential elements
in an infographic.
Basic Principles of Graphics and
Layout
Shapes – These are defined
by the enclosure created by
combination of multiple
lines.
Principles of Design
 The use of different design elements defines the
message and ideas that the image depicts.
 Balance – This describes the placement of
elements, shapes, or lines throughout the image.
 Two types of balance:
 Formalbalance- when objects are placed
symmetrically and are properly distributed.
 Informal balance – nonsymmetrical distribution of
elements but is compensated in different aspects such
as colors and lines.
Principles of Design
 Unity-It is when all of the elements seem
to be a singular element in unison. This
makes the design pleasing to the viewers.
 Proportion– This is the correlation of all
the elements with one another.
 Rhythm – This describes the product of
having the elements placed in harmony
with one another.
Image File Formats
 File formats, specifically image file
formats, are facilities or methods to store
and organize images.
 The elements of the picture, which are
referred to as pixels or picture elements,
are arranged and stored in a manner
dictated by the format of the image.
File Formats for Images
 Joint Photographic Experts Group (JPEG or JPG) –
This is a compression method that complies with the
JPEG File Interchange Format (JFIF).
 Tagged Image File Format (TIFF) – This is a less
common file format supported by Web browsers.
 Graphics Interchange Format (GIF) – This is a popular
file format for storing graphical images with fewer
colors.
 Portable Network Graphics (PNG) – The inter for the
creation of this file format is to be free and open
source substitute for GIF. This file format is expected
to be fully compatible with online applications.
Image Manipulation
 Animage editor is an application that
contains tools can alter digital photos
and images. This type of application is
used to enhance photos and is
typically used by graphics editors and
artists.
Online Image Hosting Web sites
 Online image hosting Web sites are Web
sites that store uploaded images by users.
There are various Web sites that can host
your images, some of which are free.
There are Web sites that also offer value
added services such as online editing and
enhancement tools.
Online Image Hosting Web sites
 Here are some example:
Google+ Photos
Flickr
Smugmug
Imgur
500px