TOPIC 3: MULTIMEDIA DESIGN

MULTIMEDIA DESIGN

THE PRINCIPLES OF DESIGN ORGANISATION > HARMONY, VARIETY, BALANCE, PROPORTION,

DOMINANCE, MOVEMENT AND ECONOMY. ~

Harmony is a quality of compatibility and agreement in a composition that contains Consistency

and Sameness.
Types of Harmony
Visual Harmony- Artwork that is unified by color, shape, composition or some other visual
design principle.
Conceptual Harmony artwork that has a common theme or concept throughout it.
Ways to achieve Visual Harmony- Grid, Repetition, Color harmony , Keeping aspects of the
work constant.

Variety is a quality of diversion, disunity (perpecahan), or tension in a composition.

Contrast
Opposition
Differences
Emphasis on Variety -When artists emphasize variety, they are exaggerating differences
rather than similarities

Balance
The equalization of weight , attention, and the various art elements in an image or design.
Stability

Actual and Pictorial Balance

Actual Balance means that a work of three dimensional (3D) art is literally
balanced. (It can stand or hang upright on its own.)
Pictorial Balance refers to the distribution of the apparent or visual weight of the elements
in two-dimensional (2D) works.

Symmetrical Balance
Symmetry a similarity of form or arrangement on either side of a central axis line.
Bilateral symmetry (pure or formal symmetry) everything in a composition on either side
of an actual or imaginary axis is the exactly same.
Approximate symmetry (informal symmetry) the whole of the work has a feeling of
symmetry although it is not exactly the same.

Asymmetrical Balance
When the right and left sides of a composition bear visibly different shapes, colors, textures,
or other elements. And yet they are arranged or weighted in such a way that the work
feels balanced.

Horizontal, Vertical, and Diagonal Balance

Horizontal balance elements on either side of a vertical axis in the composition seem to be
about equal.
Vertical balance- the elements at the top and bottom of the composition are in balance.
Diagonal balance the elements on either side of a diagonal line dividing the composition
are visually equal.
 TOPIC 3: MULTIMEDIA DESIGN

Proportion refers to the rightness of the size of the parts in a total work.
Figurative sculpture involves the head, hands, and feet in proportion to the rest of the body.
In a way composition, the relationship between the parts to each other and the whole.
Means of creating pleasing proportions
The Canon of Proportions
The Golden Rectangle and Curve
The Root Five Rectangle
Canon of proportions A set of rules about the body parts and their dimensions relative to
one another that became the standard for creating the ideal figure.
Golden mean or the Golden Selection- the smaller part of a work relates to a larger part of
the work as the larger part relates to the whole.
Golden Rectangle a rectangle based on the proportion of the golden mean.

Dominance
Some feature of a work normally will capture the viewers attention.
Emphasis, Isolation
Focal point, Centre of interest.
Hierarchical Scaling
How to create a focal point
Accentuate certain shapes
Intensify color or contrast
Use directional line
Strategically place objects and images
Isolate an object or subject.

Movement
Movement paths that the eye follows in viewing a composition.
Rhythm or Regular Repetition orderly progressions.
Rhythm is found in music, nature, architecture, and art.
Rhythm can move a viewer visually.
Repetitive pattern can be used to lead the eye over the landscape of the work.

Economy
The principle of economy suggests that a good composition is the most simple solution to
the design problem.
Minimal Design.
Simplicity in Art.
Keeping it simple is the Key to good design.

THE ELEMENTS OF TWO-DIMENSIONAL (2D) DESIGN: LINE, SHAPE, TEXTURE, VALUE AND COLOUR

Lines
Line is defined as a mark that spans a distance between two points (or the path of a moving
point), taking any form along the way. As an art element, line pertains to the use of various
marks, outlines and implied lines in artwork and design, most often used to define shape in
two dimensional work.
Shapes
Shape pertains to the use of areas in two dimensional space that can be defined by edges,
setting one flat specific space apart from another. Shapes can be geometric (e.g.: square,
circle, triangle, hexagon, etc.) or organic (such as the shape of a puddle, blob, leaf,
 TOPIC 3: MULTIMEDIA DESIGN

boomerang, etc.) Shapes are defined by other elements of art: Space, Line, Texture, Value,
Color, Form.
Texture
The texture is the quality of a surface or the way any work of art is represented. Lines and
shading can be used to create different textures as well. For example, if one is portraying
certain fabrics, one needs to give the feeling of the right texture so that it closely resembles
what the artist is trying to convey. It can be implied or real. What you can feel with your
sense of touch.
Tone (Value)
Value, or tone, refers to the use of light and dark, shade and highlight, in an artwork. Some
people also refer the lightness and darkness in an artwork as tints(light) and shades(dark).
Black and- white photography depends entirely on value to define its subjects. Value is
directly related to contrast
Colour
Colour is the interpretation of light as it is seen by your eyes when that light is reflected off
the surface of your subject, or when it is refracted by a prism.
Primary Colours : Red, Blue, Yellow
Secondary Colours : Green, Orange, Violet
Tertiary Colours : Primary + Secondary colors

