Imaging and Design for Online TWO KINDS OF BALANCE:

Environment SYMMETRICAL Balance - The order of

elements is evenly allocated on both sides of
IMAGE - a representation of the external pages. The visual weight is distributed evenly,
either vertically or horizontally. You can draw a
form of a person or thing in art.
line straight through the middle of the design,
- Images may be 2-dimensional, such
and the visual balance would be evenly
as a photograph or screen display, or 3-
distributed.
dimensional, such as a statue or hologram.
ASYMMETRICAL Balance - The order of
They may be captured by optical devices -
different objects of the same weight on each
such as cameras, mirrors, lenses, telescopes,
side of the page. There is an artistic and
microscopes, etc. and natural objects and
different intensity on one side of the page.
phenomena, such as the human eye or water.
Color, Shape, size, texture & value can be used
on balancing elements.
GRAPHICS - are visual images or designs on
some surface, such as a wall, canvas, screen,
2. PROXIMITY - Ensemble related objects
paper, or stone to inform, illustrate, or
together and moved them physically close to
entertain.
each other to create less clutter and more
- are visual representations of data
organized layout. Organized information is
made on a computer and is displayed on a
more likely to read and most probably
computer screen or monitor.
remembered.
GRAPHIC DESIGN – a sought-after skill that
Things to remember:
can help produce high-end designs to
• The organization is clearer -
promote brands at a national and
• The white space is not trapped within
international scale. Adding graphics to your
elements.
design can help you showcase your creative
• There appears to be more room on the
skills and make a good impression on your
page.
clients. It equips students with the necessary
• When there are several elements, add white
skills to apply for a position in the fields of
space. White space can also mean empty
advertising or marketing across all business
space.
sectors.
• Related items should be placed near to each
Example of Graphics - photographs, other.
drawings, line art, graphs, typography.
3. WHITE SPACE - White Space is the art of
Layout is part of graphic design that deals in nothing. Also known as the negative space. It
the arrangement of visual elements on a page. is the portion of a page left unmarked:
The process of planning and arranging graphic margins, gutters, and space between columns,
element in a page or template. A good layout lines of type, graphics, figures, or objects
should have a balanced make up and drawn or depicted.
alignment of elements. Two kinds of white space:
• Undefined white space
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT • Active white space

1. BALANCE - means the equal distribution of 4. ALIGNMENT - The Principle of Alignment:

weight. In layout, visual weight is determined “Nothing should be placed on the page
by the darkness or lightness, thickness of arbitrarily. Every item should have a visual
lines, and size. Balance is crucial to the connection with something else on the page.”
success of design. • Create Order • Look Clean
5. REPITITION - The process of repeating
elements throughout a design to give a unified
look. Repetition goes with consistency of your
design on font, font size, patterns, colors.
Repetition aids to organize the information.
Guides readers and helps to make parts of the
design become more united.
- Infographics is an example that
applied repetition to the design. It repeatedly
used callouts with identical font size of inside
texts.
6. COLOR - Determined by its hue (name of
color), intensity (purity of the hue), and value
(lightness or darkness of hue). Used for
emphasis or may elicit emotions from viewers.
Color Theory - the study of how colors make
people feel and their effects on a design.
HUE (Pure Color) – pure spectrum of colors
referred to by the color names.
TINT (add white) - lightens the color but it
doesn’t make it brighter.
TONE (add grey) - reduce the intensity of any
color.
SHADE (add black) - darkens the color, it
remains the same hue only a darker version.
7. CONTRAST - Contrast is the divergence of
opposing elements (opposite colors on the
color wheel, or value light / dark, or direction
– horizontal / vertical). Contrast allows us to
emphasize or highlight key elements in your
design.
Contrast can be applied through the following:
• Color • Size • Shape
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. It makes
complex data more visually appealing to the
viewers.
Five Principles to create an effective
infographic:
• Be Unique
• Make It Simple
• Be Creative and Bold
• Less is More
• The Importance of Getting it Across
Infographic Video - is a visual representation
of data and knowledge in the form of an
online video.
VISUAL INFORMATION
EXAMPLES OF VISUAL MEDIA
• Photography
• Video
• Screenshots
• Infographics
• Data Visualization (charts and graphs)
• Comic Strips/Cartoons
• Memes
• Visual Notetaking
PURPOSE OF VISUAL INFORMATION
•GAIN ATTENTION
•CREATE MEANING
•FACILITATE RETENTION
ONLINE FILE FORMATS FOR IMAGES AND
TEXT
FILE FORMAT - A standard process that data is
encoded for storage in a computer file.
Defines how bits are used to encode
information in a digital storage device. Most
information comes from different format.
• TEXT - .docs, .pdf
• IMAGE & GRAPHICS - .jpeg, .gif, .png
• AUDIO - .wav, .mp3
• VIDEO - .mp4, .mpeg, .avi
FILE COMPRESSION
• LOSSY - This compression type removes
some information from the image and lowers
the overall quality in order to reduce the file
size.
• LOSSLESS - This compression type does not
remove any information from the image, but it
usually cannot reduce the file size as much as
lossy compression.
JPEG - stands for Joint Photographic Expert
Group. Most common used format by Digital
Camera and other Capturing Device. Most
Common Format when saving pictures on the
internet.
SIZE over QUALITY - Loss of data due to file
compression (Lossy Compression).
GIF - stands for Graphic Interchange Format.
Not recommended for large images with many
colors. File size are very small and load very
fast. Good choice for simple animation.
PNG - stands for Portable Network Graphics.
Supports 24 -bit images and generate
background transparency without jagged
edges. Best format for logos that involves
transparency and fading.
PDF - stands for Portable Document File. It is
optimized in smaller file size without losing
the file quality. Can be viewed using its Reader
or through Web Browsers.
DOC - is short for Document File. File format
created by Microsoft and commonly used by
Microsoft Word. Can include charts,
illustration, formatted text, tables and etc.
PRINCIPLES OF BASIC TECHNIQUES OF IMAGE
MANIPULATION
CROPPING - Cutting parts away to remove
distracting or irrelevant elements.
COLOR BALANCE - The ambience and the tone
of light of the picture (ex. Warm or cool light)
BRIGHTNESS AND CONTRAST - One of the
most basic techniques in image editing,
making the image darker or lighter.
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.
CLONING - Copying or duplicating a part of an
image.
CHANGING THE BACKGROUND - Adding
background to make your image stand out.
REMOVING COLOR - Removing certain colors
in your image or desaturating the color of the
image.
COMBINING TEXT, GRAPHICS AND COLOR -
Adding multiple elements in your layout.
UPLOADING, SHARING AND IMAGE
HOSTING PLATFORMS
IMGUR - Free image hosting sites and doesn’t
need to create an account. Media sharing
capabilities through a unique link. Doesn’t
affect the quality when uploading an image.
Popular for Memes.
GOOGLE PHOTOS - Developed by Google. One
of the most used image hosting sites.
Automatically backup and sync of photo from
your gallery through your google account.
Easy to organize and edit photos based on
tags and category. Unlimited free storage for
android smartphone.
FLICKR - One of the oldest image hosting sites.
Also offers editing features. Album creation is
available with a maximum storage of 1TB.
PHOTOBUCKET - an image and video hosting
website, web services suite, and online
community dedicated to preserving and
sharing the entire photo and video lifecycle.
IMAGESHACK - Offers unlimited storage space
as long as it is less than 25mb. Allows you to
create albums, make tags and set your own
privacy setting.
INSTAGRAM - An online mobile photo and
video sharing, and social networking service
created by Kevin Systrom and Mike Krieger,
and launched in October 2010 as a free
mobile app. It allows its users to take pictures
and videos and share them on social
networking platforms such as Facebook,
Twitter, Tumblr, and Flickr. The service was
acquired by Facebook last April 2012. It has an
estimated 100 million monthly visitors.
PIKTOCHART - is a web-based infographic
application which allows users without
intensive experience as graphic designers to
easily create infographics and visuals using
themed templates. Let us create an
infographic using piktochart.com.
ADOBE PHOTOSHOP - is a raster graphics
editor, an imaging and graphic design software
used by thousands of people in many different
roles across the world. Not only is it for
photos but you can use Photoshop for
designing websites, editing videos, and
creating 3D artwork.