IT33001FP

Digital Media
Technology

Chapter 1
DESCRIBE THE VARIOUS DIGITAL MEDIA ELEMENTS
Describe the Digital Media
Elements
In this Chapter, you will learn to explain the various digital media
elements:

• Vector & raster graphics

• Video & audio formats
• Image formats
• Font formats
Vector & Raster Images

• Multimedia images are generated by the computers in two ways:

1. Vector – based graphics 2. Raster images

Vector & Raster Images

• Vector-based graphics are points, lines, curves and shapes that are based on
mathematical formulas. When you scale a vector image file, it isn't low resolution and
there's no loss of quality, so it can be sized to however large or small you need it to be.

A vector
image looks
the same when
magnified.
Vector Graphics

Final result Actual lines

Figure 1. Vector-based graphic: The image itself on the left and the
actual lines that make up the drawing on the right.
Vector Graphics

Working with Vector Graphics

• Lines and outlines in object graphics can assume any

colour.

• You can also specify how thick the lines should be, the
style of the lines (solid, dotted, etc) and the shape of
the corners (curved, squared, etc).
Outlines and
lines
Vector Graphics

Working with Vector Graphics

• Curved and closed objects can be filled with colours,
colour shifts and patterns.

• The colours are expressed numerically in terms of the ink

coverage required for the respective printing inks.

• You can select fill patterns and colour shifts from a

predetermined menu.
Fill
Vector Graphics

Working with Vector Graphics

• A pattern consists of a small group of objects repeated

in a square pattern. It is easy to make your own pattern.

Patterns
Vector Graphics

Working with Vector Graphics

• Colour shifts are transitions among several colours at set
distances.
• Gradients can either be linear or circular,

Gradient editor

Linear Circular
Gradient Gradient
Vector Graphics

Working with Vector Graphics

• Also known as knockouts, A curve that is placed within a closed object – a star
within a square, for example – can be selected as a knockoutGradients can either
be linear or circular,

Compound Path (Knockout)

Vector Graphics

Applications for Object Graphics

• Object graphics are created in illustration software such as Adobe Illustrator

• Object graphics are usually saved in the image format Encapsulated Postscript
(EPS). You can also save them in whatever format the software uses, but then
the object may not be able to be placed in a page layout application.
Raster Graphics

• Bitmap programs are ideal to retouch

photographs, editing images/ video files and
creating original artwork.

• When photographs or illustrations are scanned into

a computer, pixel based images, or pixel based
graphics are created. Another term of pixel is
raster.

• Pixel Graphics can also be created directly in the

computer or by a digital camera. Raster Graphics
A pixel-based image looks smooth at its
actual size but shows its pixels when
magnified.
Raster Graphics
Resolution

• Consists of pixels per centimeter or per inch (ppi).

• Measured in ppi.
• Low resolution = large pixels.
High resolution = cannot be perceived
• Higher resolution takes up more space

A pixel-based image always has a set

resolution (pixels per inch, or ppi).
In the example, the image has 8
pixels/0.0228 inches = 350 pixels per inch,
or 350 ppi.

Image Resolution
Raster Graphics
Bit Depth
• Number of colors available in a pixel can range from two colors to millions.
• Each channel in a pixel represents a primary color.
• Color information is saved in a measurement called bit depth or color depth
• The more bit depth that an image has, the more colors are available.
• An 8-bit pixel has 256 possible color values and a 24-bit pixel has about 16 million possible
color values.
Raster Graphics
Channels
• Channels store an image’s color information.

• Each pixel in an image can have as few as one

and as many as four channels.

• The number of channels in an image depends

upon the color mode in which the image is set.

• A special grayscale channel that is used to save

selections is known as an alpha channel.
 Raster VS Vector
Graphics
Raster Graphics Vector Graphics

1. Best used for digitized photographs, 1. Best used for line art graphics with flat
scanned artwork or detailed graphics. uniform colours.

2. Ragged-looking when resized larger. 2. Resized and stretched without distortion.

3. Pixel-based. 3. Only the formulas are stored

4. Resolution - dependant. 4. Resolution - independent.

 Video & Audio Formats

 A normal video file in a digital format is made up of two parts, a “codec” and a
“container”.
 A “codec” is used to compress and decompress a video file, as there are times
where video files are too large and may cause difficulty when trying to
download or play the file. Some examples of “codecs” are FFMpeg, DivX, XviD,
and x264.
 A “container” is a collection of files that stores information about the digital file.
It simply means there is a combination of both audio and video data in a single
file to allow for simultaneous audio-with-video playback. Some popular types of
“containers” are AVI, FLV, WMV, MP4, and MOV.
 Video & Audio Formats

AVI (Audio Video Interleave)

 Developed by Microsoft
 It is so universally accepted that many people consider it the de facto standard
for storing video and audio information on the computer.
 AVI files are able to run on a number of different systems.
 AVI files stores data that can be encoded in a number of different codecs.
 Video & Audio Formats

WMV (Windows Media Video)Developed by Microsoft

 Developed by Microsoft
 Originally designed for web streaming applications.
 WMV files are the tiniest video files over the Web, as their file size decreases
significantly after compression, which results in poor video quality
 Allows users to upload and share their videos through the e-mail system.
 Windows Media Player is the main application that is used to play WMV files on all