THE ELEMENT OF THREE DIMENSION 3D DESIGN: LINE, PLANE, VOLUME, MASS (SPACE), TEXTURE
AND COLOR.

Line is a mark made by a moving point and having psychological impact according to its
direction, weight, and the variations in its direction and weight. Line is also an element of
design, lines can stand alone or be part of another graphic element. The type of lines you
use can convey different feelings, moods and add strength to your ideas. Lines can be
combined with other lines to create textures and patterns to convey additional information
and meaning. Lines can be rules or leaders used to separate, organize emphasize, or provide
a framework for the page. For some example line is used in web page design, map, building
model (3D), fashion clothe and so on.

Plane is A shape which is essentially two-dimensional (length and height or x and y) in nature
but the relationship with other shapes or plane it may give an illusion of the three
dimension. As an example 6 normal 2D plane with the same size and combined together it
form a cube in 3D.

Volume is takes up space, but may contain space and volume can be both solid and hollow.
Volumetric forms contain points (vertices), lines (edges), and planes (surfaces).

Mass (space) is the actual dimensions of the piece height, width, thickness/weight and
depth (3D objects). is the amount of material in any sculptural work. Additionally, each
element within the design (graphics, photos, lines, text blocks) have their own mass relative
to the whole piece. The mass are used to create contrast, to accommodate information,
content, normal size restraints or expectations and to convey a mood or provide emphasis.

Texture appeals to the sense of touch, sight and hearing and thus the function of texture in
an overall design is a key. Texture is becoming integral to design. Its gone beyond being a
trend. Its now a simple and effective way to add depth to a website. Wielding the power of
texture is a great responsibility. It increases the effectiveness of websites and is a quality
tool in the arsenal of designers. It can guide the users eye and emphasize the importance of
 TOPIC 3: MULTIMEDIA DESIGN

key elements. For an example texture can highlight elements such as titles, headings, icons
and buttons. It draws the eye to calls to action and main headings. Besides that, texture also
can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate
content into logical divisions. That why texture is a key of a design. Texture is used in art,
web design, photography, interior design and others more.

Colour is a important component of multimedia and it is irreplaceable. Colour is use to

convey meaning, change action and cause reaction. There are few types of colour system
and with the different function such as Additive Color System(Red-Green-Blue)(RGB) is use
for the sensing, representation, and display of images in electronic systems, TV and
computer monitors, Subtractive Color System(Red-Yellow-Blue) and CMYK Color System
(Cyan-Magenta-Yellow-BlacK)( CMYK) is use for printing process. Likewise, the colours used
for a product, web site, business card, or logo.

The elements of multimedia: text (fonts and faces, computer text & hypertext & hypermedia),
images (bit maps, raster, vector, rendering and drawing and color), animation (principles of
animation), audio (digital, musical instrument digital interface (MIDI)) and video (video standard,
analogue, digital, recording and editing)

