Chapter III of Empowerment Technologiesaia) 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.WPwne mH 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THE HYBRID Chayal am Om Ohi FORMATIVE ASSESSMENTSource: http://graphicnovel-hybrid4,peugeot.comystart. htm!Source: http://graphicnavel-hybrid¢, peugeot.com/start.htm|a ee > aes =i MN ed ;urce: http://eraphicnovel-hybrid.peugeot.com/start-htrnlSource: http://graphienovel-hybrid4 peugeot.com/start-htrlSource: http://graphienovel-hybrid4 peugeot.com/start-htrml/start-htmlRea cicada 18 1. |. What i is she 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?Cefeyer eB ofall ole ut Oza a == ce(OEP eu eee Reem oar oct An Image is a representation of the external form of a person or thing in art.What is an image? Ree een OLs,EK eee * Images may be 2-dimensional, such as a photograph or sao 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. wr FedGraphics & Imaging and Design For the Online Environmi* 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.ree ea ee) PhotographsExample of graphics Drawing Cee ee essExample of graphics Imaging and Design For the Online EnvironmentExample of graphics 30 Ber Geo ‘Hs Bar Graphs itt 3 Tennrntint mae within * IN Stach Oa eae eg ns etter Graph GraphsExample of graphics (aera Eas akan! Typography29 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. *The process of planning and | iy = arranging graphic element in a ea page or template. A good layoutGraphics & layout Imaging and Design For the Online EnvironmiNCE alance means the equal * Halance mean Of wel ight! «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Symmetrical BALANCE Basic f graphics and layout +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 desi n, and the visual balance would evenly distributed. SYMMETRICasymmetrical BALANCE Basic f graphics and layout +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. ASYMMETRICSymmetrical or ENMU el UaLer Imaging and Design For the Online Environmhttps://paulinavera1992 files wordpress.com/2014/12/moc-2uckerman-on-composition-symmetry-13-3.jpg a eeittp:/fuhsdesignandphoto weebly.com/uploads/2/d/5/2/24527864/001Sdeaalna0733174c6d4227203415675_orig peDESIGN DEVELOP https://edn.idevie.com/wp-content/uploads/2015/03/29568_webdesign_02-1minus1-agency-hamepage- website-symmetry.jpgBiles ae ot LESS POP, MORE FIZZ. https://wwwavebdessignerdepot.com/cdn-origin/uploads/2011/07/151.jpe+ 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 tt | || y within elements. PROXIMITY LACK OF PROXIMITY * There, appears to be more room on 7 * Common materials that uses proximity: brochure, flyers and newsletter.eee eos a. When there are several elements, add white space. White space can also mean empty space. more visually appealingey Ting b. Related items should be placed near to each other. preeTest eed Learn to Dance! >,, ip Hor Salsa coo ae Bolara %e, Super (ot pate Rumba ‘eters Quickstep 109 dive Lane Moni sinh? Chacha KOPP cash Rosetta Dance Studio wart Learn to Dance! ae Et. pleasing Ravirot Qeiekutep Blames Clean With or without a partner? Prizest Froo Tea and Scones!+ White Space is the art of nothing . + Also known as the negative space. «It is the portion of a let age unmarked: margins, gutters an space between columns, lines of pe, graphics, figures, or objects rawn or depicted. * Two kinds of white space: + Undefined white space + Active white space GoogleStIFT hhttps://theultratine.com/.image/t_share/MTISMDIzizUyNDA3OTI3NDI3/shiftlogo-copy.jpgpetadoption_feat.ipgalignment Basic principles of graphics and layout *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alignment Basic principles of graphics and layoutalignment In Alignment @eee000200260680 Out of Alignmentrepetitio *The process of repeating elements throughout a design to give a unified! + 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. ecghttps://cdn.tutsplus.com/photo/uploads/legacy/418_patterns/4 jpg“ae donod ‘RADY TO GET SATOH? B odeakubeh 2 ' = as FEATUND SETCHES, Y Se i= https://dab1nmsivyntp.cloudfront.net/wp-content/uploads/2011/07/odosketch-hamepage.jpghtps://254-oniine.com/wp-cantent/uploads/repetition-principle-of-design-blog-post-pic jpgrepetition Basic principles of graphics and layout . Infographics is, an example. that DoY Who is Visitina Yc . applied repetition to the design. fou Know Who is Visiting Your Site’ It repeatedly used callouts with —_‘Mamastnewtemmusionysuonsialnisin identical font size of inside texts. 7 | 16 Q a Oinfographics + Information raphics or _infographics | are used. to represent information, statistical Gata, or knowledge in a raphical 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https://amyturnerdesign1 990-files.wordpress.com/2011/09/280092_147253505354118 14535294 5544174 303699_2469737_o./petop 10 salaries at http://4.bp.blogspot.com/- h2¥r24B_bbE/T9ee7LU_sQ\/AAAAAAAAAas/BHGzvhisFVM/s1600/horror. pngINFOGRAPHIC EXAMPLEINFOGRAPHIC EXAMPLE 58 THESMARTPHONE GOES CAMPING: TECHNOLOGY IN THe WLDINFOGRAPHIC EXAMPLE 59 CSCC does Infographic Video - is a visual representation of data and knowledge in the form of an online video. TED BUNOY sma cen 99-82 ‘Americals Most EVIL Serial Killer - Ted Bundy ad What is depression? «Helen M. Farell io Lye] i ; gh 4 I af 1ea * 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] Hue (pure color) Pure spectrum of colors referred to by the color names.Tint (add white) Tint lightens the color but it doesn’t make it ‘brighter.o Tone (add grey) -_ Tone reduce the intensity ‘of any color,Shade (add black) ‘Shade darkens the color, it remains the same hue only a darker versionPALETTEAnalogous fea_ Opatity me -.a TSMR es ry Usais FI E ter ooocar eal : f a nm HAPPINESS pal 5 Sa iad ARE | : A a eo PE SOCutts a eU a US DARKNESS esinfographic* 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(Bear Jroraptie design, colors do not need to be on opposite segments L made use of two clashing colors, can be hurting to eyes L made use of two contrasting | colors, pleasing to eyes82 1, BLACK/YELLOW 2. BLACK/WHITE 3, YELLOW/BLACK Lele 5. YELLOW/BLUE 6. GREEN/WHITE 7. BLUE/YELLOW 8. WHITE/GREENahh https://maddisondesigns.com/wp-content/uploads/2009/03/5-basic-principles-of-design jpghttps://254-online.com/wp-content/uploads/repetition-principle-of-design-blog-post-pic jpgAwwwu.webpages.uidaho.edu/ART370S15- ‘gray4661/Art%20370%20Web/Project202/Web%20F iles/images/contrast.pngVisual information & media Imaging and Design For the Online EnvironmiES ie ede ue ee od UNE INFORMATION ARUP NE Te) 7A EXAMPLES OF VISUAL MEDIA. * Photography * Video * Screenshots * Infographics * Data Visualization (charts and graphs) * Comic Strips/Cartoons * Memes * Visual Note-TakingaU es\eMOlMY SIU T-lM NNO TION) *GAIN ATTENTION *CREATE MEANING “FACILITATE RETENTIONWhat to do during an Register at Jwww.ShakeOutBC.ca Source: http: //wwrw.comoxvalleyrd.ca/EN/meta/whats-new/news-archives/2015/practice-haw-to-drop-cover-and- hold-on-during-shakeout-be-day.htm!The Power Of Visual Content BY DemandGen Report (2014) Source: hn: derandgenre port. conv topcs/rich-meda/2506-the powerful conten naan$0 YOU'RE SAYING https://postcron com/en/blog/vi sual-content aU TU CAV TRUEST SL TI vst: 4 sotial-networks/Content with : 7 relevant images get A PERSO? os% more views 7 INGNESS ble) e) (Buse DIOR eB Ine Ko) information when paired 80% of with an image THE POWER OF VISUAL CONTENT MARKETING Source; http://springboardprie/the-power-of-visual-content-marketing/mages and Imaging and Design For the Online EnvironmiFile format +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 TEXT DOCK, POF IMAGE & GRAPHICS. JPEG, .GIF, PNG AUDIO WAV, MP3 VIDEO MP4, MPEG, .AVIFile compression 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 informati on,.from the image, but it usually 2 connie luce the file size as muctvas lossy compressioLower quality Higher qualityuu eo *JPEG stands for Joint Photographic Expert Group * Most common used format by Digital Camera and other apturing Device. *Most Common Format when saving pictures on the internet. * SIZE over QUALITY *Loss of data due to file compression (Lossy Compression).Cli 98 ESC ue cde *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.*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.Seer + PDF stands for Portable . —— SS Sr Document File *It is optimized in smaller file size without losing the file quality. Empowerment *Can be viewed using its Tepngtomee Reader or through Web Teacher's Gude Browsers.+ 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.Imaging and Design For the Online EnvironmiGe seed seas cM Sad clas 1. Cropping. Cutting parts away to remove distracting or irrelevant elements.COLOR BALANCE ut 2. Color Balance. The ambience and the tone of light of the picture (ex. Warm or cool light)3. Brightness and Contrast. One of the most basic techniques in image editing, making the image darker or lighter. aeDe eee a Scot 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.(eRe) Ne) Ge aia 5. Cloning. Copying or duplicating a part of an image.Changing the back 6. Changing the Background. Adding background to make your image stand out.aired 7. Removing the Color. Removing certain colors in your image or desaturating the color of the image.8. Combining Text, Graphics and Image. Adding multiple elements in your layout.Basic image manipulationIt started with one pictureHosting platforms Imaging and Design For the Online Environmimgur ESC secu kod + 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 imgur+ 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. Google Photos*One of the oldest image flickr + Also offers editing features. - Album creation is available with a maximum storage of 1TB.* an image and video hosting website, web services suite, and online = community dedicated to preserving and sharing the entire photo and video lifecycle. photobucket* Offers unlimited storage space as ling as it is less than 25mb. *Allows you to create albums, make tags and set &€ ImageShack your own privacy setting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 platiorms such as Facebook, witter, Tumblr and Flickr. The service was acquired by Facebook last April 2012. It has an estimated 100 million monthly visitors. ‘e Fast beautiful’ g photo sharingTHANK YOU FOR LISTENING