1. IMAGING AND DESIGN FO
ONLINE ENVIRONM
Chapter III of Empowerment Technologies

2. Learning competencies
The learners will be able to:
• Evaluate existing websites and online resources based on the
principles of layout, graphic, and visual message design.
• Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose.
• Create an original or derivative ICT content to effectively
communicate a visual message in an online environment
to specific professional tracks.
Imaging and Design For the Online Environment
01

3. Topic outline
1. Basic principles of graphics and layout
2. Principles of visual message design using infographics.
3. Online file formats for images 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
Imaging and Design For the Online Environment
02

4. Visual Storytelling
THE HYBRID
GRAPHIC NOVEL
FORMATIVE ASSESSMENT

5. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

6. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

7. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

8. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

9. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

10. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

11. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

12. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

13. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

14. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

15. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

16. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

17. FORMATIVE ASSESSMENT
Imaging and Design For the Online Environment
1. What is the story in this graphic novel?
2. Who is the main character in the story? How
did you know?
3. What do you know about the main
character? How did you know it?
18

18. What is an
imag
eImaging and Design For the Online Environment

19. What is an image?
Imaging and Design For the Online Environment
20
An Image is a
representation
of the external
form of a
person or thing
in art.

20. What is an image?
Imaging and Design For the Online Environment
21
• Images may be 2-dimensional,
such as a photograph or
screen display, or 3-
dimensional, such as a statue
or hologram. They may be
captured by optical devices –
such as cameras, mirrors,
lenses, telescopes,
microscopes, etc. and natural
objects and phenomena, such
as the human eye or water.

21. Definition of
Graphics &
layout
Imaging and Design For the Online Environment

22. graphics
Imaging and Design For the Online Environment
23
• Are visual images or designs
on some surface, such as a
wall, canvas, screen, paper,
or stone to inform, illustrate,
or entertain
• Are visual representations of
data made on a computer
and is displayed on a
computer screen or monitor.

23. Example of graphics
Imaging and Design For the Online Environment
24
Photographs

24. Example of graphics
Imaging and Design For the Online Environment
25
Drawing

25. Example of graphics
Imaging and Design For the Online Environment
26
Line Art

26. Example of graphics
Imaging and Design For the Online Environment
27
Graphs

27. Example of graphics
Imaging and Design For the Online Environment
28
Typography

28. graphics
Imaging and Design For the Online Environment
29
• The process of planning and
arranging graphic element in a
page or template. A good layout
should have a balanced make up
and alignment of elements.
• Layout is part of graphic design
that deals in the arrangement of
visual elements on a page.

29. Basic principle of
Graphics & layout
Imaging and Design For the Online Environment

30. BALANCE
Basic principles of graphics and layout
31
• Balance means the equal
distribution of weight.
• In layout, visual weight is
determined by the darkness
or lightness, thickness of lines,
and size.
• Balance is crucial to the
success of design.
• There are two kinds of
balance:
• Symmetrical Balance
• Asymmetrical Balance

31. Symmetrical BALANCE
Basic principles of graphics and layout
32
• The order of elements are evenly
allocated on both sides of pages.
• The visual weight is distributed
evenly, either vertically or
horizontally.
• You can draw a line straight
through the middle of the design,
and the visual balance would be
evenly distributed.

32. asymmetrical BALANCE
Basic principles of graphics and layout
33
• The order of different objects of
the same weight on each side of
the page.
• There is an artistic and different
intensity on one side of the page.
• Color, Shape, size, texture & value
can be used on balancing elements.

33. Symmetrical or
asymmetrical
Which is which?
Imaging and Design For the Online Environment

34. https://paulinavera1992.files.wordpress.com/2014/12/moc-zuckerman-on-composition-symmetry-13-3.jpg

35. http://whsdesignandphoto.weebly.com/uploads/2/4/5/2/24522864/0015dc44ba0733174c6d42a2034f5675_orig
.jpg

36. https://cdn.idevie.com/wp-content/uploads/2015/03/29568_webdesign_02-1minus1-agency-homepage-
website-symmetry.jpg

37. https://www.webdesignerdepot.com/cdn-origin/uploads/2011/07/151.jpg

38. PROXIMITY
Basic principles of graphics and layout
39
• Ensemble related objects together
and moved them physically close
to each other to create less clutter
and more organized layout.
• Organized information is more
likely to read and most probably
remembered.
• Things to remember:
• The organization is clearer.
• The white space is not trapped
within elements.
• There appears to be more room on
the page.
• Common materials that uses
proximity: brochure, flyers and
newsletter.