Text (fonts and faces, computer and text and hypertext and hypermedia)
Text is a vital element of multimedia menus, navigation systems, and content. Text
represents a written language. Legibility (readability) of text can be affected by size,
background, foreground color, style, and leading.
Font is a complete character set of a single size and style of a particular typeface or
complete set of type of one size and face. A typeface is set of characters of the same
design. These characters include letters, numbers, punctuation marks, and symbols. Font
styles include Boldface, Italic, Underlining and Outlining.
Computer and texts is about font wars between Postscript and Truetype and character sets.
Postscript is a page description language (PDL) for desktop publishing areas which
supported by image setters (high resolution printers) and printing documents on laser
printers . Besides that, its also an object-oriented language, meaning that it treats images,
including fonts, as collections of geometrical objects. Outline of each character of Postscript
fonts is defined PostScript fonts are called outline fonts because the outline of each
character is defined and sizes can be changed with Postscript Commands which called
scalable fonts.
TrueType is a system of scalable outline fonts, and can draw characters at low resolution; it
has become the most common format for fonts on both the Mac OS and Microsoft Windows
operating systems.
Hypertext is defined as the organized cross-linking of words, images, and other Web
elements. Hypertext allows textual information to be linked in non-sequential way. (Not like
books can be read from beginning to end) Hypertext contain links that lead readers jump to
other parts of document or related documents, it is also enable readers to jump between
documents over the Internet on the Web. Million ofWindows and Macintosh users routinely
use hypertext when consulting online Help files recently.
Hypermedia is a system that could combine text, number, graphics animation, sound
effects, music and other hyperlinked documents. The World Wide Web supports graphical
hyperlinks and links to sound and video files. Hypermedia is structured with links
(connections between conceptual elements), nodes (accessible topics), anchors (reference
from one to another document or file on the web) and navigating via buttons. Anyhow the
hypermedia can be disorienting and leave readers wondering what theyve missed and dont
 TOPIC 3: MULTIMEDIA DESIGN

always have the links that readers want. Besides, reading on screen is more tiring, extended
period of screen-gazing cause eyestrain, headache, and backache.

Images (bitmaps, raster, vector, rendering and drawing and colour)

A bitmap is a data matrix describing the individual dots of an image. Bitmap consist of rows
and columns of dots and value of each dot is stored in 1 or more bits of data. Bit or binary
digit which is smallest unit of information that used to make words and make sentences
with 0 and 1. Word is made with assembling/combination of 8bits which called byte with
256 combinations. (From 00000000 to 11111111, 2^8 )
Image resolution refers to the density of the pixels that make up image or graphics on
webpage. Its the number of pixels to display an image. Example, pixel width x pixel height
such as 640 x 480 images. Pixels or picture element is a single printed dots or colored grid in
graphic image. The quality of a display system depends on how many pixels it can display
and bit used to represent each pixel .Thus, the greater number of pixels used, it will be more
detailed and defined but file size increases. Color resolution (bit per pixel) or color depth
specified bit numbers used to store color information in image file. (File size = pixels x color
depth / 8). For an example, 256-color display means an 8-bit can only shows 256 colors and
it uses to display a pixel. The industry standard for bitmap painting and editing programs
are Adobe Photoshop and Illustrator, Macromedias Fireworks, Corels Painter, Corel Draw
and Quark Express.

Facts About Bitmap Images

Bitmap images (also known as raster images) are made up of pixels ( picture elements ) in a
grid. Pixels are picture elements; tiny dots of individual color that make up what you see on
your screen. All these tiny dots of color come together to form the images you see. Most
computer monitors display approximately 70 to 100 pixels per inch--the actual number
depends on your monitor and screen settings.

To illustrate this, let's take a look at a typical desktop icon such as the one shown in the
image here. The icons on your desktop are typically 32 by 32 pixels. In other words, there are
32 dots of color going in each direction. When combined, these tiny dots form an image. The
icon shown in the upper right corner of this example is a typical desktop icon at screen
resolution. As you can see, when you enlarge the icon, as I have in this example, you can
clearly see each individual square dot of color. Note the that white areas of the background
are still individual pixels, even though they appear to be one solid color.

Bitmap images are resolution dependent. Resolution refers to the number of pixels in an
image and is usually stated as dpi (dots per inch) or ppi (pixels per inch). Bitmap images are
displayed on your computer screen at screen resolution: approximately 100 ppi. However,
when printing bitmaps, your printer needs much more image data than a monitor. In order
to render a bitmap image accurately, the typical desktop printer needs 150-300 ppi. If you've
ever wondered why your 300 dpi scanned image appears so much larger on your monitor,
this is why.

Because bitmaps are resolution dependent, it's difficult to increase or decrease their size
without sacrificing a degree of image quality. When you reduce the size of a bitmap image
through your software's resample or resize command, you must throw away pixels. When
you increase the size of a bitmap image through your software's resample or resize
command, the software has to create new pixels. When creating pixels, the software must
estimate the color values of the new pixels based on the surrounding pixels. This process is
called interpolation.
 TOPIC 3: MULTIMEDIA DESIGN

