IMAGING AND

DESIGN FOR
ONLINE
ENVIRONMEN
T
BASIC
PRINCIPLES
OF GRAPHICS
Basic Principles Of Graphics

1. Balance – the visual

weight of objects, texture,
colors, and, space is evenly
distributed on the screen.
Basic Principles Of Graphics
Balance
Basic Principles Of Graphics

2. Emphasis – area in the

design that may appear
different in size, texture,
shape, or color to attract
the viewer’s attention.
Basic Principles Of Graphics
Emphasis
Basic Principles Of Graphics

3. Movement – visual
element that guides the
viewer’s eyes around the
screen.
Basic Principles Of Graphics

Movement
Basic Principles Of Graphics

4. Pattern, Repetition, and

Rhythm – the repeating
visual element in an image
or layout to create unity in
the layout or image.
Basic Principles Of Graphics
Pattern,
Repetition,
and Rhythm
Basic Principles Of Graphics

5. Proportion – visual
element that creates a
sense of unity where they
relate well with one
another.
Basic Principles Of Graphics

Proportion
PHOTO /
IMAGE
EDITING
PHOTO EDITING
It encompasses the
processes of altering images,
whether they are digital
photographs, traditional photo
chemical photographs, or
illustrations.
 Traditional analog image
editing is known as photo
retouching such as airbrush to
modify photographs, or editing
illustrations with any
traditional art medium.
GRAPHIC SOFTWARE PROGRAM
Which can be broadly
grouped into vector graphics
editors, raster graphics editors,
and 3D modelers are the
primarily tools with which a
user may manipulate, enhance,
and transform images.
BASIC OF IMAGE EDITING

1. Raster Images are stored in a

computer in the form of grid of
picture elements or pixels.
BASIC OF IMAGE EDITING
2. Vector Images such as Adobe
Illustrator, Inkscape and etc.
are used to create and modify
vector images, which are
stored as descriptions of lines,
Bezier curves and text instead
of pixels.
Difference between Raster
and Vector Images
• Raster Images use many
colored pixels or individual
building blocks to form a
complete image, JPEGS, GIF,
and PNGs are common raster
image types.
Difference between Raster
and Vector Images
• Vector Images alternatively,
allow for more flexibility.
Constructed using
mathematical formulas rather
than individual colored blocks.
Difference
between
Raster
and
Vector
Images
BASIC OF IMAGE EDITING
3. 3D Modeling is the process of
developing a mathematical
representation of any three
dimensional surface of an
object via specialized
software.
3D Modeling
IMAGE
FORMATS
IMAGE FORMATS

1. JPEG (Joint Photographic Experts

Group) is commonly used method
of lossy compression for digital
images, particularly for those
images produced by a digital
photography.
IMAGE FORMATS

2. PNG (Portable Network Groups)

is a raster graphics file format that
supports lossless data
compression.
IMAGE FORMATS

3. GIF (Graphic Interchange Format)

a lossless format for image that
supports both animated and static
images.
IMAGE FORMATS

4. BMP is a raster graphics image

used to store bitmap digital
images.
IMAGE FORMATS

5. SVG (Scalable Vector Graphics) is

an XML-based vector image
format for two-dimensional
graphics with support for
interactivity and animation.
IMAGE FORMATS

6. .3ds is one of the file formats used

by the Autodesk 3Ds Max 3D
Modeling, animation and
rendering software.
IMAGE FORMATS

7. .fbx is an exchange format, in

particular for interoperability
between Autodesk products and
other digital content creation
software.
FEATURES OF
IMAGE
EDITORS
FEATURES OF IMAGE EDITORS

• Selection – one of the

