Chapter 3
IMAGING AND DESIGN FOR
THE ONLINE
ENVIRONMENT
Learning Target
• I can identify the principles
of graphic designs and use
it to evaluate existing
website and make my own
as well;
Learning Target
• I can examine infographics
and create my own efficient
infographic;
Learning Target
• I can identify the basic
principles and apply
manipulation techniques;
Learning Target
• I can define the properties of
images and texts effectively;
Basic Principles of Graphics Layout
Balance
Movement
Unity
Repetition
Proximity
Contrast
White Space
1. BALANCE
Equal distribution of weight
Darkness & lightness
Thickness of line & size
Types of
Balance
Symmetrical Balance
Symmetrical Balance –L –R, A –U
Asymmetrical Balance
Colors, shapes, size, textures,
value can be used as balancing
elements
Asymmetrical Balance
Asymmetrical Balance
Radial Balance
Type of balance based on a circle
with its design extending
from center.
2. Movement
Direct a viewer's eye
along a path through
the artwork, and/or to
show movement,
action and direction.
3. Unity
It is the sense of
oneness of the
elements that creates
balance and
harmony.
4.Repetition
Repeat some aspect of designs
5. Proximity
It describes the organization
and relationship of elements
included in the design
Proximity
6. Contrast
“If two items are not the same,
make them really different
Color, font, line, thickness,
shapes, sizes
Contrast
7. White Space
“White space is the art of nothing.
White space is the absence of text and
graphics”
Negative Space
Infographics
It makes the data
easily understood
Also known at
a glance and quickly
as data
communicates a
visualization.
message to simplify
presentation of
large amount of
data.
Guidelines on how to create an infographic:
1. Thesis/Story
2. Data
3. Simplicity
4. Sources
5. Branding/Shareability
The following websites will help you
create free infographic:
1. http://piktochart.com/
2. https://
www.canva.com/create/infographics/
3. https://venngage.com/
4. https://infogr.am/
Image File
Formats
File Format
File format – a standard process that
data is encoded for storage in a
computer
.jpeg format
“Joint Photographic Experts
Group”
Used when small size is more
important than the maximum
quality of image.
.jpeg format
.gif format
“Graphic Interchange Format”
Fewer color, preserve transparency
and animation
Uses basic form of file compression.
.gif format
.bmp format
Bitmap image or device
independent bitmap (DIB)
Used in MS Windows OS
Also called as Raster Image
Uncompressed file.
.bmp format
.tiff format
"Tagged Image File Format"
Created by Aldus Corporation for
DTP but by year 2009 it was
transferred to Adobe Systems.
Considered as high-quality image
file format.
.tiff format
.png format
“Portable Network Graphics”
24-bit images & generate background
transparency
Best with line art, text, and logos.
.png format
Principles and
Basic Techniques
of
Image Manipulation
Basic Principles of Image Manipulation
Cropping
Color Balance
Brightness and Contrast
Compression and Resizing
Color Blending
Combining Multiple Images
Cropping
Color Balance
Brightness and Contrast
Compression
COMPRESSION- removing or
grouping together certain parts of an
image file in order to reduce its size.
Resizing
RESIZING- changing the height,
size or width of (an image, window,
etc.)
Color Blending
Combining Multiple Images
Online
Graphics
Software
Websites that you can try:
Picasa
Fotor
Pixlr
Picasa
Fotor
Pixlr
Other image editing suite that can be
downloaded for free:
1. Photoscape
2. Serif Photoplus Starter edition
3. GIMP
4. Paint.Net
Image Hosting
Site
Imgur
Free hosting site
Doesn’t required own account
Share through unique URL
Max file is 20 mb (non
animated)
200 mb (animated)
Flickr
One of the oldest and well
known image host
Storage space 1 TB
Photobucket
Original quality
GIF pictures, 2Gb max
storage space
SlickPic
Offers professional editing
of images.
Unlimited upload and store
Zenfolio
Allow user to create an
online image website for
their image.