Microsoft’s Windows operating systems.
 Video & Audio Formats

MOV (Apple QuickTime Movie)

 Developed by Apple. Inc,
 Popular amongst Macintosh users, and is often used on the Web, and for saving
movie and video files.
 Available for the Windows Operating System.
 MOV files are of high quality and are usually big in file size.
 Video & Audio Formats

MP4 (Moving Pictures Expert Group 4)

 MP4 is an abbreviated term for MPEG-4 Part 14, a standard developed by the
Motion Pictures Expert Group.
 Commonly used for sharing video files on the Web.
 Video is compressed with MPEG-4 or H.264 video encoding, and audio is
compressed using AAC compression.
 The MP4 file format is also another great file sharing format for the Web.
 Video & Audio Formats
Name File extension Container Video coding Audio coding
format format format

.avi AVI any any

AVI

Windows .wmv ASF Windows Media Windows Media

Media Video Audio
Video
.mov Quicktime H.264, H.265, AAC
QuickTime
MPEG-4 Part 2, MP3
File Format
MPEG-2 and many

.mp4 MPEG-4 H.264, H.265, AAC

MPEG-4 . m4v MPEG-4 Part 2, MP3
MPEG-2, MPEG-1
 Image Formats
What are Image file formats?

Image file formats are standardized means of organizing and storing digital images. Depending
on the format used, the data may be stored in an
• Uncompressed format
• Compressed format ( Lossless or Lossy)
• Vector format.

Digital data of these image files can be rasterized for use on a computer display or printer.
Rasterization converts the image data into a grid of pixels.
 Image Formats
File Format & Description
extension
Photoshop (.psd) • Pixel-based image format
• Primarily used during the actual editing of the image.
• Cannot be used for output
• Able to save images in layers

Encapsulated • Manages both object graphics and pixel graphics.

• Images can be selected with mask channels
PostScript (.eps) • File formats are different for Windows and Macintosh.
• File size slightly larger than TIFF

Tagged Image File • Open image format for pixel-based images.

• Format also differs from Windows to Macintosh. TIFF handles line and grayscale images in
Format (.tiff) RGB and CMYK modes.
• Slightly smaller file size than EPS
• Cannot contain mask channels or halftone screen information
Graphic Interchange • File format primarily used on the Web.
• Always in index mode, can consist of line as well as grayscale images and can contain
Format (.gif) anywhere from 2 to 256 different colors.
• Colours is determined by how many bits are assigned to a pixel: 1 to 8 bits are possible.
• Colours are selected from a palette, which can be adjusted to the actual color content of
the images or be drawn from set palettes for Macintosh or Windows.
 Image Formats
File Format & Description
extension
The Joint • Uses the JPEG compression format that also works as its own image format.
• Format is the same on all company platforms.
Photographic Experts • JPEG works for grayscale, RGB and CMYK modes.
Group (.jpg, .jpeg, • Ideal for photographs as it can store up to 24bit colours
jpg2000)
Portable Document • Manages both object graphics and pixel graphics.
• Adobe Photoshop and Adobe Illustrator can save and edit images in high-resolution PDF.
Format (.pdf • Combines the best characteristics of the EPS format and Photoshop, is better standardized
and can be read across all platforms.

Adobe Illustrator (.ai) • Proprietary file format developed by Adobe Systems for representing single-page vector-
based drawings in either the EPS or PDF formats
• Has tight integration with other software allows you to produce extraordinary graphics for
print, video, the Web and mobile devices.

Microsoft Bitmap • One of several graphic file formats supported by Microsoft Windows operating environment.
• BMP is the native bitmap format of Windows and is used to store virtually any type of bitmap
(.bmp) data.
• Most graphic and imaging applications running under Microsoft Windows support the
creation and display of BMP format files.
 Font Formats
TrueType Font (TTF)
The TrueType font format was developed by Apple and Microsoft as a response to the
PostScript font format. TTF has long been the most common format for fonts on Mac and
Windows operating systems.
 Font Formats
OpenType (OTF)
OpenType is the evolution of TTF. It is the result of a joint effort between Adobe and Microsoft.
OpenType fonts contain the screen and printer font data in one component. OTF has several
exclusive capabilities, including support for multiple platforms and expanded character sets.
OTF fonts can be used by Macintosh and Windows operating systems.
 Font Formats
Embedded Open Type (EOT)
EOT fonts were designed by Microsoft to be fonts used on the web. It is an attempt to address
the copyright shortcomings of TTF and OTF when publishing on the web. EOT uses a Microsoft
tool to create a font from existing TTF/OTF fonts.
 Font Formats
Web Open Font Format (WOFF)
WOFF is basically OTF or TTF with metadata and compression supported by all major browsers. It
was created to live on the web. It is the result of collaboration by the Mozilla Foundation,
Microsoft, and Opera Software. Because fonts are compressed, they load faster. Metadata
allows for the inclusion of license data within the font file to address copyright issues.
 Font Formats
Scalable Vector Graphics font (SVG)
SVG fonts are defined using the SVG’s ‘font’ element. These fonts contain the glyph outlines as
standard SVG elements and attributes as if they were a single vector object in the SVG image.
The greatest drawback to SVG fonts is the lack of font hinting.