MANIPULATING TEXT, GRAPHICS, AND

IMAGES TO CREATE ICT CONTENT

INTENDED FOR AN ONLINE
ENVIRONMENT
5 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
1. Proximity
2. Alignment
3. Repetition
4. Contrast
5. White Space
PROXIMITY
Proximity means grouping elements together
so that you guide the viewer/reader to
different parts of the message..
PROXIMITY
Though at first the elements
may appear scattered, their
proximity adds unity and
continuity to the page. Even
if you intend on sticking to
templates, it still helps to
know design principles for
the purposes of customizing
an existing design.
ALIGNMENT

• Most amateur designers start off by aligning everything in

the center of the page, but that’s not the only way.
• Again with the “scattered” looking design, we can see the
alignment of elements that helps keep the design
balanced.
ALIGNMENT
It’s important to be
consistent in the
alignment of elements.
When you look at the
design and something
doesn’t feel right, play
around with the
alignment and see if the
design can be improved.
REPETITION
In the layout on the right,
the image of the
sandwiched is cropped and
masked in repeating
squares, as well as the use
of repeated red strokes
above the word “PANE.”
Repetition puts emphasis
on particular elements of a
design, and it draws the
reader’s attention to those
elements.
CONTRAST

Contrast between design elements can make a

presentation stand out and get noticed.
CONTRAST

Adding color contrast

makes the design pop,
and it draws attention to
important parts of the
presentation and
message.
CONTRAST

Notice another piece of

contrast: the two arrows are
followed by the check in the
circle, which sends a visual
message. The color of that
element could also be
changed to add contrast.
WHITE SPACE

• Very powerful in design.

• Useful when you want to make a direct message, to
stand out above the clutter found in many graphic
designs.
WHITE SPACE

The white space provides room for the

clean font style of the title, the graphic
elements, and the grouped text.

As Robin Williams points out, white space

can also be a form of contrast.
 PRINCIPLES OF VISUAL
MESSAGE DESIGN USING
INFOGRAPHICS
Infographics
- are visual presentations of information that use the elements
of design to display content.
- Infographics express complex messages to viewers in a way
that enhances their comprehension.
- Images are often an extension of the content of a written
article, but infographics convey a self-contained message or
principle.
INFOGRAPHICS
Infographics
communicate complex
data quickly and
clearly, and they are
considered to be
effective worldwide.
 INFOGRAPHICS
- Suitable for complex piece of
information that needs to be
described quickly, precisely and
clearly.
- Infographics are used for signs,
maps and data presentations.
- Scientists, technical writers,
mathematicians, educators and
statisticians use infographics
most of the time.
 Infographics are used for the following
reasons:
 To communicate a message,
 To present a lot of data or information in a way
that is compact and easy to comprehend,
 To analyze data in order to discover cause-and-
effect relationships,
Infographics are composed of three important
elements:

Visual Elements Content Elements

 Color coding  Time frames
 Graphics  Statistics
 Reference icons  References
Knowledge Elements
 Facts
The History of Infographics
 The first known examples of
infographics are hieroglyphics or cave
paintings in ancient Egypt 5,000
years ago.
a. Nicole d’Orseme (1352-82), Bishop
of Lisieux, combined figures into
groups and graphed them.
b. Leonardo da Vinci combined
graphics with text in his “Treatise on
Painting.”
 Fortune magazine (US), the Chicago
Tribune and the New York Times.
The History of Infographics

 Gallop Organization was the

first to deeply investigate
the capabilities of
infographics.
 The emergence of the
Internet precipitated the use
of infographics.
 Types of Infographics

It is possible to classify
infographics according
to five categories.
1. Cause and Effect Infographics
These graphics explain causal relationships
between various physical or conceptual stages.

e.g., the causes of the recession in the US and its effect

on the global economy.
2. Chronological Infographics

Chronological infographics explain an event or process

as it happened in time.

For example, a bar chart that shows the growth in sales of a

particular product over a period of time is a chronological
infographic.
3. Quantitative Infographics
Quantitative infographics convey statistical
data to readers quickly and clearly.
These graphics include charts, bar graphs, tables
and lists.
4. Directional Infographics
Infographics can navigate readers through information.
Numbers, symbols, icons, diagrams, graphs, tables, arrows and
bullets are used to communicate information.
Examples:
* Traffic symbols, scale maps and navigational aids on
streets and highways.
* Numbers are used to indicate the distance, and dots,
arrows and bullets are used as landmarks for directional aid.
5. Product Infographics

 Product infographics can be seen on notice boards at

factories and corporate offices, conveying
information to all employees and visitors.
 Product infographics are also used by dieticians and in
