LESSON VI

IMAGING AND DESIGN

FOR ONLINE ENVIRONMENT
 TOPIC I

UNDERSTANDING VISUAL INFORMATION –

IMAGE AND GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

Entails the use of visual media in the form of

photographs, motion pictures, video
recordings, graphic arts, visual aids, and other
graphical representations.
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

IMAGE GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

IMAGE GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

IMAGE GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

IMAGE GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS

IMAGE GRAPHICS
TOPIC I: UNDERSTANDING VISUAL INFORMATION –IMAGE AND GRAPHICS
 TOPIC II

COMMON DIGITAL IMAGE

FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

DIGITAL IMAGE
• A digital image is a numeric representation,
normally binary, of a two-dimensional image.

• Depending on whether the image resolution is

fixed, it may be of vector or raster type.
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

DIGITAL IMAGE
• A digital image is a numeric representation,
normally binary, of a two-dimensional image.

• Depending on whether the image resolution is

fixed, it may be of vector or raster type.
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

IMAGE FILE FORMATS

• standardized means of organizing and
storing digital images.
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

Joint Photographic Experts Group

• .jpg or .jpeg

• JPEG files are images that have been compressed

to store a lot of information in a small-size file.

• Most digital cameras store photos in JPEG format

• JPEG files are usually used for photographs

on the web, because they create a small file that is easily
loaded on a web page and also looks good.
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

Portable Network Graphics

• .png

• Image file that supports transparency

• designed to work in online viewing applications

like web browsers

• Used for icons, graphics, logo

TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

Graphics Interchange Formats

• gif

• Image file that supports transparency

• provides image animation effects

• Used for simple diagrams, shapes

and cartoon style images
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS
TOPIC II: COMMON DIGITAL IMAGE FILE FORMATS

Tagged Image File Format

• tif

• the most common file type used in

photo software (such as Photoshop), as well as page
layout software (such as Quark and InDesign),

• Used for large printing of images because

it contains a lot of detailed image data.
 TOPIC III

VISUAL DESIGN
ELEMENTS
TOPIC III: VISUAL DESIGN ELEMENTS
TOPIC III: VISUAL DESIGN ELEMENTS

“Any product — from software products such

as websites and apps to hardware products
such as toasters and hairdryers — can be
broken down into fundamental elements of
visual design- these elements are the basic tools
that we visual designers use in our daily work”

as described by Alan Hashimoto, associate professor of Graphic Design and

Computer Art at Utah State University
TOPIC III: VISUAL DESIGN ELEMENTS
TOPIC III: VISUAL DESIGN ELEMENTS
TOPIC III: VISUAL DESIGN ELEMENTS
 TOPIC IV

BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

LAYOUTING (Computing)

• The process of calculating the position of

objects in space

• The process of planning and arranging visual

elements in a page or book
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

BOOK LAY OUT

TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

WEBSITE LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

BALANCE
-The visual weight of objects, texture, colors, and
spaces are evenly distributed on the screen.

-Parts of the design are equally distributed to create a

sense of stability.
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

EMPHASIS
- Points of attention in a design.
- The feature in a design that attracts one’s eye.
- The focal point.
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

MOVEMENT
Visual elements guide the
viewer’s eyes around the screen
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

PATTERN, REPETITION,
AND RHYTHM
Repeated use of visual elements on an
image or layout to create unity.
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

PROPORTION
Visual elements create a sense of unity
when they relate well with one another.
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT

VARIETY
- Several designs are used to draw a viewer’s
attention.

- A combination of texts, images and other visual

elements to make output/layout more appealing .
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT
TOPIC IV: BASIC PRINCIPLES OF GRAPHCIS AND LAYOUT