Scaling an image does not effect the image permanently. In other words, it does not change
the number of pixels in the image. However, if you scale a bitmap image to a larger size in
your page layout software, you are going to see a definite jagged appearance. Even if you
don't see it on your screen, it will be very apparent in the printed image. Scaling a bitmap
image to a smaller size doesn't have any effect; in fact, when you do this you are effectively
increasing the ppi of the image so that it will print clearer.

Common bitmap formats include:

BMP
GIF
JPEG, JPG
PNG
PCX
TIFF
PSD (Adobe Photoshop)

Popular bitmap editing programs are:

Microsoft Paint
Adobe Photoshop
Corel Photo-Paint
Corel Paint Shop Pro
The GIMP

All scanned images are bitmaps, and all images from digital cameras are bitmaps.
Converting between bitmap formats is generally as simple as opening the image to be
converted and using your software's Save As... command to save it in any other bitmap
format supported by your software.

Bitmap images in general do not inherently support transparency. A couple of specific

formats--namely GIF and PNG--support transparency. In addition, most image editing
programs support transparency, but only when the image is saved in the software
program's native format. A common misconception is that the transparent areas in an
image will remain transparent when an image is saved to another format or copied and
pasted into another program. That just doesn't work; however, there are techniques for
hiding or blocking out areas in a bitmap that you intend to use in other software.

Key Points About Bitmap Images:

pixels in a grid
resolution dependent
resizing reduces quality
easily converted
restricted to rectangle
minimal support for transparency

Raster Images is a bitmap images that made up of pixels in a grid. It is resolution

dependent because cannot scale up to an arbitrary resolution without loss of apparent
quality. Raster images are stored in image files with varying formats such as BMP
(Windows Bitmap), PNG (Portable Network Graphics), PCX (Personal Computer
eXchange, loseless), TIFF (Tagged Image File Format), PSD (Photoshop Document, Adobe
Photoshop), GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts
 TOPIC 3: MULTIMEDIA DESIGN

Group) /JPG. Converting between bitmap formats is simple as opening image and use
the softwares Save As to save it in any other bitmap format and bitmap images is
restricted to rectangular shape. However, it is best for photo-realistic images or
complex drawings.
Note that JPEG and GIF are the most common compressed image formats on the Web.

VECTOR
Vector images are made up of many individual, scalable objects which defined by
mathematical equations thus render at the highest quality. Objects may consist of lines,
curves, and shapes with editable attributes such as color, fill, and outline. Vector graphics
are more flexible and look same when it scaled to different sizes, means resolution
independent because scalable. In contrast, bit-mapped graphics become ragged (having an
irregular outline) when become smaller or been enlarged. In vector graphics, object can be
placed over other and object below will show through. But for scanning an image and saving
it as vector file, it needs special conversion software. Besides, its not suitable for producing
photo-realistic imagery.

To convert from vector graphic to bitmap by specify the output solution of final bitmap for
what size the user want. However, vector graphics tend to have much smaller file sizes than
raster based bitmaps. Common vector formats include AI (Adobe Illustrator), CDR (Corel
DRAW), CMX (Corel Exchange), CGM(Computer Graphics Metafile), DXF AutoCAD and WMF
Windows Metafile. Popular vector drawing programs are Adobe Illustrator, Corel DRAW,
Xara Xtreme, and Serif DrawPlus. Most common and accepted format for vector images on
the Web is Shockwave Flash (SWF).

Rendering Images is to convert graphics from a file into visual form to display. It is known
as a process of generating an image from a model by computer programs. 'Rendering' is
also used to describe the process of calculating effects in a video editing file to produce final
video output. Rendering has uses in architecture, video games, simulators, movie or TV
visual effects, and design visualization, each employing a different balance of features and
techniques. Examples of feature of rendering images are shading , bump-mapping, texture-
mapping, shadows, soft shadows, reflection, refraction, diffraction, transparency, indirect
illumination, translucency, caustics, depth of field, motion blur and non-photorealistic
rendering. Drawing is a form of visual art that made by means of lines on surface without
color. Normally refers to sketch, plan or outline. Coloring is defined as art, manner, or
process of applying color. In other words, coloring is the act or process of changing the color
of something. In additive color (projected color) method, a color is created by combining
colored light sources in three primary colors which are red, green, and blue (RGB). The main
purpose of the RGB color model is for the sensing, representation, and display of images in
electronic systems, TV and computer monitors. The combination of all three of red, green,
and blue in appropriate intensities makes white. Typical RGB input devices are color TV and
video cameras, image scanners, and digital cameras. Typical RGB output devices are TV sets
of various technologies (CRT, LCD, plasma, etc.), computer and mobile phone displays, video
projectors, multicolor LED displays, and large screens such as JumboTron, etc.

