IMAGING AND DESIGN FOR THE

ONLINE ENVIRONMENT

PREPARED BY: MS. ERICA V. SALISOD

Basic Principles of Graphics and
Layout
Balance- The visual weight of objects, texture, colors
and space is evenly distributed on the screen.
Emphasis- An area in the design that may appear
different in size, texture, shape or color to attract the
viewers attention.
Movement- Visual elements guide the viewers eyes
around screen.
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.
Proportion- Visual elements create of unity where they
relate with one another.
Variety- This uses several design elements to draw
viewers attention.
Principles of visual message design
using info graphics
1. Communicate one central idea.
While you can create a beautiful info graphic
with a smattering of data points (which might be better
termed an info poster), the most illuminating info
graphics communicate one central idea by layering
and sorting information.
2. Communicate the data clearly.

A great infographic minimizes the work the

viewer needs to do to understand an idea. That
doesn’t mean that the viewer needs to comprehend
every nuance immediately—sometimes the data is
too complex and needs to be explored by the
viewer. Nonetheless, the designer should try and
make the message as salient as possible.
3. Create layers.

We like to think of info graphics as having 3 layers:

“must see,” “should see,” and “can see.” Information in
the “must see” layer is vital to the comprehension of the
graphic and needs to be made obvious. Information in
the “should see” category will help comprehension and
add an interesting layer of insight. Information in “can
see” category is least important, but gives the
viewer a chance to explore the graphic in greater
depth.
4. Make it easy to navigate.
Colors, layout, and typography should be used
consistently to form a hierarchy that makes the
graphic easy to navigate and distinguish different
types of information.
5. Keep it beautiful.
There’s no reason data can’t be educational
and inspiring. We subscribe to the school of
thought that good design is always calming and
engaging.
Online file formats for images and text
GIF- GIF format is the most popular format in the
internet, mainly because of its small size.

JPEG- It is design with photographs in mind. It is

capable of displaying millions of colors at once,
without the need for dithering.
PNG- is a format specially invented for the web in
response to a licensing scheme introduced which meant
the creators of any software that supported the GIF
format to had to pay five thousand dollars for the
previllage
Principles and basic techniques of
image manipulation
Background Color- You can change the background
if it does not match the image or the totality of the
presentation. You can also add effects to the
background.
Multiple Images- You can combine multiple images
to make a point or use to highlight your message.
Shadow- Using shadow effect will make the image
realistic.
Proportion- when combining images, resize the
image to make it proportionate and realistic.
Blending- Color You can use color blending to
match the background with other elements in the
page.
Emphasis- There should be a focal point to a page
that will attract viewers. The element you want to
emphasize should be sharp, big, and most vibrant in
your design.
Basic image manipulation using offline
or open source software
Picasa- Is a discontinued image organizer and image
viewer for organizing and editing digital photos, plus
an integrated photo-sharing website.

Paint net- Is a freeware raster graphics editor program

for Microsoft windows.
Google Sketch Up- A 3D modelling program from
Google that is known for its ease of use.
Autodesk Pixlr- Is a Auto desk’s browser-based
photo editor, and its mobile companion Pixlr.
Adobe Photoshop- An image editing software that
is considered as one of the leader in photo editing
software.
GIMP- Is a free and open-source raster graphics
editor used for image retouching and editing.
Combining text, graphics, and images
Transparent Shapes- Add simple shapes with a
slight transparency behind your text to clearly
see the text you want to emphasize.
Fonts and Shapes- should complement each
other. You can use rounded shapes fonts and
sharp shapes with sharp fonts.
Text and Background- should be aligned to have
an organized look. You can align text with shapes or
geometric figures in the image.

Clean and Clear Background- Use a clean and

clear background for the message to be readable.
Background should not washout your message.
Uploading, sharing, and image hosting
platforms
Flickr- is perhaps the most popular photo sharing
website.
Picasa- It offers users the chance to upgrade their
package to have more space and editing tools in
return for a fee.
Photo Bucket- The most popular sharing site in the
U.S. It Includes instant chat option and operates closer
to the way traditional social networking websites to.
Instagram- The fastest growing photo sharing
website. It is allows user to upload photo on their
profile.
Video Sharing- It is almost the same with the photo
sharing though for video sharing videos are what
are being shared not photos.
YouTube- The most popular video sharing website
on the internet. It accept videos uploaded in most
container formats.
Thank you