Downloaded 840 times
Uploaded byAngelito Quiambao
Imaging and Design for Online Environment
The document discusses principles of imaging and design for online environments. It covers topics like basic principles of graphics and layout, including balance, proximity, alignment, repetition, color theory, and contrast. It also discusses visual message design using infographics and basic image manipulation techniques. Learning objectives include evaluating websites based on design principles, using image manipulation to enhance messages, and creating online content that effectively communicates visual messages.
More Related Content
![[EMPOWERMENT TECHNOLOGIES] - ADVANCED WORD PROCESSING SKILLS](https://cdn.slidesharecdn.com/ss_thumbnails/lesson3-advancedwordprocessingskills2-211128024207-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Imaging and Design for Online Environment
Imaging and Design for Online Environment
- 1. IMAGING AND DESIGNFO ONLINE ENVIRONM Chapter III of Empowerment Technologies
- 2. Learning competencies The learnerswill 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. Basicprinciples 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 GRAPHICNOVEL FORMATIVE ASSESSMENT
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. FORMATIVE ASSESSMENT Imaging andDesign 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 eImagingand Design For the Online Environment
- 19. What is animage? 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 animage? 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 Imagingand Design For the Online Environment
- 22. graphics Imaging and DesignFor 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 Imagingand Design For the Online Environment 24 Photographs
- 24. Example of graphics Imagingand Design For the Online Environment 25 Drawing
- 25. Example of graphics Imagingand Design For the Online Environment 26 Line Art
- 26. Example of graphics Imagingand Design For the Online Environment 27 Graphs
- 27. Example of graphics Imagingand Design For the Online Environment 28 Typography
- 28. graphics Imaging and DesignFor 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 ofgraphics 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 principlesof 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 principlesof 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 iswhich? Imaging and Design For the Online Environment
- 34.
- 35.
- 36.
- 37.
- 38. PROXIMITY Basic principles ofgraphics 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 ofgraphics 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 ofgraphics and layout 41 b. Related items should be placed near to each other. more pleasing
- 41. White space Basic principlesof 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.
- 43.
- 44. alignment Basic principles ofgraphics 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 ofgraphics and layout 46
- 46. alignment Basic principles ofgraphics and layout 47
- 47. repetition Basic principles ofgraphics 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.
- 49.
- 50.
- 51. repetition Basic principles ofgraphics 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 ofgraphics 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.
- 54.
- 55. INFOGRAPHIC EXAMPLE Basic principlesof graphics and layout 56
- 56. INFOGRAPHIC EXAMPLE Basic principlesof graphics and layout 57
- 57. INFOGRAPHIC EXAMPLE Basic principlesof graphics and layout 58
- 58. INFOGRAPHIC EXAMPLE Basic principlesof 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 ofgraphics 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 ofcolors referred to by the color names.
- 61. Tint lightens thecolor but it doesn’t make it brighter.
- 62. Tone reduce theintensity of any color.
- 63. Shade darkens thecolor, it remains the same hue only a darker version
- 64.
- 65.
- 67.
- 78.
- 79. contrast Basic principles ofgraphics 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 ofgraphics 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 ofgraphics 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.
- 83.
- 84.
- 85. Principles of visual message Visualinformation & media Imaging and Design For the Online Environment
- 86. VISUAL INFORMATION VISUAL MEDIA EXAMPLES OFVISUAL 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 visualinformation Basic principles of graphics and layout 88 •GAIN ATTENTION •CREATE MEANING •FACILITATE RETENTION
- 88.
- 89. The Power OfVisual Content BY DemandGen Report (2014) Source: https://www.demandgenreport.com/industry-topics/rich-media/2906-the-power-of-visual-content-infographic
- 90.
- 91. THE POWER OFVISUAL CONTENT MARKETING Source: http://springboardpr.ie/the-power-of-visual-content-marketing/
- 92. Online file formatsfor Images and text Imaging and Design For the Online Environment
- 93. File format Basic principlesof 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 principlesof 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 ofgraphics 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 ofgraphics 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 ofgraphics 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 ofgraphics 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 ofgraphics 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 basictechniques of Image manipulation Imaging and Design For the Online Environment
- 102. cropping Principles and basictechniques of image manipulation 103 1. Cropping. Cutting parts away to remove distracting or irrelevant elements.
- 103. COLOR BALANCE Principles andbasic 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 Principlesand 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 basictechniques 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 basictechniques of image manipulation 107 5. Cloning. Copying or duplicating a part of an image.
- 107. Changing the background Principlesand basic techniques of image manipulation 108 6. Changing the Background. Adding background to make your image stand out.
- 108. Removing color Principles andbasic 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, graphicsand 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 Principlesand basic techniques of image manipulation 111
- 111. It started with onepicture
- 117. Uploading, sharing and image Hostingplatforms Imaging and Design For the Online Environment
- 118. imgur Basic principles ofgraphics 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 principlesof 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 ofgraphics 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 ofgraphics 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 ofgraphics 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 ofgraphics 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.
Editor's Notes
- #69 Analogous Colors that are adjacent to one another on the color wheel are analogous. Complementary Are opposites on the color wheel. This relationship will produce visual tension and “shock” Triadic Are three colors evenly spaced on the color wheel. One color dominates, the second supports and the third accents
- #70 Gradient A gradual change from one color to the another. Opacity Synonymous with non-transparency. The more transparent an image, the lower its opacity.
- #88 VISUAL DESIGN ELEMENTS P.123 MIL TEACHING GUIDE BY CHED 1. Visual media and information – materials, programs, applications and the like that teachers and students use to formulate new information to aid learning through the use, analysis, evaluation and production of visual images. 2. Types of visual media – photography, video, screenshots, infographics, data visualization (charts and graphs), comic strips/cartoons, memes, visual note-taking, etc (Give examples of each type and highlight special characteristics of a given type and its application). 3. Formally and informally produced visual media – visual media produced by formal organizations such as schools, government, and established media/publishing outfits are considered formally produced. Other visual media are considered informally produced. 4. Purpose of visual information – the primary purpose of visual information is to gain attention, create meaning, and facilitate retention. (Show at least one example for each purpose and ask learners their reactions or responses to each one).
- #89 VISUAL DESIGN ELEMENTS P.123 MIL TEACHING GUIDE BY CHED 1. Visual media and information – materials, programs, applications and the like that teachers and students use to formulate new information to aid learning through the use, analysis, evaluation and production of visual images. 2. Types of visual media – photography, video, screenshots, infographics, data visualization (charts and graphs), comic strips/cartoons, memes, visual note-taking, etc (Give examples of each type and highlight special characteristics of a given type and its application). 3. Formally and informally produced visual media – visual media produced by formal organizations such as schools, government, and established media/publishing outfits are considered formally produced. Other visual media are considered informally produced. 4. Purpose of visual information – the primary purpose of visual information is to gain attention, create meaning, and facilitate retention. (Show at least one example for each purpose and ask learners their reactions or responses to each one).
- #90 Purpose of visual information – the primary purpose of visual information is to gain attention, create meaning, and facilitate retention. How was visual used in the poster? Imagine the poster without visual. Which is more effective, with visual or none?
- #91 Discuss the following survey results about “The Power of Visual Content” by DemandGen Report (2014): a. Forty percent of people will respond better to visual information than plain text. b. Publishers who use infographics grow in traffic an average of 12% more than those who don’t. c. Eighty percent of what is seen is retained. d. Conversions increase by 86 percent when videos are used in a landing page. e. Twenty percent of words on a web page is read by the average user. f. Landing pages with videos are 40 times more shareable. Ask the learners what can be concluded about the importance of visual content based on the survey results. Present this infographic to the learners Ask learners whether they thought the infographic was a better way of presenting the results of the survey. The learners must be able to explain why they think so. Ask the learners if there are other ways of presenting the same information.
- #92 An Internet meme is a concept or idea that spreads "virally" from one person to another via the Internet. An Internet meme could be anything from an image to an email or video file; however, the most common meme is an image of a person or animal with a funny or witty caption. http://www.webopedia.com/TERM/I/internet_meme.html