UNIT 7

Imaging and
Design for
Online
Environment
At the end of this lesson, the students
should be able to:
1. Understand the basic principles of graphics and
layout;

2. Understand the basic principles of visual design -

infographics;

3. Understand and use several text and image file

formats used on the web;

4. Easily manipulate images using a simple image

editor
TOPIC

BASIC PRINCIPLES OF
GRAPHICS &
LAYOUT
 TOPIC

• A Layout is the organization of preset items on a page, such as an image, text, and style. It determines the overall
appearance and interactions of the graphic elements in order to generate a fluid flow of message and eye
movement for optimum effectiveness or impact.
 TOPIC

•A graphic is a picture or visual representation of a thing. As a

result, computer graphics are essentially images shown on a
computer screen. Graphics are frequently compared with text,
which is made up of characters such as numbers and letters
rather than pictures.
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
The visual weight of objects, texture, colors, and space is evenly distributed on
BALANCE the screen.
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
An area in the design that may appear different in size, texture, shape or color
to attract the viewer’s attention. EMPHASIS
BASIC PRINCIPLES OF GRAPHICS & LAYOUT

MOVEMENT Visual elements guide the viewer’s eyes around the screen.
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
These are the repeating visual element on an image or layout to create unity in
the layout or image. PATTERN
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
PROPORTION Visual elements create a sense of unity where they relate well with one another.
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
This uses several design elements to draw a viewer’s attention. VARIETY
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
BASIC PRINCIPLES OF GRAPHICS & LAYOUT
TOPIC

PRINCIPLES OF VISUAL
DESIGN USING “
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.
PRINCIPLES OF VISUAL DESIGN USING INFOGRAPHICS

Refers to an outline that sometimes create a shape. Its texture can be thick or
LINE thin, may be vertical horizontal, diagonal, implied, actual or contour lines.

Refers to an object that stands out. Shape may also be geometrical or organic SHAPES

Refers to the lightness or darkness in a design. It refers to the changes

VALUE between black and white and all the tones in between

Refer to the volume or thickness of an object. The illusion of a 3D-object

created through the manipulation of light and shading FORM

The way a platform or a surface supposed to feel. Visual texture is the illusion of
TEXTURE the surfaces peaks and valleys resulting in a feeling of smoothness or roughness
in an object.

Is the element of art that involves light. It is produced when light waves strike
an object and are reflected into our eyes. It consists of three properties: hue, COLOR
intensity, and value.

Is a principle of art that refers to the arrangement of opposite elements (light vs.
CONTRAST dark colors, rough vs. smooth textures, large vs. small shapes, etc.)
PRINCIPLES OF VISUAL DESIGN USING INFOGRAPHICS
LINE
• Vertically
presented SHAPES
• Uses organic shapes

VALUE
• Dark background , light font
color TEXTURE
• Smooth and light
feeling

FORM
COLOR

CONTRAST
• Object and
text
TOPIC

ONLINE FORMAT FOR “

TEXT & IMAGES

“
The structure of a file that instructs a software how to display
its contents is referred to as its file format. Programs that
support a file format can provide an overview of the file but
may not be able to display all of its characteristics. Additionally,
in some programs, opening a file format that is not supported
may result in trash.

COMPUTER HOPE
ONLINE FORMAT FOR TEXT & IMAGES | TEXT FORMAT

Joint Photographic Experts Group”. It's a standard image format for

containing lossy and compressed image data. Despite the huge
reduction in file size

"Portable Network Graphic", is an image type that's commonly used

in web design to provide a transparent background and/or a semi-
transparent image.PNG are often used to design logos as the image
can be easily placed over a background of a picture, block of color or
pattern.

"Graphics Interchange Format" is a bitmap image format that was

developed by a team at the online services provider CompuServe led
GIF by American computer scientist Steve Wilhite on June 15, 1987.GIF
creator: It's pronounced "JIF"
ONLINE FORMAT FOR TEXT & IMAGES | DOCUMENT FORMAT

In computing, DOC or DOCX is a filename extension for word

processing documents, most commonly in the proprietary
Microsoft Word Binary File Format.

PDF stands for "portable document format". Essentially, the

format is used when you need to save files that cannot be
modified but still need to be easily shared and printed.

TXT. is a file extension for a text file, used by a variety of text

editors. Text is a human-readable sequence of characters and
the words they form that can be encoded into computer-
readable formats.
TOPIC

BASIC TECHNIQUES OF “
IMAGE MANIPULATION

“
Image manipulation is the process of making modifications to a
digital image in order to turn it into the desired image. Image
processing is used to make the modifications feasible. Image
manipulation is used to make fashion magazines and album
covers out of pictures. Currently, there are numerous software
applications ranging from professional applications to basic
imaging software.

YUNDLE
TECHNIQUES OF IMAGE MANIPULATION

Cropping: Enhance focus and composition Blurring: Enhance background images

https://www.canva.com/learn/image-enhancement/
TECHNIQUES OF IMAGE MANIPULATION

Saturation: Enhance or reduce color intensity Contrast: Enhance highlights and shadows

https://www.canva.com/learn/image-enhancement/
TECHNIQUES OF IMAGE MANIPULATION

Brightness: Enhance overall lighting Filters: Enhance and correct photos

https://www.canva.com/learn/image-enhancement/
TECHNIQUES OF IMAGE MANIPULATION

Arrangement: Enhance your layout with grids Frames: Enhance image shape and style

https://www.canva.com/learn/image-enhancement/
TECHNIQUES OF IMAGE MANIPULATION

Layering: Enhance images with overlays Enhance images with typography on top

https://www.canva.com/learn/image-enhancement/
ACKNOWLEDGEMENT
visit Canva website at https://www.canva.com/
N 6: IMAGING AND DESIGN FOR ONLINE ENVIRONMENT

n our asynchronous session

swer the following task in your canvas account:

ACCESS CODE: 102213