Lesson 7: Imaging and Design for the Environment - Ilocos Norte National High School

IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT EMPOWERMENT TECHNOLOGIES Ilocos Norte National High School  I CAN ❑ I can evaluate existing websites and online resources based on the principles of layout, graphic, and visual mes...

IMAGING AND DESIGN FOR THE ONLINE ENVIRONMENT EMPOWERMENT TECHNOLOGIES Ilocos Norte National High School  I CAN ❑ I can evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design. ❑ I can use image manipulation techniques on existing images to change or enhance their current state to communicate a message for a specific purpose. 2 *Information & Images taken from various sites on the internet and is under OER Commons. Image vs. Graphics  WHAT IS AN IMAGE? An Image is a representation of the external form of a person or thing. 4 *Information & Images taken from various sites on the internet and is under OER Commons.  WHAT IS AN IMAGE? 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. 5 *Information & Images taken from various sites on the internet and is under OER Commons.  GRAPHICS: Graphics – are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate, or entertain 6 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Photograph ❑ Drawing s s 7 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Line Art ❑ Graph s 8 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Typograph ❑ Number y s 9 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Symbols ❑ Geometric Designs 10 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Maps ❑ Computer Graphics 11 *Information & Images taken from various sites on the internet and is under OER Commons.  EXAMPLES OF GRAPHICS: ❑ Engineering drawings, or other images 12 *Information & Images taken from various sites on the internet and is under OER Commons. 1 IMAGE FORMAT Different types of image format on the computer. 12  ONLINE IMAGE FILE FORMAT 1. Joint Photographic Experts Group (JPEG) – does not support transparency and animation (.jpeg or jpg) 1 *Information & Images taken from various sites on the internet and is under OER Commons. 4  ONLINE IMAGE FILE FORMAT 2. Graphics Interchange Format (GIF) – supports transparency and animation (.gif) 1 *Information & Images taken from various sites on the internet and is under OER Commons. 5  ONLINE IMAGE FILE FORMAT 3. Portable Networks Graphics (PNG) – supports transparency but not in animation (.png) 1 *Information & Images taken from various sites on the internet and is under OER Commons. 6 2 LAYOUT Definition and Principles of Layout & Graphics. 16  LAYOUT Layout – is part of graphic design that deals in the arrangement of visual elements on a page. 17 *Information & Images taken from various sites on the internet and is under OER Commons.  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 1. Balance. The visual weight of objects, texture, colors, and space is evenly distributed on the screen. dm | DesignMantic 1 *Information & Images taken from various sites on the internet and is under OER Commons. 9  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 2. Emphasis. An area in the design that may appear different in size, texture, shape or color to attract the viewer’s attention. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 0  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 3. Movement. Visual elements guide the viewer’s eyes around the screen. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 1  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 4. Pattern. Builds course. It builds familiarity and organizes design for trouble-free viewing. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 2  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 5. Repetition. makes design aware. It brings consistency and flow to the design. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 3  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 6. Proportion. Conveys stability. It involves scaling of various elements to create a coherent design. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 4  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 7. Harmony. Brings elements closer. It utilizes familiar traits of design elements and puts them into focus. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 5  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 8. Contrast. Addresses conflict. It highlights the difference and puts an emphasis to what is important dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 6  BASIC PRINCIPLES OF GRAPHICS AND LAYOUT: 9. Variety. Reaps attention. It adds flavor to the design, making it more interesting and engaging. dm | DesignMantic 2 *Information & Images taken from various sites on the internet and is under OER Commons. 7 3 INFOGRAPHICS Let’s start with the first set of slides 27  INFOGRAPHICS 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. 29 *Information & Images taken from various sites on the internet and is under OER Commons.  5 PRINCIPLES IN MAKING AN EFFECTIVE INFOGRAPHIC DESIGN: 1. Be Unique It Simple 2.Make 3.Be Creative and Bold 4.Less is More 5.The Importance of Getting it Across 30 *Information & Images taken from various sites on the internet and is under OER Commons.  INFOGRAPHIC EXAMPLE 31 *Information & Images taken from various sites on the internet and is under OER Commons.  INFOGRAPHIC EXAMPLE 32 *Information & Images taken from various sites on the internet and is under OER Commons.  INFOGRAPHIC EXAMPLE 33 *Information & Images taken from various sites on the internet and is under OER Commons.  INFOGRAPHIC VIDEO Infographic Video – is a visual representation of data and knowledge in the form of an online video. 34 *Information & Images taken from various sites on the internet and is under OER Commons.  INFOGRAPHIC VIDEO EXAMPLE https://www.youtube.com/watch?v=YqQx75OPRa0 3 *Information & Images taken from various sites on the internet and is under OER Commons. 5  INFOGRAPHIC VIDEO EXAMPLE https://goo.gl/srcHyh 3 *Information & Images taken from various sites on the internet and is under OER Commons. 6 4 IMAGE PRINCIPLES, TECNIQUES & HOSTING Image manipulation 36 techniques, principles and  3 IMAGE MANIPULATION PRINCIPLES 1. Choose the right file format. Try to make a real- life photograph into GIF to see the difference between PNG, GIF, and JPEG. Knowing the purpose is the key to finding out the best file format. 38 *Information & Images taken from various sites on the internet and is under OER Commons.  3 IMAGE MANIPULATION PRINCIPLES 2. Choose the right image size. A camera with 12 megapixels constitutes to a bigger image size. Monitors have a resolution limit, so even if you have a million megapixels, it will not display everything. 39 *Information & Images taken from various sites on the internet and is under OER Commons.  3 IMAGE MANIPULATION PRINCIPLES 3. Caption it. Remember to put a caption on images whenever possible. If it is not related to the web page, then remove it. 40 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 1. Cropping. Cutting parts away to remove distracting or irrelevant elements. 41 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 2. Color Balance. The ambience and the tone of light of the picture (ex. Warm or cool light) 42 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 3. Brightness and Contrast. One of the most basic techniques in image editing, making the image darker or lighter. 43 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 4. Compression and Resizing. The higher the quality and the larger the photo is, the bigger the file size of the picture is. 44 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 5. 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. 45 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 6. Cloning. Copying or duplicating a part of an image. 46 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 7. Changing the Background. Adding background to make your image stand out. 47 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 8. Removing the Color. Removing certain colors in your image or desaturating the color of the image. 48 *Information & Images taken from various sites on the internet and is under OER Commons.  9 IMAGE MANIPULATION TECHNIQUES 9. Combining Text, Graphics and Image. Adding multiple elements in your layout. 49 *Information & Images taken from various sites on the internet and is under OER Commons.  IMAGE HOSTING WEBSITES: ❑ Google+ ❑ Amazon Prime Photos Photos ❑ Flickr ❑ DropBox ❑ Smugmug ❑ Chevereto ❑ Imgur ❑ Imageshack ❑ 500px ❑ Photobucket 50 *Information & Images taken from various sites on the internet and is under OER Commons.  ▰ 1. Information and Communication Technology Effects in Philippines ▰ 2. Online Safety, Security, Ethics and Etiquette ▰ 3. Microsoft Office (Word, PowerPoint, Excel) ▰ 4. Creative Commons Rights / Copyright Law 51 ▰ 5. Google Tools *Information & Images taken from various sites on the internet and is under OER Commons.