IMAGING AND DESIGN FOR ONLINE

Presented by:
Mishelle D. Batalla-Fernandez
Objectives:
• Evaluate existing websites and online resources based on
the principles of layout, graphic, and visual message design.
• Use image manipulation techniques on existing images to
change or enhance their current state to communicate a
message for a specific purpose
• Create an original or derivative ICT content to effectively
communicate a visual message in an online environment
related to specific professional track
SOURCES OF
PHOTOS AND
GRAPHICS
 Personal and Professional Photos

• are photos taken

by amateur or
professional
photographs
using a digital
camera.
 Scanned Images

•those that you

transfer form
printed photos
and graphics
using scanning
devices.
 Stock Photo Library
• are several
photographs and
created images that
are available for sale.
• They come on CD or
DVD format and
many of these are
royalty free
 Online Stock Photos

• are found in the

WWW. World Wide
Web is now
dominant source of
photos and graphics
because of the
widely available
choices.
ONLINE DIGITAL
FILE FORMAT
Proprietary Format
•Are owned and
controlled by individuals
or corporations and the
file format
specifications are not
available to the public.
 Open Formats
• are means and ways • these formats are also
for storing digital called free file formats
information that are and the specification
free, can be used by for these formats are
the public and are not usually sustained by a
encumbered by group of individuals or
copyrights or patents. organizations
 File Formats
• uses suffixes
that are added
to the end of a
filename , called
filename
extension.
• the file extension
is a means of
identifying the
format of the file,
with a period
before it after the
filename.
 CLASSIFICATION OF
DIGITAL FILE FORMATS
1. Uncompressed or Raw Format

is usually use for storing original

file format, it is a flexible form but
needs bigger memory to store
2. Lossless File Format

is a file format that was

compressed to replicate the
original quality but a t a reduce file
size. This type is ideal for storing
important files ( images, audio or
video)
3. Lossy File Format
is a file format that was
compressed as an
approximation of the original
file but is good enough. This file
has better compression rate
requiring the least memory.
Formative:

1. photos taken by amateur or

professional photographs using a
digital camera.
2. a file format that was
compressed as an approximation
of the original file but is good
3. Are owned and controlled by
individuals or corporations and
the file format specifications are
not available to the public.
4. uses suffixes that are added to
the end of a filename , called
filename extension
5-10 Examples of
File extensions.
IMAGE FILE FORMATS
IMAGE FILE FORMATS

Are means of storing and

organizing digital images,
photos, and illustrations

Image file formats are

1. Raster Image Files

 Raster image or bitmap

image is a means of
representing digital images
in bits of information for
storage, w/c translates into
 Pixel is the smallest
information of an image.
 Images using pixels are
usually represented in dots
or squares that are
arranged and added
 Raster image format is the
common formats you will
encounter in the internet
and with digital image
files, such as those coming
from digital cameras.
Most Common Types
of Raster Images
 .bmp
 Bitmap Image File is an image
file format developed and
used on Microsoft Windows
environment and stored in a
graphics file format called
 .gif
 Graphical Interchange Format
File– is an image file format
that is very popular on the
World Wide Web because of
its portability and support for
 .jpg
 JPEG Image file – standardized
by the Joint Photographic
Experts Group(JPEG) is a
common method for
photographic images as well
 .png
 Portable Network Graphic
(PNG)- is a free, open source
bitmap images format made
to improve on GIF which has
small file but can handle more
 .psd
 Photoshop Document (PSD)-
is a native file format for
Adobe Photoshop.
 Photoshop has the ability to
read all of the above formats
2. Vector Image or Vector
Graphic Files
 Vector images are lossless
files created using
mathematical geometric
equations to represent
 Vector Format or Graphic is
the preferred format for
those who desire quality
prints and display of
images.
Types of Vector Image
Formats
 .ai
 Adobe Illustrator file - is the file
extension for graphics created
using Adobe Illustrator which is
created using paths and lines
connected by points instead of
 .drw
 Drawing file – is a generic
drawing created and stored in
a vector format that uses
lines or paths to represent
 .dxf
 Drawing Exchange Format file
- is a drawing format
developed and introduced by
Autodesk the marker of
AutoCAD and is used for CAD
 .ps
 Postscript File is a page
description language (PDL)
developed by Adobe, basically the
language for printing documents
on laser printers and image
setters (high resolution printers)
 .svg
 Scalable Vector Graphics
(SVG) File – is the most
common vector graphic
format on the internet; it was
developed by the World Wide
 Other File Formats

 TIFF – Tagged Image File

Format
 RAW – Raw Image
1. Smallest unit of data in
your computer
2. Smallest information of
an image
3.