In the subtractive color method, color is created by combining colored media such as paints
or ink. Subtractive color is the process used to create color in printing. The printed page
consists of tiny half one dots of three primary colors which are cyan, magenta, and yellow
(CMY). As color added, results tend to darker or black. In theory, pure colors should
produce black, but printing inks contain impurities, so this combination produces muddy
brown. K is needed to produce pure black, hence CMYK is four-color process printing.
 TOPIC 3: MULTIMEDIA DESIGN

Facts About Vector Images

Vector images are made up of many individual, scalable objects. These objects are defined
by mathematical equations rather than pixels, so they always render at the highest quality.
Objects may consist of lines, curves, and shapes with editable attributes such as color, fill,
and outline. Changing the attributes of a vector object does not effect the object itself. You
can freely change any number of object attributes without destroying the basic object. An
object can be modified not only by changing its attributes, but also by shaping and
transforming it using nodes and control handles. For an example of manipulating an object's
nodes, see my CorelDRAW tutorial on drawing a heart.

Because they're scalable, vector-based images are resolution independent. You can increase
and decrease the size of vector images to any degree and your lines will remain crisp and
sharp, both on screen and in print. Fonts are a type of vector object.

Another advantage of vector images is that they're not restricted to a rectangular shape like
bitmaps. Vector objects can be placed over other objects, and the object below will show
through. See the example images on this page. The vector circle and bitmap circle appear to
be exactly the same when seen on a white background. But when you place the bitmap
circle over another color, it has a rectangular box around it, from the white pixels in the
image.

Vector images have many advantages, but the primary disadvantage is that they're
unsuitable for producing photo-realistic imagery. Vector images are usually made up of solid
areas of color or gradients, but they cannot depict the continuous subtle tones of a
photograph. That's why most of the vector images you see tend to have a cartoon-like
appearance. Even so, vector graphics are continually becoming more advanced, and we can
do a lot more with vector drawings now than we could a decade ago. Today's vector tools
allow you to apply bitmapped textures to objects giving them a photo-realistic appearance,
and you can now create soft blends, transparency, and shading that once was difficult to
achieve in vector drawing programs.
Vector images primarily originate from software. You can't scan an image and save it as a
vector file without using special conversion software. On the other hand, vector images can,
quite easily, be converted to bitmaps. This process is called rasterizing. When you convert a
vector image to a bitmap, you can specify the output resolution of the final bitmap for
whatever size you need. It's always important to save a copy of your original vector artwork
in its native format before converting it to a bitmap; once it has been converted to a bitmap,
the image loses all the wonderful qualities it had in its vector state. If you convert a vector to
a bitmap at a size of 100 by 100 pixels and then decide you need the image to be larger,
you'll need to go back to the original vector file and export the image again. Also keep in
mind that opening a vector image in a bitmap editing program usually destroys the vector
qualities of the image and converts it to raster data.

The most common reason for wanting to convert a vector to a bitmap would be for use on
the Web. At this time, the most common and accepted format for vector images on the Web
is Shockwave Flash (SWF). Another standard for vector images on the Web is SVG, a graphics
programming language based on XML. Due to the nature of vector images, they are
best converted to GIF or PNG format for use on the Web.

Common vector formats include:

AI (Adobe Illustrator)
 TOPIC 3: MULTIMEDIA DESIGN

CDR (CorelDRAW)
CMX (Corel Exchange)
SVG (scalable vector graphics)
CGM Computer Graphics Metafile
DXF AutoCAD
WMF Windows Metafile

Popular vector drawing programs are:

Adobe Illustrator
CorelDRAW
Xara Xtreme
Serif DrawPlus
Inkscape

What About Metafiles?

Metafiles are graphics that contain both raster and vector data. For example, a vector image
that contains an object which has a bitmap pattern applied as a fill, would be a metafile. The
object is still a vector, but the fill attribute consists of bitmap data.

Common metafile formats include:

