IMAGING AND DESIGN FOR 

THE 

ONLINE ENVIRONMENT

Imaging and Design for Online Environment is an online graphics and layouts that taught me many effective things in order for me to use image design and its advantages. In this lesson you will learned the basic principles of graphics and layouts. It has balance, emphasis, movement, pattern, repetition and rhythm, proportions, and variety.

What is an image?

* An image is a picture that has been created or copied and stored in electronic form. An image can be described in terms of vector graphics or raster graphics. An image stored in raster form is sometimes called a bitmap. An image map is a file containing information that associates different locations on a specified image with hypertext links.

Examples of image file format:

*JPEG

*GIF

*PNG

*TIFF

What is graphics?

Are visual images or designs on some surface, such as a wall, canvas, screen, paper, or stone to inform, illustrate and entertain.

Examples of graphics:

*Photographs

*Drawings

*Graphs

*Typography

*Line art

Basic Principles of Imaging and Designing

1. Balance. The visual weight of objects, texture, colors, and space is evenly distributed on the screen.

2. Emphasis. An area in the design that may appear different in size, texture, shape or color to attract the viewer’s attention.

3. Movement. Visual elements guide the viewer’s eyes around the screen.

4. Pattern, Repetition, and Rhythm. These are the repeating visual element on an image or layout to create unity in the layout or image. Rhythm is achieved when visual elements create a sense of organized movement.

5.Proportion. Visual elements create a sense  of unity where they relate well with one another.

6. Variety. This uses several design elements to draw viewer’s attention.

What is an infographic?

A visual image such as a chart or diagram used to represent information or data.“A good infographic is worth a thousand words”

Examples of Infographics:

*Maps

*Charts

*Diagram

*Templates and etc.

Why use infographics?

Infographics are great for making complex information easy to digest. They can be helpful anytime you want to:

• Provide a quick overview of a topic
• Explain a complex process
• Display research findings or survey data
• Summarize a long blog post or report
• Compare and contrast multiple options
• Raise awareness about an issue or cause

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.

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

3. Caption it. Remember to put a caption on images whenever possible. If it is not related to the web page, then remove it.

By: Mark Jill Muring and Shiena Mae Rigor

 

shinrigor1621@gmail.com

muringmarkjillabm1@gmail.com