cooking schools to convey key procedures.
Three Categories of Visual Infographics

1. Static infographics
present information at once and in its entirety.

e.g., newspaper graphics and product manuals.

2. Motion infographics
play a major role in cinema and presentations.
Information is presented sequentially and
consistently.

e.g., graphic animations and PowerPoint

presentations.
3. Interactive infographics
information is presented according to the reader’s
choice.
e.g., On the web, a reader might select what they
want to view from a complex set of instructive and
simulated information.
TIPS FOR DESIGNING
INFOGRAPHICS
Simplicity Is the Best Policy

Infographics should be simple, clean, concise and clear.

Make sure the information being conveyed is well
organized. Visual simplicity ensures that the graphic will
be easy for readers to comprehend.
Nothing Takes Effect Without a Cause
Emphasize cause and effect relationships in your
presentation.

Infographics spread awareness and enable people to

voice their concerns.
Draw Your Boundaries

Be clear: limit the scope of your information, and draw

your lines accordingly. The attention span of the average
user is not increasing.

Define your question carefully, and be sure to answer it

using the best method available. The visualization you
create will be much more effective and imaginative that
way.
Think in Color
Color is the most effective tool by which authors guide and
influence their readers. Color can give readers varied
impressions, both conceptual and emotional.

Color makes the information you provide more legible and

determines the visual hierarchy of information.

TAKE NOTE: Contrast is king: the background should blend well

with the illustrations.
Layout Is Not Just About Typography
Tap your creativity: try different combinations of typography,
illustrations, images, charts, diagrams and icons.

Use a maximum of two or three fonts in the designs you create.

The effectiveness of the infographic will depend entirely on
your creativity as a designer.

Add a logo if the infographic is connected to a company or

institution.
Make It Appeal the Eye

Ensure that you have a clear idea of the final size of

the graphic as you are working.

Design your graphics to be viewed along with

articles.
Be Verifiable
Make infographics trustworthy by allowing
readers to dig deeper into the data if they so
desire.

Always cite your data sources with relevant links.

Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Excellent Examples of Creative Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
Examples of Some of the Interesting Infographics
 ONLINE FILE FORMATS
FOR IMAGES AND TEXT
The most common image file formats, the
most important for cameras, printing,
scanning, and internet use, are JPG, TIF,
PNG, and GIF.
Compression
• This deals with the file size. The more compressed the image
the smaller the file.

2 Types are:
• Lossy compression reduces the size of the image by discarding
image detail.
• Lossless compresses the image without discarding any detail,
but the file sizes are larger
Number of colors
• The simplest may only have one of two colors (a good
example of these would be logos) while the more complex
(like digital photos) contain millions.
• Certain file types, like .GIF, are better suited for images with
less color while others, like .JPEG, all well suited for images
with millions of colors.
 JPG
• JPG files, also known as JPEG files, are a common file
format for digital photos and other digital graphics.

• JPEG stands for Joint Photographic Experts Group,

the committee that created the file type.

• JPG files have the file extension .jpg or .jpeg.

 TIF
• Stands for Tagged Imaged File Format.

• Generally used for professional photography, print

publishing and graphic design.

• Uses losless compression so the files are usually very

large

• TIF does most of anything you might want, from 1-bit to

48-bit color, RGB, CMYK.
 GIF
• Stands for Graphics Interchange Format.

• This file type uses lossless compression and is

generally used for images with less than 256
colors, like icons or logos.
• GIF is rather limited colors for color photos, but is
generally great for graphics.

• GIF offers transparency and animation.

• For graphics of only a few colors, GIF can be much

smaller than JPG, with more clear pure colors than
JPG).
 PNG
• Stands for Portable Network Graphics.
• This is a newer file format similar to a .GIF but it
supports more colors.
Major considerations to choose the necessary file type
include:
•Compression quality - Lossy for smallest files (JPG), or
Lossless for best quality images (TIF, PNG).
•Full RGB color for photos (TIF, PNG, JPG), or Indexed Color
for graphics (PNG, GIF, TIF).
•16-bit color (48-bit RGB data) is sometimes desired (TIF and
PNG).
•Transparency or Animation is used in graphics (GIF and PNG).
•Documents - line art, multi-page, text, fax, etc - this will be
TIF.
•CMYK color is certainly important for commercial prepress
(TIF).
 BASIC MANIPULATION
USING OFFLINE OR OPEN
SOURCE SOFTWARE
1. GIMP

The GNU Image Manipulation Program is a powerful and free

piece of software that can handle all basic image editing tasks
and much more beyond that. The fact that it’s open source and
available for UNIX platforms, Mac and Windows makes it
extremely flexible.
2.Paint.NET