39. PROXIMITY
Basic principles of graphics and layout
40
a. When there are several elements, add white space. White
space can also mean empty space.
more visually
appealing

40. PROXIMITY
Basic principles of graphics and layout
41
b. Related items should be placed near to each other.
more
pleasing

41. White space
Basic principles of graphics and layout
42
• White Space is the art of nothing .
• Also known as the negative space.
• It is the portion of a page left
unmarked: margins, gutters, and
space between columns, lines of
type, graphics, figures, or objects
drawn or depicted.
• Two kinds of white space:
• Undefined white space
• Active white space

42. https://theultralinx.com/.image/t_share/MTI5MDIzMzUyNDA3OTI3NDI3/shiftlogo-copy.jpg

43. http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg

44. alignment
Basic principles of graphics and layout
45
• The Principle of
Alignment: “Nothing
should be placed on
the page arbitrarily.
Every item should
have a visual
connection with
something else on the
page.”
• Create Order
• Look Clean
ALIGN
MENT

45. alignment
Basic principles of graphics and layout
46

46. alignment
Basic principles of graphics and layout
47

47. repetition
Basic principles of graphics and layout
48
• 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.

48. https://cdn.tutsplus.com/photo/uploads/legacy/418_patterns/4.jpg

49. https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2011/07/odosketch-homepage.jpg

50. https://254-online.com/wp-content/uploads/repetition-principle-of-design-blog-post-pic.jpg

51. repetition
Basic principles of graphics and layout
52
• Infographics is an example that
applied repetition to the design.
It repeatedly used callouts with
identical font size of inside texts.

52. infographics
Basic principles of graphics and layout
53
• 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.
• Five Principles to create an effective infographics:
• Be Unique
• Make It Simple
• Be Creative and Bold
• Less is More
• The Importance of Getting it Across

53. https://amyturnerdesign1990.files.wordpress.com/2011/09/280092_147253505354118_14535294
5544174_303699_2469737_o.jpg

54. http://4.bp.blogspot.com/-
h2Yr24B_bbE/T9ee7LU_sQI/AAAAAAAAAas/BHGzvh1sFVM/s1600/horror.png

55. INFOGRAPHIC EXAMPLE
Basic principles of graphics and layout
56

56. INFOGRAPHIC EXAMPLE
Basic principles of graphics and layout
57

57. INFOGRAPHIC EXAMPLE
Basic principles of graphics and layout
58

58. INFOGRAPHIC EXAMPLE
Basic principles of graphics and layout
59
Infographic Video
– is a visual
representation of
data and
knowledge in the
form of an
online video.

59. color
Basic principles of graphics and layout
60
• 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.
• COLOR VS HUE
COLOR
COLOR

60. Pure spectrum of colors
referred to by the color
names.

61. Tint lightens the color but
it doesn’t make it
brighter.

62. Tone reduce the intensity
of any color.

63. Shade darkens the color,
it remains the same hue
only a darker version

64. HUE
WHITE BLACKGRAY
TONE
TINT SHADE

65. TONEHUE SHADETINT
PALETTE

67. ANALOGOUS COMPLEMENTARY TRIADIC

78. Source: http://www.dailyinfographic.com/logos-a-look-at-the-meaning-in-colors-infographic

