Download as PDF, PPTX
More Related Content
Similar to Imaging and Design in Online Environment (Lecture).pdf
More from ReinnelPundanoEscose
Imaging and Design in Online Environment (Lecture).pdf
- 1. IMAGING AND DESIGNFOR THE ONLINE ENVIRONMENT Chapter III of Empowerment Technologies
- 2. 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 Imagingand Design For the Online Environment 02
- 3. What is an image Imagingand Design For the Online Environment
- 4. What is animage? Imagingand Design For the Online Environment 4 An Image is a representation of the external form of a person or thing in art.
- 5. What is animage? Imagingand Design For the Online Environment 5 • 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.
- 6. Definition of Graphics &layout Imaging and Design For the Online Environment
- 7. graphics Imagingand Design Forthe Online Environment 7 • 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.
- 8. Example of graphics ImagingandDesign For the Online Environment 8 Photographs
- 9. Example of graphics ImagingandDesign For the Online Environment 9 Drawing
- 10. Example of graphics ImagingandDesign For the Online Environment 10 Line Art
- 11. Example of graphics ImagingandDesign For the Online Environment 11 Graphs
- 12. Example of graphics ImagingandDesign For the Online Environment 12 Typography
- 13. Graphic design vslayout Imagingand Design For the Online Environment 13 • Design is a plan of creating an idea through a combination of texts, images, and other elements that are placed together artistically, • Layout is 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.
- 14. Basic principle of Graphics& layout Imaging and Design For the Online Environment
- 15. BALANCE Basic principles ofgraphics and layout 15 • 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
- 16. Symmetrical BALANCE Basic principlesof graphics and layout 16 • 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.
- 17. asymmetrical BALANCE Basic principlesof graphics and layout 17 • 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.
- 18. Symmetrical or asymmetrical Whichis which? Imaging and Design For the Online Environment
- 19.
- 20.
- 21.
- 22.
- 23. PROXIMITY Basic principles ofgraphics and layout 23 • The proximity principle in document design means that items placed nearby each other are related, while those that are far from each other are unrelated. • Common materials that uses proximity: brochure, flyers and newsletter.
- 24. PROXIMITY Basic principles ofgraphics and layout 24 a. When there are several elements, add white space. White space can also mean empty space. more visually appealing
- 25. PROXIMITY Basic principles ofgraphics and layout 25 b. Related items should be placed near to each other. more pleasing
- 26. White space Basic principlesof graphics and layout 26 • 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
- 27. UNDEFINED WHITE SPACE -Which is what you get when you open a new document.
- 28. https://theultralinx.com/.image/t_share/MTI5MDIzMzUyNDA3OTI3NDI3/shiftlogo-copy.jpg http://m.blog.hu/b1/b1foto/image/petadoption_feat.jpg ACTIVE WHITE SPACE -Occurs when an object is placed in undefined white space
- 29. alignment Basic principles ofgraphics and layout 29 • 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
- 30. alignment Basic principles ofgraphics and layout 30
- 31. alignment Basic principles ofgraphics and layout 31
- 32. repetition Basic principles ofgraphics and layout 32 • 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, colors. • Repetition aids to organize the information. • Guides readers and helps to make parts of the design become more united.
- 33.
- 34.
- 35.
- 36. repetition Basic principles ofgraphics and layout 36 •Infographics is an example that applied repetition to the design. It repeatedly used callouts with identical font size of inside texts.
- 37. infographics Basic principles ofgraphics and layout 37 • 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
- 38.
- 39.
- 40. INFOGRAPHIC EXAMPLE Basic principlesof graphics and layout 40 Infographic Video – is a visual representation of data and knowledge in the form of an online video.
- 41. color Basic principles ofgraphics and layout 41 • 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
- 42. Pure spectrum of colorsreferred to by the color names.
- 43. Tint lightens thecolor but it doesn’t make it brighter.
- 44. Tone reduce the intensityof any color.
- 45. Shade darkens thecolor, it remains the same hue only a darker version
- 46.
- 47.
- 49.
- 60.
- 61. contrast Basic principles ofgraphics and layout 61 • 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
- 62. contrast Basic principles ofgraphics and layout 62 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
- 63. contrast Basic principles ofgraphics and layout 63 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
- 64.
- 65.
- 66.
- 67. Principles of visualmessage Visual information & media Imaging and Design For the Online Environment
- 68. 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 68
- 69. Purpose of visualinformation Basic principles of graphics and layout 69 •GAIN ATTENTION •CREATE MEANING •FACILITATE RETENTION
- 70.
- 71. The Power OfVisual Content BY DemandGen Report (2014) Source: https://www.demandgenreport.com/industry-topics/rich-media/2906-the-power-of-visual-content-infographic
- 72.
- 73. THE POWER OFVISUAL CONTENT MARKETING Source: http://springboardpr.ie/the-power-of-visual-content-marketing/
- 74. Online file formatsfor Images and text Imaging and Design For the Online Environment
- 75. File format Basic principlesof graphics and layout 75 • 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
- 76. File compression Basic principlesof graphics and layout 76 • 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.
- 78. JPEG Basic principles ofgraphics and layout 78 • 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).
- 79. gif Basic principles ofgraphics and layout 79 • 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.
- 80. png Basic principles ofgraphics and layout 80 • 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.
- 81. pdf Basic principles ofgraphics and layout 81 • 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.
- 82. doc Basic principles ofgraphics and layout 82 • 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.
- 83. Principles and basictechniques of Image manipulation Imaging and Design For the Online Environment
- 84. cropping Principles and basictechniques of image manipulation 84 1. Cropping. Cutting parts away to remove distracting or irrelevant elements.
- 85. COLOR BALANCE Principles andbasic techniques of image manipulation 85 2. Color Balance. The ambience and the tone of light of the picture (ex. Warm or cool light)
- 86. BRIGHTNESS AND CONTRAST Principlesand basic techniques of image manipulation 86 3. Brightness and Contrast. One of the most basic techniques in image editing, making the image darker or lighter.
- 87. FILTERS Principles and basictechniques of image manipulation 87 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.
- 88. CLONING Principles and basictechniques of image manipulation 88 5. Cloning. Copying or duplicating a part of an image.
- 89. Changing the background Principlesand basic techniques of image manipulation 89 6. Changing the Background. Adding background to make your image stand out.
- 90. Removing color Principles andbasic techniques of image manipulation 90 7. Removing the Color. Removing certain colors in your image or desaturating the color of the image.
- 91. Combining text, graphicsand color Principles and basic techniques of image manipulation 91 8. Combining Text, Graphics and Image. Adding multiple elements in your layout.
- 92. Basic image manipulation Principlesand basic techniques of image manipulation 92
- 93. It started with onepicture
- 99. Uploading, sharing andimage Hosting platforms Imaging and Design For the Online Environment
- 100. imgur Basic principles ofgraphics and layout 100 • 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
- 101. Google Photos Basic principlesof graphics and layout 101 • 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.
- 102. flickr Basic principles ofgraphics and layout 102 • One of the oldest image hosting sites. • Also offers editing features. • Album creation is available with a maximum storage of 1TB.
- 103. photobucket Basic principles ofgraphics and layout 103 • an image and video hosting website, web services suite, and online community dedicated to preserving and sharing the entire photo and video lifecycle.
- 104. imageshack Basic principles ofgraphics and layout 104 • 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
- 105. instagram Basic principles ofgraphics and layout 105 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.
- 106.