It can complete simple tasks such as red eye correction,

resizing, cropping, but it also supports layers. The program is
open source and a great collection of user created plugins is
available from its online community.
3. Autostitch

• This is the perfect tool if you

want to create panorama images.
• It works fully automatic and
doesn’t require user input.
• The program can handle both
horizontal and vertical stitching..
4. Microsoft Research Group Shot

With this software you can select your favorite parts in

each shot of the series and the program will merge all
your photos into the perfect composite image.
5. TKexe Kalender

This software quickly creates a personal and

unique edition of paper calendar.
6. Opanda PhotoFilter

Opanda PhotoFilter is used to post process your

snapshots. The program comes equipped with
more than 100 different settings simulating Kodak,
Cokin and Hoya filters.
7. Foto Mosaik

This program helps the

user to create a mosaic
picture from hundreds
or thousands of photos.
8. Win Morph
• Morph, warp and distort images in a professional
and high quality way.

• It works as standalone application or as a plugin for

various video editors, it offers advanced keyframing,
blending and distortion tools for total control and
can even do dynamic morphing with various input
(JPEG,BMP,PCX,PNG,PBM,TGA,TIFF) and output
(JPEG,BMP,PNG,TGA,TIFF,AVI,MPEG and SWF) file
formats.
9. Free Digital Camera Enhancer

This is the tool to give your digital images the final

touch. Reduce noise caused by bad light situations,
smooth skin in portraits, correct the midtones, and
add saturation. Naturally, this will work best on bad
images.
10. JPEG Lossless Rotator
• With most programs, the simple act of rotating your JPEG
photo into the right orientation and saving it causes a loss of
quality.

• JPEG Lossless Rotator does the job without recoding your

photo. Rather it performs a special lossless block
transformation which leaves the quality of your photo
untouched.
COMBINING TEXT, GRAPHICS, AND
IMAGES
Transparent shapes
Mix and Match
Align Text and Backgrounds
Clean & Clear Backgrounds
 UPLOADING, SHARING, AND
IMAGE HOSTING PLATFORMS
Imgur

• Online image sharing community and image

host founded by Alan Schaaf.
• No need to sign up for a free account.
• Images from your computer can be uploaded to Imgur
to be shared on your favorite social network via a
unique URL, or within the Imgur community itself.
• Best for: Uploading photos (and animated GIFs) as
quick and painlessly as possible without losing their
quality, to be shared anywhere online–especially social
networking sites.
• Max image size/storage: 20 MB for all non-animated
GIF images and 200 MB for animated GIF images.
Google Photos
• A photo sharing and storage service developed by Google. It
was announced in May 2015 and spun out from Google+, the
company's social network.

• In May 2016, 200 million monthly active users uploaded at

least 13.7 petabytes of photos/videos, with over 2 trillion
labels having been applied (24 billion of those being selfies),
and 1.6 billion animations, collages and effects had been
created based on user content
• Google Photos has two storage settings: "High quality"
and "Original quality".

• High quality includes unlimited photo and video

storage for photos up to 16 megapixels and videos up
to 1080p resolution (the maximum resolutions for
average smartphone users in 2015)
• Google Photos is probably one of the most useful
photo resources you can use, mainly for its powerful
automatic backup feature.

• You can also use this to edit your photos, organize

them according to people/places/things and share
your photos online even with non-Google Photos
users.
GOOGLE PHOTOS
• Best for: Automatically backing up photos that you take,
uploading large quantities, editing them and organizing them.

• Max image size/storage: Unlimited free storage for photos

taken by smartphones and point-and-shoot cameras (16
megapixels or less) plus the option to alternatively use your
limited storage space from your Google account for photos
taken by DSLR cameras.
Flickr
• an image hosting and video hosting website and web
services suite that was created by Ludicorp in 2004
and acquired by Yahoo on March 20, 2005.

• The service is widely used by photo researchers and

by bloggers to host images that they embed in blogs
and social media.
• Flickr is one of the oldest and most widely known
photo sharing social networks currently out there.

• Not only does it offer free image hosting but also has
editing tools you can use to perfect your photos
before organizing them into albums.
• Best for: Editing your photos to look their best,
creating albums and social networking.

• Max image size/storage: 1 TB (1,000 GB) of free

storage space.
 500px
• is a Canadian online community, and marketplace based
on photography, co-founded by Oleg Gutsol and Evgeny
Tchebotarev (artistically also known as “Ian Sobolev”)
on Halloween 2009.

• The Toronto-based startup launched its Web 2.0 version in

2009 and is aimed at aspiring and professional photographers;
encouraging members to upload their best work.

