Lesson 6 – Imaging and Design for Online Environment

WHAT IS AN IMAGE?

An Image is a representation of the external form of a person or thing in art.

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.

WHAT IS A Graphics?

Graphics are visual images or designs on some surface, such as a wall, canvas,
screen, paper, or tone to inform, illustrate, or entertain.
Examples of Graphics

IMAGE FORMAT

Different types of ONLINE IMAGE FILE FORMAT on the computer.

1. Joint Photographic Experts Group (JPEG) – does not support transparency

and animation (.jpeg or jpg)

2. Graphics Interchange Format (GIF) – supports transparency and

animation (.gif)

3. Portable Networks Graphics (PNG) – supports transparency but not in

animation (.png)
WHAT IS A Layout?

Layout is part of graphic design that deals in the arrangement of visual elements
on a page.

BASIC PRINCIPLES OF GRAPHICS AND LAYOUT:

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. Builds course. It builds familiarity and organizes design for trouble-
free viewing.
5. Repetition. makes design aware. It brings consistency and flow to the
design.
6. Proportion. Conveys stability. It involves scaling of various elements to
create a coherent design.
7. Harmony. Brings elements closer. It utilizes familiar traits of design elements
and puts them into focus.
8. Contrast. Addresses conflict. It highlights the difference and puts an
emphasis to what is important
9. Variety. Reaps attention. It adds flavor to the design, making it more
interesting and engaging.
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.

5 PRINCIPLES IN MAKING AN EFFECTIVE INFOGRAPHIC DESIGN:

1. Be Unique
2. Make It Simple
3. Be Creative and Bold
4. Less is More
5. The Importance of Getting it Across

INFOGRAPHIC VIDEO

Infographic Video is a visual representation of data and knowledge in the form

of an online video.

IMAGE MANIPULATION TECHNIQUES, PRINCIPLES AND HOSTING SITES.

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.
9 IMAGE MANIPULATION TECHNIQUES

1. Cropping. Cutting parts away to remove distracting or irrelevant elements.

2. Color Balance. The ambience and the tone of light of the picture (ex.
Warm or cool light)
3. Brightness and Contrast. One of the most basic techniques in image
editing, making the image darker or lighter.

4. Compression and Resizing. The higher the quality and the larger the photo
is, the bigger the file size of the picture is.

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.
6. Cloning. Copying or duplicating a part of an image.

7. Changing the Background. Adding background to make your image

stand out

8. Removing the Color. Removing certain colors in your image or

desaturating the color of the image
9. Combining Text, Graphics and Image. Adding multiple elements in your
layout