prerequisites for many of the app
is a method of selecting part(s) of
an image, thus applying a change
selectively without affecting the
entire picture.
FEATURES OF IMAGE EDITORS
• Selection
o Marquee Tool –
for selecting
rectangular or
other regular
polygon-shaped
regions.
FEATURES OF IMAGE EDITORS
• Selection
o Lasso Tool – for
freehand
selection of a
region.
FEATURES OF IMAGE EDITORS
• Selection
o Magic Wand Tool – selects objects
or regions in the image defined by
proximity of color or luminance.
FEATURES OF IMAGE EDITORS
• Layers – which are analogous to
sheets of transparent acetate,
stacked on top of each other, each
capable of being individually
positioned, altered and blended
with the layers below, w/o
affecting any of the elements on
the layers.
FEATURES OF IMAGE EDITORS
• Layers
FEATURES OF IMAGE EDITORS
• Image Size – resize images in a
process often called image scaling,
making them larger, or smaller.
FEATURES OF IMAGE EDITORS
• Cropping – creates a new image by
selecting a desired rectangular
portion from the image being
cropped.
FEATURES OF IMAGE EDITORS
• Cloning – uses the current brush to
copy from an image or pattern.
FEATURES OF IMAGE EDITORS
• Image Orientation- image editors
are capable of altering an image to
be rotated in any direction and to
any degree.
FEATURES OF IMAGE EDITORS
• Perspective – is the art of drawing
solid objects on a two-dimensional
surface so as to give the right
impression of their height, width,
depth and position in relation to
each other when viewed from a
particular point.
FEATURES OF IMAGE EDITORS
• Perspective
FEATURES OF IMAGE EDITORS
• Sharpening and Softening –
sharpening makes images clearer.
Too much sharpening causes grains
on the surface of the image.
Softening makes images softer that
removes some of the highly visible
flaws. Too much causes the image
to blur.
FEATURES OF IMAGE EDITORS
• Sharpening and Softening
FEATURES OF IMAGE EDITORS
• Saturation – is an expression for
the relative bandwidth of the
visible output from a light source.
As saturation increase, colors
appear more “pure”. As saturation
decreases, colors appear more
“washed out”.
FEATURES OF IMAGE EDITORS
• Saturation
FEATURES OF IMAGE EDITORS
• Contrast and Brightening –
contrast of images and brighten or
darken the image. Underexposed
images can be often be improved
by using this feature.
FEATURES OF IMAGE EDITORS
• Contrast and Brightening
FEATURES OF IMAGE EDITORS
• Photo Manipulation – photo
manipulation involves
transforming or altering a
photograph using various methods
and techniques to achieve desired
results.
FEATURES OF IMAGE EDITORS
• Photo Manipulation
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.
INFOGRAPHICS
LESSON 7:
ONLINE
PLATFORMS
FOR ICT
CONTENT
DEVELOPMEN
T
SOCIAL MEDIA PLATFORMS
Website like Facebook
allows you to create not only
personal accounts but also
pages and groups where you
can share content.
BLOGGING PLATFORMS
Website like WordPress,
Tumblr, and Blogger focus on
content and design. It typically
looks like a newsletter where
you are given options to
change the design to your
liking.
CONTENT MANAGEMENT
SYSTEM (CMS)
This is a computer
application (sometimes online
or browser-based) that allows
you to publish, edit and
manipulate, organize, and
delete web content.
SOCIAL MEDIA SITES

• Marketplace – allows
members to post, read and
responds to classified ads
SOCIAL MEDIA SITES

• Groups – allows members

who have common
interests to find each other
and interact.
SOCIAL MEDIA SITES

• Events – allows members to

publicize an event, invites
guests and track who plans
to attend.
SOCIAL MEDIA SITES

• Pages – allows members to

create and promote a
public page built around a
specific topic.
SOCIAL MEDIA SITES

• Presence technology –
allows members to see
which contacts are online
and chat.
SOCIAL MEDIA SITES

Wall - which is essentially

a virtual bulletin board.
SOCIAL MEDIA SITES

Photo Album - Photos can

be uploaded from a desktop
or directly from a
smartphone camera.
SOCIAL MEDIA SITES

Status Updates -
microblogging feature that
allows members to
broadcast, short Twitter-like
announcements .
SOCIAL MEDIA SITES

is an online mobile photo-

sharing site that allows its
user to share pictures and
videos either publicly or
privately on the app.
SOCIAL MEDIA SITES

Originally, a distinctive
feature was that it confined
photos to square shape,
similar to Kodak Instamatic
and Polariod SX-70 images.
SOCIAL MEDIA SITES

Twitter is an online news

and social networking service
where users post and interact
with messages, “tweets”,
restricted to 140 characters.
BLOGGING SITES

is one of the easiest

website builders in the market.
They allow you to drag and
drop content into a website, so
it’s very intuitive to use.
BLOGGING SITES

is a popular microblogging
platform designed for creative
self-expression. Tumblr is
perfect for people who don’t
need a full blog to publish
lengthy posts.
BLOGGING SITES

is a free website that

requires registration to use.
Users can upload, save, sort,
and manage images – known as
pins – and other media content
(e.g. videos).
LESSON 8:
BASIC WEB
PAGE
CREATION
SKILLS
WYSIWYG
WYSIWYG is the acronym
for “What You See Is What You
Get”. This means that
whatever you type, insert,
draw, place, rearrange, and
everything you do on a page
are what the audience will see.
Another Way to Create a
Website.
Web developer/designer
also use HTML codes to create
pages and CSS codes to design
them.
Advantages of WYSIWYG:
• You don’t need any
scripting/coding experience.
• It’s simple and easy for
beginners.
• Everything moves fluently,
and you can easily preview
what you want.
Disadvantages of WYSIWYG:
• A lot of HTML code churned
out by the editors is
superfluous which makes
the web pages bulky in file
sizes.
Disadvantages of WYSIWYG:
• WYSIWYG editors let you
ignore certain aspects that
are important.
• WYSIWYG editors simply do
not provide enough support
and help optimizing your
web site for search engines.