Imaging & Design for Online Environment

Imaging & design For online environment I can: Evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design. (CS_ICT11/12-ICTPT-Ie-f-7 ) Use image manipulation techniques on existing images to change or enhance their current state...

Imaging & design For online environment I can: Evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design. (CS_ICT11/12-ICTPT-Ie-f-7 ) Use image manipulation techniques on existing images to change or enhance their current state to communicate a message for a specific purpose. (CS_ICT11/12-ICTPT-Ie-f-8); Create an original or derivative ICT content to effectively communicate a visual message in an online environment related to specific professional tracks. (CS_ICT11/12-ICTPT-Ig-h- 9) Principles of graphics & design balance It describes the placement of elements of equal weight on the page. Three types of balance Symmetrical balance asymmetrical balance Radial balance movement It describes the flow of elements on the page. It is the path the viewer’s eye takes through the work of art, often to focal areas. Such movement can be directed along lines, edges, shape, and color within the work of art. unity The sense of oneness of the elements that creates balance and harmony. repetition It describes the consistent and balanced repetition of a design or element. proximity It describes the organization and relationship of the elements included in the design. 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. emphasis It is an area in the design that catches viewer’s attention. The area may appear different in size, color, texture or shape Principles of graphics & design Balance proximity movements contrast unity emphasis Prepetition elements of graphics & design lines Lines are defined by points moving in space. It can create a sense of movement or direction in your design. Line is can be smooth, rough, straight, curve, broken, thick or thin. shapes A shape is an enclosed space. The boundaries of which are defined by other elements of art like lines, colors, values or textures. Shapes can be used to create patterns and draw the viewer’s attention. direction Applying motion to create the visual illusion of movement. Use horizontal direction for calmness, stability and tranquility while vertical direction for emotions of balance, formality and alertness. size It is basically the relationship of the area occupied by one shape to that of another. Large elements means more significant than the small one. color It is the light redirected off objects. It is used to create curiosity and emotions to the viewer’s. elements of graphics & design lines Size shape color direction infographics The term “infographic” is a short term for information graphic, which refers to an image that combines information, storytelling, and perceptions that help the cause of an individual or an institution to communicate a message to the viewers.  Guidelines on how to create an infographic: 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. 4. Sources You must cite your sources ad to give credibility to your data. 5. Branding/ Shareability Your infographic must be creative and innovative. Image file formats Jpeg or jpg Joint Photographic Experts Group. It is the most popular image format used on the web This format applies a “lossy” compression method to image files, which means that a huge numbers of pixels are lost or discarded in storing the image. Jpeg or jpg  Jpeg or jpg BEST USES STILL IMAGES REAL WORLD IMAGES LIKE COMPLEX COLORING SHADING OF PHOTOS LIGHT AND DARK 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. TIFF 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.  GIF BEST USES WEB GRAPHICS SMALL ICONS ANIMATION CARTOONS PNG Portable Network Graphic supports full-color images and used for photographic images. However the resulting file is much larger than lossy JPEG compression. PNG does best with line art, text, and logo.  PNG BEST USES LOGO LINE ART PHOTOGRAPHY Principles and basic techniques Of image manipulation 1. cropping It is the process of removing unwanted parts if the image focusing only on the subject. 2. Color balance In any image-manipulating program, this command will allow you to make changes in the mixture of colors in an image. 3. Brightness and contrast This command is the most basic technique when adjusting the image tone (highlights, shadows, and midtones). 4. Compression and resizing Image resizing means you're going to shorten the resolution of the image. And Image compression is lowering the file size of the image without compromising the resolution. 5. Color blending Use the different special effects buttons available in the different image editing software. You can combine colors and commands that will give you a more dynamic image result. 6. Combining multiple images Compositions must be planned and conceptualized first so that you will be able to render the best image and message possible. Online graphic software