Manipulating Text, Graphics, and Images

1. MANIPULATING TEXT, GRAPHICS, AND
IMAGES TO CREATE ICT CONTENT
INTENDED FOR AN ONLINE
ENVIRONMENT

2. 5 BASIC PRINCIPLES OF GRAPHICS AND LAYOUT
1. Proximity
2. Alignment
3. Repetition
4. Contrast
5. White Space

3. PROXIMITY
Proximity means grouping elements together
so that you guide the viewer/reader to
different parts of the message..

4. 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.

5. 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.

6. 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.

7. 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.

8. CONTRAST
Contrast between design elements can make a
presentation stand out and get noticed.

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

10. 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.
CONTRAST

11. 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.

12. 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.
WHITE SPACE

13. PRINCIPLES OF VISUAL
MESSAGE DESIGN USING
INFOGRAPHICS

14. 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.

15. INFOGRAPHICS
Infographics
communicate complex
data quickly and
clearly, and they are
considered to be
effective worldwide.

16. - 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

17. 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,

18. Infographics are composed of three important
elements:
Visual Elements
 Color coding
 Graphics
 Reference icons
Content Elements
 Time frames
 Statistics
 References
Knowledge Elements
 Facts

19. 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.

20.  Gallop Organization was the
first to deeply investigate
the capabilities of
infographics.
 The emergence of the
Internet precipitated the use
of infographics.
The History of Infographics

21. Types of Infographics
It is possible to classify
infographics according
to five categories.

22. 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.

24. 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.

26. 3. Quantitative Infographics
Quantitative infographics convey statistical
data to readers quickly and clearly.
These graphics include charts, bar graphs, tables
and lists.

28. 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.

30. 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.

32. Three Categories of Visual Infographics
1. Static infographics
present information at once and in its entirety.
e.g., newspaper graphics and product manuals.

33. 2. Motion infographics
play a major role in cinema and presentations.
Information is presented sequentially and
consistently.
e.g., graphic animations and PowerPoint
presentations.

34. 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.

35. TIPS FOR DESIGNING
INFOGRAPHICS

36. 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.

37. Nothing Takes Effect Without a Cause
Emphasize cause and effect relationships in your
presentation.
Infographics spread awareness and enable people to
voice their concerns.

38. 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.

39. 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.

40. 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.

41. 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.

42. 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.

43. Excellent Examples of Creative Infographics

44. Excellent Examples of Creative Infographics

45. Excellent Examples of Creative Infographics

46. Excellent Examples of Creative Infographics

47. Excellent Examples of Creative Infographics

48. Excellent Examples of Creative Infographics

49. Excellent Examples of Creative Infographics

50. Examples of Some of the Interesting Infographics

51. Examples of Some of the Interesting Infographics

52. Examples of Some of the Interesting Infographics

53. Examples of Some of the Interesting Infographics

54. ONLINE FILE FORMATS
FOR IMAGES AND TEXT

55. The most common image file formats, the
most important for cameras, printing,
scanning, and internet use, are JPG, TIF,
PNG, and GIF.

56. 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

57. 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.

58. 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.

59. 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.

60. 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.

61. • 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).

63. PNG
• Stands for Portable Network Graphics.
• This is a newer file format similar to a .GIF but it
supports more colors.

65. 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).

66. BASIC MANIPULATION
USING OFFLINE OR OPEN
SOURCE SOFTWARE

67. 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.

69. 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.

71. 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..

72. 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.

74. 5. TKexe Kalender
This software quickly creates a personal and
unique edition of paper calendar.

76. 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.

80. 7. Foto Mosaik
This program helps the
user to create a mosaic
picture from hundreds
or thousands of photos.

82. 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.

85. 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.

88. 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.

90. COMBINING TEXT, GRAPHICS, AND
IMAGES

91. Transparent shapes

92. Mix and Match

93. Align Text and Backgrounds

94. Clean & Clear Backgrounds

95. UPLOADING, SHARING, AND
IMAGE HOSTING PLATFORMS

96. 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.

97. • 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.

101. 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

102. • 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)

103. • 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.

104. 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.

110. 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.

111. • 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.

112. • 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.

114. 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.

115. • 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

116. • 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.

120. 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)

121. • 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.

122. • 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.

126. 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.

127. • 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.

128. • 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

129. • 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.

133. 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.

134. • 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.

135. • 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.

138. 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.

139. • 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.

142. 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.

143. • 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.

144. • 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.

147. 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).

148. • 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.

149. • Best for: Uploading individual photos to be shared on forum
message boards.
• Max image size/storage: No specified file size or storage
restrictions.