EPS (Encapsulated PostScript)
PDF (Portable Document Format)
PICT (Macintosh)

Key Points About Vector Images

scalable
resolution independent
no background
cartoon-like
inappropriate for photo-realistic images
metafiles contain both raster and vector data

Animation (12 basic principles of animation)

1. Squash and stretch. The movement of object indicates the rigidity. For example, a
rubber ball bounces higher and squashes more impact than hard league ball. How easy
for the object squashes and stretches is depend on the rigidity of the material to make
an object. Volume doesnt change (remain constant) when squashed. If the length of a
ball is stretched vertically, its width needs to contract correspondingly horizontally.

2. Anticipation is preparation for an action. It used to prepare the audience for an action,
and to make the action appear more realistic, can also be used to direct the audiences
attention. Example: A dancer jumping off the floor has to bend his knees first; a golfer
making a swing has to swing the club back first. Anticipation: A baseball player making a
pitch prepares for the action by moving his arm back.

3. Staging is the presentation of an idea so that is completely clear. It purposes to make it

clear what is greatest importance in a scene; what is happening, and what is about to
happen without miss anything. It is useful to use characteristics that clearly define the
 TOPIC 3: MULTIMEDIA DESIGN

character. For example, in a scene with plenty of action, the audience's eye will be
drawn to an object at rest.

4. Straight ahead action and pose to pose, "Straight ahead action" means drawing out a
scene frame by frame from beginning to end(animating sequentially). This process
usually produces drawings that have a fresh and slightly zany look because look very
creative. Pose to pose" involves starting with drawing a few key frames, and then filling
in the intervals later. It makes the drawings concentrating on the poses and relates to
each other in size and action and then draws the in between.

5. Follow through is the termination of an action. An example is in throwing a ball, the

hand continues to move after the ball is released. Overlapping means to start a second
action before the first action has completely finished. Overlapping action maintains a
continual flow between whole phrases of action and makes the objects and movement
more interesting.

6. Slow in and slow out deals with the spacing of the in between drawings between the
extreme poses. It can be used to create acceleration and deceleration. For example, a
bouncing ball moves faster as it approaches or leaves the ground and slower as it
approaches leaves its maximum position. Slow-in means slowing down the speed of an
action when reaching a main pose. Slow-out means accelerating again upon leaving a
main pose.

7. Arcs describe the motion path which mostly about curved, which are more characteristic
of mechanical environment. Arc also describes the visual path of action from one
extreme to another. Using arcs to animate the movements of characters helps achieve a
natural look because most living creatures move in curved paths, never in perfectly
straight lines.

8. Secondary action is an action that results directly from another action. Secondary
actions are important in increasing interest and adding a realistic complexity
(compound) to the animation. It can help to support the main action. For an example, in
facial animation, movement is secondary action such a sad person wiping tear from their
face. The expression of the face is primary action because it is what will portray the
characters sadness the best while the wiping of the tear is known as secondary action.

9. Timing is the speed of an action and it give meaning tomovement. The speed of an
action defines how well the idea will be read to the audience. Timing refers to the
number of drawings or frames for a given action. For example, if a character picks up a
heavy object such as bowling ball, they should do it much slower than picking up a light
object such as basketball.

10. Exaggeration can be used in animation with great results. The key is to take something
and make it more extreme in order to give it more life, but not so much that it destroys
believability. For example, if a character is sad, make him sadder; if he is bright, make
him shine; worried, make him fret, if he is angry, make him furious. The result will seem
more realistic and entertaining.

11. Solid drawings means taking into are those with interesting, well proportioned shapes
and good sense of weight and volume. It means taking into account forms in three-
dimensional space, giving them volume and weight.
 TOPIC 3: MULTIMEDIA DESIGN

12. Appeal is the visual quality that makes characters (and objects) attractive, interesting,
stimulating. It's not restricted to beauty and goodness. A monster or a villain can and
should also be appealing to the audience. The important thing is that the viewer feels
the character is real and interesting. Thus, use it includes an easy to read design, clear
drawing, and personality development that will capture audiences interest.

Audio (digital, musical instrument digital interface (MIDI))

Digital audio is reproduction and transmission of sound in digital format. Digital audio
refers to a digital representation of audio waveform for processing, storage or transmission.
Digital audio is useful in the recording, manipulation, mass-production and distribution of
sound. Users can take benefits in convenience of storage, transmission and retrieval.

