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