Anatomy of Images

Images
• A beautiful media element
• Represents information that is need to be
seen and perceived
• “A picture speaks a thousand words”
 Understanding Image
• When placing images in multimedia
application, it is important to have a good
understanding of what images are
• Image can be classified into two:
– Raster Image
– Vector Image
 Raster Image
• A raster image is composed of a mosaic of
colored squares called pixels or (picture
element)
 Color Value in RGB
• Each pixel has a color value. Pixels can display
on to million of colors.
• Each pixels color value is stored in the file.
 Image Dimension
• Image dimension is reflected in the width and
height of an image
• We commonly measure images by inches like
3x5(3R) or 4X6 (4R). But these measures are
suitable for photo printing
• For digital images, we measure dimensions in
pixels. (1024px by 860px)
 Image Resolution
• The resolutions describes how clear the image
appears on screen or on print
– Screen Resolution is defined as the number of
pixels per inch or PPL
– Print Resolution is defined as the number of dots
per inch or DPI
• Increasing of the PPI/DPI leads to a higher
resolution image
 Image Quality
• Higher resolution leads to a higher image
quality
• High Quality images are clearer and have
more details visible
 Low Resolution Images
• Low Resolution Images get distorted when
they are enlarged.
• Distortion happens because the pixels are
being stretched
• Enlarging picture does not increase resolution
 High Resolution Images
• High Resolution Images do not distorted when
they are enlarged
 File Size
• The file size of an image increases as the
resolution increases
• It is important to find balance between
resolution and the file size
 Raster in Multimedia Applications
• Raster Images are best used in multimedia
applications if you need to show an actual,
real, evidence of something or someone
 Raster Image File Formats
• The most common image file formats include:
– JPEG (Joint Photographic Experts Group)
• Pronounced as Jay-peg
• Capable of displaying millions of colors at once
– GIF (Graphics Interchange Format)
• Pronounced as Jif
• Can be stored at maximum of 256 colors
 Raster Image File Formats
– PNG (Portable Network Graphic)
• The PNG file format is a higher resolution image
created as an alternative to GIF to support transparency
– TIFF (Tagged Image File Format)
• File is owned by Adobe Systems
• A common format used with image scanning
 Vector Graphics
• A vector graphic is comprised of objects
(shapes, lines, ovals, curves etc.)
• Each object in the image is defined by a path
 Properties of Objects
• Objects have stroke and fill properties
• Stroke (or outline) properties apply to the
path of an object
• Fill properties apply to the area enclosed by
the path
 Stroke Properties
• Weight
– Property refers to the line thickness, typically
measured in points
• Color
– Property describes the color of the line
• Style
– Property shows the different stroke styles like
solid line, dashed line, or dotted line.
 Fill Properties
• Color
– Property describes the color of the object
• Gradient
– Property describes the direction of the gradient colors
applied to the object whether linear, radial or
rectangular.
• Texture
– Property describes the design of the texture applied
on the object whether moss, crumpled or woody.
 Strokes are Essential
• It is common for vector graphic designers to
start with the outline drawing before coloring
the graphic
 Image Programs
• Programs that operate on Raster Images
include Adobe Photoshop and MS Paint
• Programs that operate on Vector images
include Adobe Illustrator, Macromedia
Freehand, and Corel Draw.
Vectors in Multimedia Applications
• Vectors graphic are best used in multimedia
applications when you need to:
– Represent a brand (logos)
– Show something at a dissected view (parts of the
heart)
– Show something that cannot be captured by a digital
camera (Planets, Solar System)
– Show cartoon drawings
– Represent a space with a map
– Show creative illustraions
 Vector File Formats
• The most common Vector Graphic format
include:
– AI (Adobe Illustrator File)
• AI is a file drawn / colored in Adobe Illustrator.
– SVG (Scalable Vector Graphic)
• SVG files are quite complex programmed files in XML.
• This files usually require a special player to be viewed
 Image Compatibilities
• Vector Images created in AI or SVG format are
not compatible for use in multimedia
applications or the Web
• Most designers would save digitally created
graphics as JPEG or PNG (for transparency)
 Where do we get Images?
• Capture your Own
• Online image galleries
 Capturing Images
• The only way to capture digital images is with
a digital cameras
– Point and Shoot Digital Cameras
– Digital Single Lens Reflex Camera (DSLR)
 Point and Shoot Cameras
• These are compact, small and portable, and
suitable for casual and “snapshoot” use
• Images are store in JPEG format
• Features
– Resolution of 3 megapixels to 15 megapixels
– Built in Flash
– Memory card slot for external storage
– Live preview on an LCD screen to frame the photo
– Autofocus, macro, and zoom capability
– Self-Timer
 DigitalCameras Vs. Film Cameras
• Film Camera are also be useful, but images would
still have to be processed and scanned to become
a digital form.
• Digital Cameras are more advantageous over film
cameras
– Displaying images on a screen immediately
– Storing thousands of images on a single small memory
device
– Previewing what has been stored
– Deleting image to free storage space
– Basic image manipulation and editing features
 SLR Cameras vs. Point and Shoot
Cameras
• SLR’s are more expensive, heavier and bigger but
give better resolution, quality and focus.
• SLR’s have a faster shutter speed. It does not have
much of a delay when clicking several snaps
consecutively.
• SLR’s allow you to change lenses according to
what you need to shoot
– Landscape photos – wide-angle lens
– Pugs and Flowers – macro lens
– Animals – tele-photo lens
 SLR Cameras vs. Point and Shoot
Cameras
• SLR’s take high quality photos even in low
lighting (without the flash)
• Taking pictures is within your control if you
use an SLR
 Other Camera Devices
• Webcam
• Mobile Phones
• Spy Cameras
• Surveillance Cameras
• Video Cameras
 Transferring Images
• USB Cable
• Most digital cameras come with a cable that
connects the camera to a USB port on your
computer
• Memory Card Reader
 Online Image Galleries
• www.everystockphoto.com
• www.gettyimages.com
• www.fotosearch.com
• www.flickr.com
• www.istockphoto.com
• www.photos.com
• www.bigstockphoto.com
• www.stockvault.com
• www.shutterstock.com
 Image Editing
• Image editing is the process of altering images
with an image editor software
• Raster images can be edited. Their pixels
contain the image’s color and brightness
information
• Image editors can change the pixels to
enhance the image in many ways
• Vector graphics software are used to create
and modify vector images
 Image Editing Techniques
• Straightening
• Cropping
• Adjusting brightness and contrast
• Removing Red-Eye
• Adjusting Color Modes
• Adjusting Saturation
• Adjusting Temperature
• Adjusting Exposure
• Blur and Sharpen Effects
• Photo Manipulation