Digital audio data (Samples) represent amplitude/loudness of sound at a discrete point in

time. Quality of digital recording depends on sampling rate/frequency (number of samples
taken per second). Most often used of sampling frequencies in multimedia are CD-quality
44.1 kHz, 22.05 kHz an d 11.025 kHz. Audio resolution determines the accuracy with which
soundcan be digitized.

Digital audio is device independent. Audio resolution determines the accuracy with sound
can be digitized. Size of stereo recording is doubled the monophonic digital recording in
same duration. Common discrete audio file formats include *.WAV, *.AIF, *.AU and *.MP3.
Wav is standard audio file format for Windows applications. AIFF (Audio Interchange File
Format) is standard audio format employed by computers using Apple Macintosh OS, it
supports variety of bit resolutions, sample rates, and audio channel like WAV and is widely
used in software programs to create and modify digital audio. AU(Audio) is compressed file
format developed by Sun Microsystems and popular in Unix world, also the standard audio
file format for Java programming language. It supports the 8-bit depth, thus cannot provide
CDquality sound. MP3 stands for "Motion Picture Experts Group, Audio Layer 3
Compression." MP3 files (*.mp3) provide near-CD-quality sound but are only about 1/10th
as large as a standard audio CD file. Because MP3 files are small, they can easily be
transferred across the Internet and played on any multimedia computer with MP3 player
software.

Musical Instrument Digital Interface (MIDI) is set of instructions used to play electronic
music on devices (synthesizers). The MIDI specification includes hardware which are the
electronic devices and their interfaces and software which are the rules for encoding and
sound information. Musician can use a keyboard to play the sounds of many different
instruments with or touches to perform audio from a sound source device such as a
programmable instrument and MIDI data contains no audio information.

Comparison/ Difference (Digital Audio MIDI)

o Digital audio is analogous (similar/corresponding) to bitmapped images while MIDI is

analogous to structured vector graphics. Digital audio is device independent and
MIDI is not.
o Digital audio can do the playback easily and provides consistent playback quality.
Meanwhile, MIDI files sound better than digital audio files when played on a high-
quality MIDI device , can change the length of a MIDI file by varying its tempo
without changing the pitch of the music or degrading the audio quality.
 TOPIC 3: MULTIMEDIA DESIGN

o However, users dont need knowledge of music theory to run digital audio and MIDI
files are much smaller than digitized audio.

Video (video standard, analogue, digital, recording and editing)

Video refers to electronically capturing, recording, processing, storing, transmitting, and
reconstructing a sequence of still images representing scenes in motion. Frame is the total
picture. Frame rate is the number of pictures displayed in one second. Monitor and video
adapter are determined support graphics standard. Monitor must be able to show the
resolution and colors defined by the standard, and the video adapter must be capable of
transmitting the appropriate (suitable) signals to the monitor.

The two most common video standards used are NTSC (National Television Standards
Committee) and PAL (Phase Alternate Line). NTSC is the video system or standard used in
North America and most of South America. In NTSC, 30 frames are transmitted each
second. Each frame is made up of 525 individual scan lines. NTSC define a method for
encoding information into electronic signal that creates a television picture. PAL is the
predominant (most common) video system or standard mostly used overseas. In PAL, 25
frames are transmitted each second. Each frame is made up of 625 individual scan lines.
PAL is an analogue television color encoding system used in broadcast television systems
in many countries. SECAM (Sequential Color and Memory) has a screen resolution of 625
horizontal lines and is a 50 Hz system. SECAM differs from NTSC and PAL color systems in its
basic technology and broadcast method.

Analog Video
o Analog video is a video signal transferred by an analog signal. An analog color video
signal contains luminance, brightness (Y) and chrominance (C) of an analog
television image. Analog video is used in both consumer and professional television
production applications. Analog television sets remain the most widely installed
platforms for delivering and viewing video. Television sets use composite
[combination of luminance which are brightness(Y) and chrominance(C) among
others with NTSC/PAL/SECAM] input. Hence colors are less pure and less accurate
than computers using RGB component. NTSC television uses a limited color palette
and restricted luminance (brightness) levels and black levels. be displaced on
computer screens. Digital refers to a system based on discontinuous events, as
opposed to analog, a continuous event. In other words, digital video is audio/visual
in a binary format. Digital video is used to display analog video images on a
computer monitor, but video signal had to first be converted from analog to digital
form.
o Analog-to-digital conversion is to make information usable on computer and it
makes analog signal to series of 0s and 1s. Analog data such as video recorded on
tape is transmitted as electronic signals of varying frequency or amplitude that are
added to carrier waves of a given frequency. Digital video offers a number of
advantages over analog video, no degradation of data quality when copied
(consistent), easy and inexpensive copying, and easy to manipulate because of
easier and faster to edit like separating sound from image without affecting the
other.

