Empowerment Technologies June 6, 2017
MODULE 3 Imaging and Design for the Online Environment
Performance Standard The Learners shall be able to independently apply the techniques of image manipulation and graphic design to create original or derivative ICT content from existing images, text and graphic elements for use in specific professional tracks.
Learning Competencies • 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 related to specific professional tracks.
ICT
Basic Principles of Graphics and Layout
Balance
ICT
Basic Principles of Graphics and Layout • Balance • The visual weight of objects, texture, colors and space is evenly distributed on the screen.
weights the elements evenly on either sides of the design
uses contrast to even out the flow of design
ICT
ICT
Tips on creating balance: 1. Colors have weight 2. Text / type must be legible 3. Lines : thin vs thick 4. Alignment of elements is important, whether it be text or images 5. Use proper justification (left, center or right) 6. Images should be big enough and must be in high resolution 7. Caption all photos possible, and DO NOT forget to add credits!
ICT
Basic Principles of Graphics and Layout • Proximity • The Principle of Proximity demands that related items be grouped together, be move physically close to each other so that they appear as one cohesive group rather than a bunch of unrelated bits.
ICT
Basic Principles of Graphics and Layout • Alignment • The Principle of Alignment states, "Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page." When items are aligned, the result is a stronger cohesive unit.
ICT
Basic Principles of Graphics and Layout • Repetition • The Principle of Repetition states, "Repeat some aspect of the design throughout the entire piece."
ICT
Basic Principles of Graphics and Layout • Contrast • The Principle of Contrast states, "If two items are not exactly the same, then make them different. Really different."
ICT
Basic Principles of Graphics and Layout • White Space • “White space is the art of nothing. White space is the absence of text and graphics.”
ICT
New designers always tend to forget the principle of white space. They often try to fill the entire page, but it is important to remember that in design, sometimes LESS is MORE!
ICT
Visual Message Design • Visual message design involves the appropriate considerations of visual perceptions when designing an instructional program.
Gain Gain attention attention
Create meaning
Facilitate retention
ICT
• The term “Infographics” is applied to information, data or knowledge that is presented in graphic visual form and that presents a clear message quickly and clearly. Infographics are used for the following reasons: • To communicate a message • To present a lot of data or information in a way that is compact and easy to comprehend • To analyze data in order to discover cause-and-effect relationships • To periodically monitor the route of certain parameters
ICT
Principles of Visual Message Design using Infographics
• Be Unique • One of the most important aspects of designing an effective infographic is to make it engaging and memorable with a unique twist on something that everyone can relate to.
ICT
Principles of Visual Message Design using Infographics
• Keep it Simple • Even though you want to shoot for interesting and unique, don’t throw in so much detail and extraneous information in a way that the audience is overwhelmed by everything going on in your infographic. .
ICT
Principles of Visual Message Design using Infographics
• Be Creative and Bold • For a truly impactful design that gets your message across, it’s important to make sure that your main message is bold and obvious.
ICT
Principles of Visual Message Design using Infographics
• Less is More • Keeping your text minimal will most likely produce more impact than a page full of words.
ICT
Principles of Visual Message Design using Infographics
• Sharing • The final and most important thing you want from an effective infographic is a simple way for people to share it with their friends.
ICT
Online File Formats for Images and Text
ICT
Image Manipulation Image Manipulation is an art that involves transforming or altering an image using different methods and techniques to achieve desired results.
ICT
Principles and Basic Techniques of Image Manipulation • Proportion • Proportion is probably one of the most important things a designer must possess if he wants to do image manipulations. This will make the image more realistic if the original design is extremely far-fetched.
Remember that images that are supposed to be far away have to be smaller than the ones that are closer.
ICT
Principles and Basic Techniques of Image Manipulation • Texture • Texture is the surface quality of the image. It adds to the depth of the image and blends all the images together evenly.
Remember if you do not have a background for your photo manipulation, you should use a texture that will match the mood you are trying to set in your art.
ICT
Principles and Basic Techniques of Image Manipulation • Color Blending • Not every image you use is going to match your background, your texture, or even other images. That is where color blending comes in. Colors like pink, white, yellow, and orange blend together easily. That is what a designer should look for at first; colors readily blend.
ICT
Principles and Basic Techniques of Image Manipulation • Emphasis on Detail • When creating a piece of art, set one area as the main focus. You want to draw the viewer’s eyes instantly to that spot. There are multiple techniques to achieve that. One way is to work on focusing attention on the most vibrant, colorful, or sharp area in the design.
ICT
Principles and Basic Techniques of Image Manipulation • Combining Multiple Images • Images are like missing puzzle pieces; without them, you can never fully complete the puzzle. So choose them carefully. You may need to look at multiple stock images before choosing the right ones for your composition.
ICT
Principles and Basic Techniques of Image Manipulation • Shadows • Shadows also make the image more realistic, because they emphasize the object effectively. It is realistic in a way that every item has a shadow if it needs one and every item is proportional to everything else.
ICT
Basic Image Manipulation using Offline or Open-source Software
ICT
Combining Text, Graphics, and Images • Text Overlaid on Image • When text overlays an image or a solid color background, there must be sufficient contrast between text and image to make the text readable with little effort.
ICT
Combining Text, Graphics, and Images • Text Wrapped Around Image • In the wrap-around, the text follows the shape of an image.
ICT
Combining Text, Graphics, and Images • Text and Image Intersect • The intersection of text and image can create a dynamic composition. The visual elements can intersect in several ways: • Placing text within an image, particularly a hollow vector graphic as shown in the light bulb above • Placing text behind an image so that it is partially obscured • Placing text so that it rests on the image, using the image as the baseline for the text
ICT
Combining Text, Graphics, and Images • Text and Image Aligned • You can achieve an orderly look by aligning visual elements with each other and placing them in close proximity.
ICT
Combining Text, Graphics, and Images • Text and Image in Repeating Shapes • In visual design, repetition creates unity.
ICT
Uploading, Sharing and Image Hosting Platforms • 10 of the best sites that offer free image hosting and make the process of uploading and sharing your images easier than ever.
ICT