Scribd
Upload
4 views

EMTECH

Uploaded by

rrhmnq68h5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

EMTECH

Uploaded by

rrhmnq68h5
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 60

LESSON 4

IMAGING AND
DESIGN FOR THE
ONLINE
ENVIRONMENT
Learning Target

• I can create a
foundation of
understanding in
online file formats for
images & text;
Learning Target
• I can use image
manipulation techniques
on existing images to
change or enhance their
current state to
communicate a message
for a specific purpose;
Learning Target

• create an original or
derivative ICT content to
effectively communicate
a visual message in an
online environment.
Online File Formats for Images & Text
FILE FORMAT is a
standard way that
information is encoded for
storage in a computer file.
It specifies how bits are
used to encode
information in a digital
storage medium.
Online File Formats for Images & Text

Raster file formats


- made up of a set grid of
dots called pixels where
each pixel is assigned a
color. raster images are
resolution dependent
Online File Formats for Images & Text

Vector file formats


- are digital artwork in which
points, lines and curves are
calculated by the computer.
vector images are resolution
independent
Image File
Formats
.jpeg format

“Joint Photographic Experts


Group”
Good in compression
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 animated
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
PDF format
“Portable Document
Format”
display documents and
graphics correctly,
have powerful vector
graphics foundation but can
also display everything
Text File
Format
Document File
“DOC” was designated as
Microsoft Word's primary
format in 1983.
DOC file format was
replaced by the .DOCX file
format with the release of
Microsoft Word 2007.
Principles and
Basic
Techniques of
Image
Manipulation
Principles and Basic Techniques of
Image Manipulation

 Cropping
 Color Balance
 Brightness and Contrast
 Compression and Resizing
 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)
Google Photos

 The most used image


app/host
 Back up feature
Flickr

 One of the oldest and well


known image host
 Storage space 1 TB
Photobucket

 Original quality
 GIF pictures, 2Gb max
storage space
Imageshack

 Unlimited storage space


 Less than 25mb
DropBox
 Free storage cloud
 Links for sharing
 Offers offline viewing
 2GB max storage,
 16GB when you invite
friends
Basic
Principles of
Graphic
Layout
Basic Principles of Graphics Layout
 Balance
 Proximity
 Alignment
 Repetition
 Contrast
 White Space
1. BALANCE

Equal distribution of weight


Visual weight:
Darkness & lightness
Thickness of line & size
Types of
Balance
Symmetrical Balance

The visual weight is distributed


evenly, either vertically or
horizontally. You can draw a line
straight through the middle of the
design, and the visual balance
would be evenly distributed.
Symmetrical Balance

Symmetrical Balance –L –R, B –U


Asymmetrical Balance

Colors, shapes, size, textures,


value can be used as balancing
elements
Asymmetrical Balance

Asymmetrical Balance
2 Types of 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

Created by using
harmonious similarity
of design elements in
different parts of the
work so that the parts
relate to each other.
4. Proximity

Is simply the
process of
ensuring related
design elements
are placed
together.
Proximity
5. Repetition

The process of
repeating
elements
throughout a
design to give a
unified look.
6. Alignment

Every item should have a visual


connection with something else
on the page.
Two basic kinds of alignment:
Edge and Center.
6. Alignment (EDGE)
Edge alignment determines the
placement of elements in
relation to the edge of the page
or canvas.
6. Alignment (CENTER)
Center alignment
aligns all the elements
so that an invisible,
central line on the
page will always be in
the center of the
elements.
7. Contrast

“If two items are not the same,


make them really different
Color, font, line, thickness,
shapes, sizes
Allows emphasis on key
elements
7. Contrast
White Space

“White space is the art of


nothing. White space is the
absence of text and graphics”

Negative Space
Infographics

Also known
as data
visualization.
Infographics

It makes the data


easily understood at
a glance and quickly
communicates a
message to simplify
presentation of large
amount of data.
The following websites will help you
create free infographic

1. http://piktochart.com/
2. https://
www.canva.com/creat/infographics/
3. https://venngage.com/
4. https://infogr.am/

You might also like