Imaging and Design for the Online Environment.pptx

About Imaging and Design for Online Environment

1. IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT 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 related to specific professional tracks. Imaging and Design For the Online Environment 01

3. Topic outline Basic principles of graphics and layout Principles of visual message design using infographics. Online file formats for images and text Principles and basic techniques of image manipulation. Basic image manipulation using offline or open source software. Combining text, graphics, and images. Uploading, sharing, and image hosting platforms Imaging and Design For the Online Environment 02

4. Visual Storytelling THE HYBRID GRAPHIC NOVEL FORMATIVE ASSESSMENT

5. FORMATIVE ASSESSMENT Imaging and Design For the Online Environment Write the story of the graphic novel in a ¼ sheet of paper. You are not allowed to talk to your classmates. (5 minutes) 17

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. Source: http://graphicnovel-hybrid4.peugeot.com/start.html

18. FORMATIVE ASSESSMENT Imaging and Design For the Online Environment 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? 18

19. What is an image Imaging and Design For the Online Environment

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

21. What is an image? Imaging and Design For the Online Environment 21 Images may be: 2-dimensional, e.g. a photograph or screen display, or 3-dimensional, e.g a statue or hologram.

22. What is an image? Imaging and Design For the Online Environment 22 Images may be: They may be captured by optical devices – e.g cameras, mirrors, lenses, telescopes, microscopes, etc. and natural objects and phenomena, such as the human eye or water.

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

24. graphics Imaging and Design For the Online Environment 24 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.

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

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

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

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

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

30. graphics Imaging and Design For the Online Environment 30 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.

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

32. BALANCE Basic principles of graphics and layout 32 Balance means the equal distribution of weight. In layout, visual weight is determined by the darkness or lightness, thickness of lines, and size.

33. BALANCE Basic principles of graphics and layout 33 Balance is crucial to the success of design . There are two kinds of balance: Symmetrical Balance Asymmetrical Balance

34. Symmetrical BALANCE Basic principles of graphics and layout 34 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.

35. asymmetrical BALANCE Basic principles of graphics and layout 35 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.

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

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

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

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

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

41. PROXIMITY Basic principles of graphics and layout 41 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.

42. PROXIMITY Basic principles of graphics and layout 42 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.

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

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

45. White space Basic principles of graphics and layout 45 White Space is the art of nothing . Also known as the negative space.

46. White space Basic principles of graphics and layout 46 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

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

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

49. alignment Basic principles of graphics and layout 49 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

50. alignment Basic principles of graphics and layout 50

51. alignment Basic principles of graphics and layout 51

52. repetition Basic principles of graphics and layout 52 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 , lines , colours .

53. repetition Basic principles of graphics and layout 53 Repetition aids to organize the information . Guides readers and helps to make parts of the design become more united.

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

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

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

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

58. infographics Basic principles of graphics and layout 58 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.

59. infographics Basic principles of graphics and layout 59 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

60. https://amyturnerdesign1990.files.wordpress.com/2011/09/280092_147253505354118_145352945544174_303699_2469737_o.jpg

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

62. INFOGRAPHIC EXAMPLE Basic principles of graphics and layout 62

63. INFOGRAPHIC EXAMPLE Basic principles of graphics and layout 63

64. INFOGRAPHIC EXAMPLE Basic principles of graphics and layout 64

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

66. color Basic principles of graphics and layout 66 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 C O L O R

67. color Basic principles of graphics and layout 67 Color Theory the study of how colors make people feel and their effects on a design. COLOR VS HUE COLOR C O L O R

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

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

70. Tone reduce the intensity of any color.

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

72. HUE WHITE BLACK GRAY TONE TINT SHADE

73. TONE HUE SHADE TINT PALETTE

74. ANALOGOUS COMPLEMENTARY TRIADIC

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

76. contrast Basic principles of graphics and layout 87 Contrast is the divergence of opposing elements (opposite colours on the colour wheel, or value light / dark, or direction – horizontal / vertical).

77. contrast Basic principles of graphics and layout 88 Contrast allows us to emphasize or highlight key elements in your design. Contrast can be applied through the following: Color Size Shape

78. contrast Basic principles of graphics and layout 89 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

79. contrast Basic principles of graphics and layout 90 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

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

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

82. ACTIVITY 2: INFOGRAPHICS Make an infographic of the topic “Challenges of Middle and Late Adolescence”. Make sure that balance, proximity, alignment, and repetition, color and contrast will be observed. Post it in your social media account, the number of heart reaction will be counted based from the rubrics given.

83. Rubrics in Rating Infographics