IMAGINING AND DESIGN FOR THE

ONLINE ENVIRONMENT COVERING

THE TOPICS:
1.Basic principles of graphics and layout
2.Principles of visual message design using info
graphics
3.Online file formats for image and text
4.Principles and basic techniques of image
manipulation
5.Basic image manipulation using offline or open
source software
6.Combining text, graphics, and images
7.Uploading, sharing, and image hosting platforms
 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
Creating a web page is like creating a work of art. There are certain things that
you need to consider in order to get your message across.

1. Balance. The visual weight of objects, texture, colors, and space is evenly
distributed on the screen.
2. Emphasis. An area in the design that may appear different in size, texture,
shape or color to attract the viewer's attention.

An example page of balance and emphasis

3. Movement. Visual elements guide the viewer's
eyes around the screen.
4. 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.

Movement Pattern, Repetition, and Rhythm

5. Proportion. Visual elements create a sense of unity where they
relate well with one another.

6. Variety. This uses several design elements to draw viewer's

attention.

Proportion.
Variety
Principles of visual message design using
info graphics
The End
*Can easily catch your audience attention' attention
*Can increase your brand awareness
*Can make your content really viral
*Can increase your search marketing results
*Can increase your subscribers and followers
*Portable and easily embeddable
*Can make your content more understandable*
*Can expand beyond digital marketing
*Position you as an expert
*Easy track with analytics
Principles of Visual Message
*Unity
*Gestalt
* Space
* Hierarchy
*Balance
*Contrast
*Scale
*Dominance
*Similarity
Principles of infographics
Representation of data
Information
Design to communicate quickly
simplify
present patterns
trens
 Online file formats for image and text
There are 5 main formats in which to store images. Why would
you choose one over another, and what are the differences?

1.TIFF(also known as TIF), file ending in .tif

TIFF stand for Tagged image File Format. TIFF image create
very large file size.TIFF image are uncompressed and thus
contain a lot of detailed image data n(which is why the
files are so big) TIFFs are also extremely flexible in terms of
color (they can be grayscale, or CMYK for print , or RGB for
web) and content (layers, image tags).
 2.JPEG (also known as JPG), file types ending in .jpg
JPEG stands for Joint Photographic Experts Group, which
created this standard for this type of image formatting.
JPEG files are images that have been compressed to
store a lot of information in a small-size file . Most digital
cameras store photos in JPEG format, because then you
can take more photos on one camera card than you
can with other formats.
Lossy compression – in the way that losses some of the image
detail during the compression in order to make the file small.”

Bitmappy -JPEG file are bad for line or logos or graphics.

 3.GIF,file types ending in .gif

GIF stands for Graphic Interchange Format. This format

compresses images but, as different n from JPEG, the
compression is lossless (no detail is lost in compression ,
but the file can’t be made small as a JPEG)
GIFs also have an extremely limited color range
suitable for the web but not printing. This format is
never used for photography, because of limited
number of colors. GIFs can also be used for animation.
 4. PNG, file types ending in .png

PNG stands for Portable Network Graphics. It was created

as an open format to replace GIF, because the patent
for GIF was owned by one company and nobody else
wanted to pay licensing fees. It also allows for a full range
of color and better compression.
PNG is not as good as JPEG, because it create larger file.
But for images with some text, or line art, it’s better,
because the images look less “bitmappy”.
 5. RAW image files

Raw image files contain data from a digital camera

(usually). The files are called raw because they haven’t
been processed and therefore can’t be edited or
printed yet. There are a lot of different raw formats-
each camera company often has its own proprietary
format.
Raw file usually contain a vast amount of dta that is
uncompressed. Because of this , the size of a raw file is
extremely large. Usually they are converted to TIFF
before editing and color – correcting.
 Principles and basic techniques of image
manipulation
1.Choose the right file format.
Try to make a real-life photograph into GIF to see the difference
between PNG,GIF, and JPEG. Knowing the purpose is the key to
finding out the best file formats.
2.Choose the right image size.
A camera with 12 megapixels constitutes to a bigger image size.
Monitors have a resolution limit, so even if you have a million
megapixels, it will not display everything. Thus, it is not always wise to
make our image big, most especially in a website. Know how much
space you want the image to consume. Or have a “preview” image
where the audience has the option to “see full size”.
3. Caption it
Remember to put a caption on images whenever
possible. If it’s not related to the web page , then remove
it.
 Basic image manipulation using offline
or open source software
Photos editing and designing tools allow you to manipulate
or edit images, apply effect, filters, add frame, crop, add text,
change backgrounds color, make photo collage , and photo
album that you would like to do in an image.
1.Picasa
-is a discontinued image organizer and image viewer for
organizing and editing digital photos , plus an integrated photo-
sharing website, originally created by a company named
lifescape (which at the time may have resided at idealab) in
2002.
- PicasaIs a free online photo-sharing tool provided by
Google. Once a user download Picasa , it automatically
locates photos on the user’s PC and moves them to
Picasa. The program then allows user to edit photos ,
compile and organize albums and share photos online.
2. Paint.net
-Paint.net (stylize as Paint.NET or paint.net) is a freeware
raster graphics editor program for Microsoft Windows,
developed on the .NET Framework.
3.Google sketch Up
-A 3D modelling program from Google that is known for
its ease of use . Used for architectural purposes as well
as films and games designs.
4.Authodesk Pixlr
- Photographers may already br familiar with pixlr,
Autodesk’s browser-based photo editor, and its mobile
companion Pixlr Express for iOS and Android. Today,
Autodesk announced Pixlr in a new format: a desktop
version for Mac and Windows.
5. Adobe Photoshop
An image editing software
developed manufactured by Adobe
System Inc. Photoshop in considered
one of the leaders in photo editing
software. The software allows users to
manipulate, crop, resize, and correct
color on digital photos
6. GIMP
GIMP ( /gimp / GHIMP) ( GNU
Image Manipulated Program) is a
free and open-source raster
graphics editor used for image
retouching and editing , free-form
drawing, converting between
different image formats, and more
specialized tasks.
 Combining text, graphics, and
images
Combining test, graphics, and images in your
presentation, infographics or web page will make
your message clearer.
 Transparent shapes
Add simple shapes with a
slight transparency behind
your text clearly see the text
you want emphasize.
Fonts and shapes
Should complement
each other. You can use
rounded shapes with
rounded 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
Sharing Platforms
Photo Sharing
* Photo sharing website allow users to upload their
images to share with their online friends , or indeed
the entire web.
Here is a list of some of the most popular and widely-used photo
sharing website:

*Flicker- The most popular photo sharing website. It allows users to

join groups similar to their interest in order to share images and there
big focus tagging.
*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 site has many of the same features but also
includes instant chat options and operates closer to the way
traditional social networking website do.
*Instagram- It is popular with Twitter and Facebook users in particular
as it allows people to upload to their profiles.
 Video Sharing
Top 5 Free Website
1.Youtube -The most popular video-sharing website on the internet.
2.Vimeo - The next open video website to upload videos for free
introduced here in www.vimeo.com
3.Metacafe- Another video-sharing website for you to post your
videos for free. It has transformed to specialize in short-dorm video
entertainment in the categories of movies, video games, sports, music
and TV.
4. Hulu- Its is entertaining website and it offers a variety
of TV shows, movies and originals
5. Vevo - Its is right place for music artist and music
lovers. They can use this platform to promote their
works and as for music lovers they can find more
wonderful song here.