Digital Video
 TOPIC 3: MULTIMEDIA DESIGN

o Digital video can be sent via the Internet to countless end users without having to
make a copy for every viewer. It is easy to store, retrieve, and publish. A digital video
can be copied over and over without losing its original information, easy to preserve.
Compression is process of reducing file size by eliminating unnecessary data for
reconstruction purposes.

o Lossless and lossy known as types of compression. The lossless compression

retains the original data so that the individual image sequences remain the same. It
saves space by removing image areas that use the same color, means no loss in
information. The lossy compression methods remove image and sound
information that is unlikely notice by viewer. Some information is lost, but since it
is not differentiated by the human perception, the quality perceived is still the
same, while the volume is dramatically decreased. For example, the human eye is
more sensitive to subtle variations in luminance than it is to variations in color.

o JPEG image compression works in part by "rounding off" less-important visual

information. There is a corresponding trade-off between information lost and the
size reduction. DVDs use the lossy MPEG-2 Video codec for video compression.

o Codecs are software that enables devices (Camera, Editor, and Player) to perform
video encoding and/or decoding (think video compression and de-compression). All
video streams are embedded in multimedia (video) containers. Video format like
.AVI (Windows) and .MOV (Quicktime on Macs) can only play with containers which
used properly installed codec otherwise it wont play. Common compression format
for digital video like MPEG-1 purposes to put compressed video and compressed
audio on a 1X speed CD. Example, keeping the data rate down to 150KB per second.
MPEG-2 uses similar techniques as MPEG-1, but targets much higher-bandwidth
applications like digital television and DVDs. Because of those different targets,
MPEG-2 was never intended to replace MPEG-1. MPEG-4 was developed to target
the extremely low bit rates of Internet video. MPEG-4 supports any number of
different compression methods, and potentially even different video, audio, still
image, 3D, and metadata tracks within a single MPEG-4 file. It is time-based rather
than field-based or frame-based and therefore affords great flexibility for file-size
reduction. MPEG-4 AVC (Advanced Video Coding) to support different compression
methods. MPEG-4 AVC uses the MPEG-4 file structure, it given the advanced
encoding and resolution independence.

Video capturing (recording) is the process of converting an analog video signal that produced
by a video camera or DVD player to digital video. Codecs were used during video capture for
the highest quality possible balanced with the data volume that able handle by camera.

Video editing is the process of manipulating and rearranging video shots to create a new
work. Video editing may refers to rearranging, adding or removing sections of video clips
applying colour correction, filters and other enhancements and creating transitions between
clips. Example, resolution should be reduced and footage must be compressed later
according to the requirements.

SCREEN DESIGN PRINCIPLES

 TOPIC 3: MULTIMEDIA DESIGN

Screen design refers to how the multimedia program will look when it is displayed on the
computer screen.
In screen design, CASPER design pr inciples are used. CASPER principles are used to make sure
that the multimedia program is user-friendly.

o Contrast
o Contrast refers to the usage of different types of multimedia elements.
o It is one of the way to make the multimedia program more attractive.

o Alignment
o Alignment refers to the arrangement of multimedia elements on the screen. For
example, graphics or text should be arranged at the most suitable position.

o Simplicity
o Simplicity refers to the simple and easy way of presenting the multimedia program. For
example, using a simple design with less graphics, animation and text makes the
multimedia program more attractive and easy to understand.

o Proximity
o Proximity refers to the concept of grouping a similar or related element. For example,
the arrangement of "Main Menu" and graphics must be in one group.

o Emphasis
o Emphasis refers to creating the focus point on the screen. It will highlight the important
part of the screen to attract the users attention

o Repetition
o Repetition refers to the concept of repeating the same texture, colour, size of font and
style in the multimedia program. Repetition adds a visual interest into the multimedia
program.
TOPIC 3: MULTIMEDIA DESIGN