04
LEARNERS WILL BE ABLE TO… evaluate the reliability and validity of visual information and media and its/ their sources using selection criteria (MIL11/12-VIM-IVc-9). LEARNING COMPETENCIES<br>
05
I- VISUAL INFORMATION AND MEDIA Definition
Purpose and Importance
Types and Formats
Visual Design Elements
TOPIC OUTLINE<br>
06
Visual Storytelling THE HYBRID GRAPHIC NOVEL
SOURCES:
https://www.dtelepathy.com/blog/inspiration/30-compelling-examples-of-visual- storytelling-on-the-web
http://graphicnovel-hybrid4.peugeot.com/start.html
FORMATIVE ASSESSMENT<br>
07
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
08
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
09
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
10
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
11
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
12
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
13
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
14
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
15
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
16
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
17
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
18
Source: http://graphicnovel-hybrid4.peugeot.com/start.html<br>
19
CLASS ACTIVITY 1. Write the story of the graphic novel in your notebook. You are not allowed to talk to your classmates. (5 minutes) FORMATIVE ASSESSMENT<br>
20
CLASS DISCUSSION What is the story in this graphic novel?
Who is the main character in the story? How did you know?
What do you know about the main character? How did you know it?
FORMATIVE ASSESSMENT<br>
21
VISUAL INFORMATION VISUAL MEDIA EXAMPLES OF VISUAL MEDIA Photography
Video
Screenshots
Infographics
Data Visualization (charts and graphs)
Comic Strips/Cartoons
Memes
Visual Note-Taking<br>
22
PURPOSE OF VISUAL INFORMATION gain attention create meaning
facilitate retention<br>
23
PURPOSE OF VISUAL INFORMATION 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<br>
24
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<br>
25
Source: https://postcro n.com/en/blog
/visual- content- strategies-for- social- networks/<br>
26
THE POWER OF VISUAL CONTENT MARKETING
Source: http://springboardpr.ie/the-power-of-visual-content-marketing/<br>
27
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE-FORMATS-MEGA- CHEAT-SHEETS/ COMMON VISUAL MEDIA FILE TYPES<br>
28
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE- FORMATS-MEGA-CHEAT-SHEETS/<br>
29
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE- FORMATS-MEGA-CHEAT-SHEETS/<br>
30
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE- FORMATS-MEGA-CHEAT-SHEETS/<br>
31
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE- FORMATS-MEGA-CHEAT-SHEETS/<br>
32
KNOW YOUR IMAGE FORMAT
HTTPS://MAKEAWEBSITEHUB.COM/IMAGE- FORMATS-MEGA-CHEAT-SHEETS/<br>
33
ELEMENTS OF VISUAL DESIGN VISUAL DESIGN ELEMENTS
P.123 MIL TEACHING GUIDE BY CHED
THE BUILDING BLOCKS OF VISUAL DESIGN BY TEO SIANG
https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design<br>
34
LINE describes a shape or outline create texture and can be thick or thin
may be actual, implied, vertical, horizontal, diagonal, or contour lines VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED<br>
35
LINE Source: https://www.interaction- design.org/literature/article
/the-building-blocks-of-
visual-design<br>
36
LINE Source: https://www.interaction- design.org/literature/arti cle/the-building-blocks- of-visual-design Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0<br>
37
SHAPE a geometric or organic area that stands out from the space next to or around it, or because of differences in value, color, or texture VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED<br>
38
SHAPE Source: https://www.tes.com/lessons/AML9tkm0rSdgfA/organic-versus-geometric<br>
39
SHAPE Source: http://vanseodesign.com/web-design/form-surface-volume/<br>
40
VALUE the degree of light and dark in a design contrast between black and white and all the tones in between VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED<br>
41
VALUE Source: https://www.sitepoint.com/principles-of-design-value/<br>
42
VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED TEXTURE way a surface feels or is perceived to feel
illusion of the surfaces peaks and valleys, resulting in a feeling of smoothness or roughness in objects<br>
43
TEXTURE No Texture With Texture<br>
44
TEXTURE Source: https://www.pinterest.co m/pin/4318530517539009
79/<br>
45
TEXTURE Source: http://www.sibleyfineart.c om/glyscreen_oe.htm?gly
/b23--bearded-collie.htm<br>
46
TEXTURE Source: http://opinion.inquirer.net/105207/editorial-cartoon-june-29-2017<br>
47
COLOR 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
VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED<br>
48
Source: https://www. creativeboom
.com/resourc es/essential- colour- guide-for- designers- understandin g-colour- theory/<br>
49
Source: http://www.d ailyinfographi c.com/logos- a-look-at- the-meaning- in-colors- infographic<br>
50
VISUAL DESIGN ELEMENTS
P. 123, MIL TEACHING GUIDE BY CHED FORM a figure having volume and thickness
an illusion of a 3-dimensional object can be implied with the use of light and shading
can be viewed from many angles<br>
51
FORM Source: http://visuala rtspdsf.blogs pot.com/201 2/04/form- or- volume.html FORM IS A SHAPE IN THREE DIMENSIONS SHAPE FORM<br>
52
FORM Source: http://visual artspdsf.blo gspot.com/ 2012/04/for m-or- volume.html<br>
53
FORMATIVE ASSESSMENT
RECITATION<br>
54
Source: http://www.gmanetwork.com/news/newstv/content/281695/news-tv-fan-favorite-i-juander-moves-
to-wednesdays-8-pm/story/<br>
55
Source: http://www. gmanetwork
.com/news/ newstv/cont ent/511650/ infographic- ligtas-lindol- tips/story/<br>
56
Source: http://entertai nment.abs- cbn.com/tv/sh ows/angprobi nsyano/photo s/albums/764 2516-ligtas- tips-paalala- ng- probinsyano<br>
57
Source: http://portal.d oh.gov.ph/con tent/how- wash-hands- properly.html<br>
58
Source: https://thebeatdfw.com/2940220/bruno-mars-24k-magic-world-tour-2017-enter-to-win/<br>
59
Source: http://opinion.inquirer.net/106769/editorial-cartoon-august-31-2017<br>
60
Source: http://www. sshs.edu.ph
/<br>
61
PRINCIPLES OF VISUAL DESIGN VISUAL DESIGN ELEMENTS
P.123 MIL TEACHING GUIDE BY CHED
THE BUILDING BLOCKS OF VISUAL DESIGN BY TEO SIANG
https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design<br>
62
CONSISTENCY It is necessary to have consistency in margins, typestyle, and colors especially in documents or slides that re more than one page. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
63
CENTER OF INTEREST An area that first attracts the attention in a composition.<br>
64
BALANCE A feeling of visual equality in shape, form, value, color, etc. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
65
HARMONY Brings together a composition with similar units. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
66
CONTRAST Offers some change in value creating a visual discord in a composition. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
67
DIRECTIONAL MOVEMENT A visual flow through the composition. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
68
RHYTHM A movement in which some elements recur regularly. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
69
Perspective Acreated through the arrangement of two-dimensional space to look like thet appear in real life. VISUAL DESIGN PRINCIPLE
P. 123, MIL TEACHING GUIDE BY CHED<br>
70
REFERENCES Media and Information Literacy Curriculum Guide by DepEd
Media and Information Literacy Teaching Guide by CHED
Media and Information Literacy by Boots C. Liquigan, Diwa Learning Systems Inc.<br>
71
REFERENCES The Building Blocks of Visual Design by TEO SIANG
https://www.interaction-design.org/literature/article/the-building-blocks-of-visual-design
Digital Image File Types Explained
http://users.wfu.edu/matthews/misc/graphics/formats/formats.html
Know Your Image Format
https://makeawebsitehub.com/image-formats-mega-cheat-sheets/<br>