• In August 2015, the company launched a new version of its iOS

app.
• 500px is seen as a place to gain exposure, find
inspiration and connect photographers with one
another.

• As of January 2016, the site had 7 million users

• Best for: Social networking with other photographers and
licensing or selling your photos.

• Max image size/storage: Since 500px is more of a social

network and photography portfolio site than a simple image
hosting platform, it doesn't specify any file size or storage
restrictions.
Photobucket
• American image hosting and video hosting website, web
services suite, and online community dedicated to preserving
and sharing the entire photo and video lifecycle.
• Alex Welch and Darren Crystal – founder of the website (2003)
• Trinity Ventures – funds the website
• Acquired by Fox Interactive Media in 2007
• Photobucket to Seattle Mobile startup Ontela (December 2009)
• Photobucket not only lets you store your photos but also
allows you to create and buy prints from the photos that you
upload.

• Users can turn their memories into canvas prints, canvas

posters, metal prints, regular prints, framed prints, home
decor items and personalized gifts directly through
Photobucket.
• Best for: Uploading and storing photos in their original sizes,
editing them, organizing them, hosting animated GIFs and
printing photos on products.

• Max image size/storage: 2 GB of free storage space with an

extra 8 GB that you can get just for downloading the free
mobile app.
ImageShack
• The site was launched in November 2003. The main page has
a file selection field, where the user may select the image file
to upload.

• The image file format must be

either JPEG (JPG), PNG, GIF, TIFF (TIF), or BMP, and the file
must be smaller than or equal to 5 megabytes (free service)
or 10 megabytes (subscription service). Uploaded BMP and
TIFF (TIF) images are automatically converted to PNG format.
• Use it to upload as many high-resolution photos as you
want, create albums, organize everything with tags and
discover featured photos from other users for
inspiration.

• Privacy options are available if you don't want your

photos to be viewed publicly, and you can easily share
a single photo or an entire album with anyone you like.
• After the file is uploaded, the user is redirected to a
page containing different versions of URLs to the
uploaded image. These URLs are not listed publicly, so
only the user and the people to whom the user shares
the URL know the file location
• Best for: Uploading large quantities of photos, organizing
them and sharing single photos or entire albums.

• Max image size/storage: Unlimited uploads and unlimited

space as long as each individual photo file size is no larger
than 25 MB.
Dropbox
• Dropbox is a free cloud storage provider that you can
use to store all sorts of different file formats, in
addition to photos.

• You can get a shareable link to a single photo file or

even an entire folder containing multiple photos to
share with other people.
• Dropbox also has a variety of extremely powerful
mobile apps that you can use to upload, manage and
share all of your photo files right from your device.

• Dropbox was founded in 2007, by MIT students Drew

Houston and Arash Ferdowsi, as a startup
company from the American seed accelerator Y
Combinator.
• Best for: Sending or sharing individual photos or folders of
photos with others

• Max image size/storage: 2 GB of free storage with the

opportunity to earn as much as 16 GB in extra free storage by
inviting other people to join Dropbox.
Free Image Hosting
• Free Image Hosting is similar to Imgur but without the
trendy layout and or the convenient hyperlink shortener.

• You can upload images without needing to create a free

account first.

• Free Image Hosting provides you with the HTML code to a

direct link to your photo so you can share it easily.
• Best for: Uploading individual photos fast and directly linking
to them so they can be displayed elsewhere on the web
(social networks, websites, forums, etc.)

• Max image size/storage: 3,000 KB per photo file size.

Tinypic
• Tinypic (a product of Photobucket) gives users a fast
and simple way to upload and share photos without
having to create or log into an account.

• Tinypic provides you with a simple link you can use to

share your photo anywhere.
• Adding tags will help users who use Tinypic's search
function to find relevant photos.

• Photos (and videos) that are not associated with a user

account will remain on the site for at least 90 days, after
which they may be removed if they haven't been viewed.
• Best for: Uploading photos fast and sharing them anywhere
online–especially forum message boards.

• Max image size/storage: No larger than 1600px for both the

width and height. Photos that are too large are resized to
acceptable sizes.
PostImage
A very simple site that gives you free image hosting
for life and something that most other free image
hosting sites don’t give their users: the opportunity to
host adult content (as long as it also doesn't fall under
the category of being violent, racist or illegal).
• This site is primarily used for hosting images for forums
and comes with a simple image upload mode forum
users can install and use.

• You can upload multiple images at a time and choose

to resize them for avatar use, message boards, web,
email or computer monitors.
• Best for: Uploading individual photos to be shared on forum
message boards.

• Max image size/storage: No specified file size or storage

restrictions.