Scribd
Upload
46 views

Imaging and Design For The Online Environment

The document discusses principles of graphic design for the online environment including balance, movement, unity, repetition, proximity, contrast, and white space. It also covers guidelines for creating effective infographics and defines common image file formats like JPEG, GIF, BMP, TIFF, and PNG. Basic image manipulation techniques such as cropping, color balance, brightness/contrast, compression, resizing, and combining images are outlined. Finally, it recommends several free online graphics software programs and image hosting websites.

Uploaded by

hihs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

Imaging and Design For The Online Environment

The document discusses principles of graphic design for the online environment including balance, movement, unity, repetition, proximity, contrast, and white space. It also covers guidelines for creating effective infographics and defines common image file formats like JPEG, GIF, BMP, TIFF, and PNG. Basic image manipulation techniques such as cropping, color balance, brightness/contrast, compression, resizing, and combining images are outlined. Finally, it recommends several free online graphics software programs and image hosting websites.

Uploaded by

hihs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 56

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.

You might also like