Empowerment Technologies Module: Imaging and Design (PDF)

11/12 ===== **Quarter 1 -- Module 7:** **Imaging and Design for the** **Online Environment** **Part I** What I Know -------------------------------- Choose the letter of the best answer. Write the chosen letter on a separate sheet of paper. 1. This is achieved when all p...

11/12 ===== **Quarter 1 -- Module 7:** **Imaging and Design for the** **Online Environment** **Part I** What I Know -------------------------------- Choose the letter of the best answer. Write the chosen letter on a separate sheet of paper. 1. This is achieved when all parts of a composition appear to have equal weight and is stable. a. contrast b. balance c. unity d. focal point 2. It is obtained by repeating colors and shapes---all parts of a design. e. repetition f. balance g. unity h. focal point 3. It creates the center of interest in a design. i. repetition j. balance k. unity l. emphasis 4. It is when lines, colors, or shapes are repeated over and over in a planned way. m. repetition n. balance o. unity p. emphasis 5. It is when it catches the viewer's attention. Usually the artist will make one area stand out by contrasting it with other areas. The area could be different in size, color, texture, shape, etc. q. repetition r. balance s. unity t. emphasis -------------- -- **Lesson 5** -------------- -- What's In --------- From the previous lesson, we've learned the three most commonly used application in Microsoft Office Suite, the Microsoft Word, Microsoft Excel, and Microsoft PowerPoint. In Microsoft Word, we discussed the Mail Merge as an automation tool that is helpful when sending mails to many recipients using a common template. We've learned that Mail Merge has two components, the main document, which contains the body of the letter and the data source which contains the list of names and addresses of the recipients. In Microsoft Excel, we discussed the different functions and formula that will help us in processing our data and in Microsoft PowerPoint, we've learned how to apply animation and inserting hyperlinks to our slide. What's New ------------------------------- Visit the online resource with the URL given below. This resource is about the Gestalt Principles which could also be useful in graphics design. ***https://careerfoundry.com/en/blog/ui-design/what-are-gestalt-principles/*** Read and understand all the 5 Gestalt Principles and then answer the question below. Write your answer on a separate sheet of paper. What Gestalt Principle/s is applied to the image below? Explain. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ What is It ---------- **Computer graphics** are visual representations of data made on a computer and is displayed on a computer screen or monitor. They can be a single image or series of images called video. They can be anything on computers such as photographs, drawings or movies that does not involve sound.  **Layout** is the arrangement of graphic elements on a page. An effective graphics and layout contribute to the efficiency of website. Hence, you must begin learning the basic principles of graphics and layout before creating your own graphic design which you can integrate on the online environment. ### Principles of Graphics and Layout Across disciplines, the following principles are followed to standardized image creation and manipulation using any graphics software. It will help you create layouts and design web pages compliant with protocols. 1. **Balance** -- It describes the placement of elements of equal weight on the page. The three types of balance are symmetrical, asymmetrical, and radial. 2. **Movement** -- It describes the flow of elements on the page. Visual elements guide the viewers' eyes around the page. 3. **Unity** -- the sense of oneness of the elements that creates balance and harmony. 4. **Repetition** -- It describes the consistent and balanced repetition of a design or element. 5. **Proximity** -- It describes the organization and relationship of the elements included in the design. 6. **Contrast** -- it is the combination of the opposing characteristics of an element like color, size, thickness, and among others. It allows emphasis on key elements. 7. **Emphasis** - An area in the design that catches viewer's attention. The area may appear different in size, color, texture or shape. ### Infographics *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. Infographics make complex data become more visually appealing to an average user. An infographic should have the following characteristics: 1. ***Thesis/Story.*** The subject and the main idea of your infographic must be clear. 2. ***Data**.* Data must be well-organized and supports the main idea. 3. ***Simplicity**.* (color, style, and illustrations). You must be able to create your own palette; your style must be able to attract readers so as not to make your infographic full of text. Do not use stock photos. 4. ***Sources**.* You must cite your sources so as to give credibility to your data. 5. ***Branding/Shareability**.* Your infographic must be creative and innovative. The following websites will help you create infographic: 1. *http://piktochart.com/* 2. *https://www.canva.com/create/infographics* 3. *https://venggage.com* 4. *https://infogr.am/* ### Image File Formats Since the introduction of graphics on the web., file formats also became an important aspect in the design stage. The most common file formats are JPEG, GIF, BMP, TIFF, and PNG. 1. **JPEG** -- Joint Photographic Experts Group. It is the most popular image format used on the web. JPEG are very 'lossy' files where much of the information about the image is lost from original state to keep the image file size small. JPEG files are used mostly by photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups because image quality and color fidelity is important in the field. 2. **GIF** -- Graphics Interchange Format. It is limited to the 8-bit palette with only 256 colors. GIF is best used for diagrams, cartoons, and logos which use few colors and is the chosen format for animation effects. 3. **PNG** -- Portable Network Graphic. This file format is best with line art, text, and logo. It is capable to display transparencies. 4. **TIFF --** Tagged Image File Format. It is considered as a high-quality image format, where all color and data information are stored. However, it produces a very large file size and take huge disk consumption. What's More ----------- ### Activity 1 Visit the following websites and select at least 3 websites. Evaluate each based on the principles of design discussed. Use a separate sheet of paper for your answer. 1. https://www.thebestdesigns.com/designs/ 2. http://www.verynicesites.com 3. http://bestwebgallery.com/ ### Activity 2 Promote your specific track/strand by making an infographic. In making your infographic you must log on to www.piktockart.com. Print your infographic in a short size bond paper or you may send it to your teacher thru messenger. You may use your Facebook or Gmail account or create your own Piktochart account. What I Have Learned ----------------------------------------- Answer the following questions. Use a separate sheet of paper for your answer. 1. What are the different principles of graphics and layout? 2. How does infographic beneficial in presenting data? 3. What are the different image file formats and when is the best time to use them? What I Can Do ------------- Answer the following questions. Provide a separate sheet of paper for your answer. 1. Having explored the different examples of infographic over the internet, what do you think are the limitations of using infographic to disseminate information? 2. Since most digital photos are publicly shared online, what do you think are the ways to protect your images from unauthorized copying?  Assessment --------------------------------- True or False: Write true if the statement is correct and False if it is incorrect. Use a separate sheet of paper for your answer. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_1. For image composition to be effective, it must have its elements in equal weight across the frame. ----------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------- \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_2. You can use any color combination when composing your design. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_3. Any sources can be included in your infographic. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_4. JPEG is considered to produce a high-quality image and does not remove any information from the image. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_5. It is best to use GIF format for cartoonish images. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_6. Asymmetrical is a type of visual balance in which two sides of a composition are different yet balanced. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_7. GIF is best to use when working with full color photographic images. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_8. If you want to insert animation effects on your presentation, you will look for a PNG format of an image. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_9. Balance is to even distribution; emphasis is to attracting. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_10. Piktochart makes a complex data become more visually appealing to the average user. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_11. Symmetrical, asymmetrical, and radial are types of contrast. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_12. An infographic should be simple. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_13. Colors are said to be contrasting when there is a large difference in lightness and darkness. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_14. Focal point is another way of saying center of interest. The center of interest is usually the most important part of a work of art. \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_15. The term emphasis may be used for an area that has contrasting sizes, shapes, colors or other distinctive feature to catch the viewer\'s attention. Additional Activities --------------------- Evaluate the following graphics based on the principles of graphics and layout. Use a separate sheet of paper for your answer.  *Image Source: https://www.behance.net/gallery/32878615/Adoption* *-Informational-Poster*