79. contrast
Basic principles of graphics and layout
80
• Contrast is the divergence of
opposing elements (opposite
colours on the colour 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

80. contrast
Basic principles of graphics and layout
81
In graphic design, colors do not need to be on opposite segments
(Bear, J.H., 2014).
HELLO
HELLO
made use of two clashing colors,
can be hurting to eyes
HELLO
HELLO
made use of two contrasting
colors, pleasing to eyes

81. contrast
Basic principles of graphics and layout
82
1. BLACK/YELLOW 2. BLACK/WHITE 3. YELLOW/BLACK 4. WHITE/BLUE
5. YELLOW/BLUE 6. GREEN/WHITE 7. BLUE/YELLOW 8. WHITE/GREEN
9. WHITE/BROWN
10.
BROWN/YELLOW
11. BROWN/WHITE
12.
YELLOW/BROWN
13. RED/WHITE 14. YELLOW/RED 15. RED/YELLOW 16. WHITE/RED

82. https://maddisondesigns.com/wp-content/uploads/2009/03/5-basic-principles-of-design.jpg

83. https://254-online.com/wp-content/uploads/repetition-principle-of-design-blog-post-pic.jpg

84. http://www.webpages.uidaho.edu/ART370S15-
gray4661/Art%20370%20Web/Project%202/Web%20Files/images/contrast.png

85. Principles of visual
message
Visual information &
media
Imaging and Design For the Online Environment

86. VISUAL
INFORMATION
VISUAL MEDIA
EXAMPLES OF VISUAL MEDIA
• Photography
• Video
• Screenshots
• Infographics
• Data Visualization (charts and
graphs)
• Comic Strips/Cartoons
• Memes
• Visual Note-Taking
Visual information
Basic principles of graphics and layout
87

87. Purpose of visual information
Basic principles of graphics and layout
88
•GAIN ATTENTION
•CREATE MEANING
•FACILITATE RETENTION

88. Source: http://www.comoxvalleyrd.ca/EN/meta/whats-new/news-archives/2015/practice-how-to-drop-cover-and-
hold-on-during-shakeout-bc-day.html

89. The Power Of Visual Content BY DemandGen Report (2014)
Source: https://www.demandgenreport.com/industry-topics/rich-media/2906-the-power-of-visual-content-infographic

90. Source:
https://postcron
.com/en/blog/vi
sual-content-
strategies-for-
social-networks/

91. THE POWER OF VISUAL CONTENT MARKETING
Source: http://springboardpr.ie/the-power-of-visual-content-marketing/

92. Online file formats for
Images and
text
Imaging and Design For the Online Environment

93. File format
Basic principles of graphics and layout
94
• 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
FILE TYPE FILE FORMAT
TEXT .DOCX, .PDF
IMAGE & GRAPHICS .JPEG, .GIF, .PNG
AUDIO .WAV, .MP3
VIDEO .MP4, .MPEG, .AVI

94. File compression
Basic principles of graphics and layout
95
• 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.

96. JPEG
Basic principles of graphics and layout
97
• 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).

97. gif
Basic principles of graphics and layout
98
• 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.

98. png
Basic principles of graphics and layout
99
• 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.

99. pdf
Basic principles of graphics and layout
100
• 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.

100. doc
Basic principles of graphics and layout
101
• 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.

101. Principles and basic techniques
of
Image
manipulation
Imaging and Design For the Online Environment

102. cropping
Principles and basic techniques of image manipulation
103
1. Cropping. Cutting parts
away to remove
distracting or irrelevant
elements.

103. COLOR BALANCE
Principles and basic techniques of image manipulation
104
2. Color Balance. The ambience and the tone of light of the picture
(ex. Warm or cool light)

104. BRIGHTNESS AND CONTRAST
Principles and basic techniques of image manipulation
105
3. Brightness and
Contrast. One of
the most basic
techniques in
image editing,
making the image
darker or lighter.

105. FILTERS
Principles and basic techniques of image manipulation
106
4. 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.

106. CLONING
Principles and basic techniques of image manipulation
107
5. Cloning.
Copying or
duplicating a
part of an
image.

107. Changing the background
Principles and basic techniques of image manipulation
108
6. Changing the
Background. Adding
background to make
your image stand
out.

108. Removing color
Principles and basic techniques of image manipulation
109
7. Removing the
Color. Removing
certain colors in
your image or
desaturating the
color of the
image.

109. Combining text, graphics and color
Principles and basic techniques of image manipulation
110
8. Combining Text,
Graphics and
Image. Adding
multiple elements in
your layout.

110. Basic image manipulation
Principles and basic techniques of image manipulation
111

111. It started with
one picture

117. Uploading, sharing and
image
Hosting platforms
Imaging and Design For the Online Environment

118. imgur
Basic principles of graphics and layout
119
• 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

119. Google Photos
Basic principles of graphics and layout
120
• 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.

120. flickr
Basic principles of graphics and layout
121
• One of the oldest image
hosting sites.
• Also offers editing features.
• Album creation is available
with a maximum storage of
1TB.

121. photobucket
Basic principles of graphics and layout
122
• an image and video hosting
website, web services suite,
and online community
dedicated to preserving
and sharing the entire
photo and video lifecycle.

122. imageshack
Basic principles of graphics and layout
123
• Offers unlimited storage
space as ling as it is less
than 25mb.
• Allows you to create
albums, make tags and set
your own privacy setting

123. instagram
Basic principles of graphics and layout
124
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.

124. THANK YOU FOR
LISTENING