FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 1

Introduction

Are you developing a multimedia presentation? Regardless of which of these activities you

may be working on, there is one common element that you will probably be including--

graphics. Finding the best graphics to meet your needs will go a long way in helping you with

your project. Two companies that are well-known for their contributions to multimedia and

graphic design are Adobe and Macromedia. Knowing about what they have to offer will help

you to make your choice of which graphics programs to use.

The Important of Graphics in Multimedia

Many visual representations are generally much more effective at conveying information than text.

Most graphics also can convey messages instantly and they may also serve as hyperlinks to other types of information.

Graphics such as drawings and photographs are integral to multimedia titles. Visualization is an important part of communications process, and graphical images can be used to add emphasis, direct attention, illustrate concepts, and provide a background for the content.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 2

1.0 Multimedia

Definition of Multimedia

Derived from the word ―Multi‖ and ―Media‖.

Multi – means Many, Multiple,

Media - Tools that is used to represent or do a certain things, delivery

medium, a form of mass communication – newspaper, magazine / tv.

Distribution tool & information presentation – text, graphic, voice,

images, music and etc.

Multimedia is a combination of text, graphic, sound, animation, and video that is delivered

interactively to the user by electronic or digitally manipulated means.

Multimedia is the media that uses multiple forms of information content and information

processing (e.g. text, audio, graphics, animation, video, interactivity) to inform or entertain

the user. Multimedia also refers to the use of electronic media to store experience multimedia

content. Multimedia is similar to traditional mixed media in fine art, but with a broader scope.

The term "rich media" is synonymous for interactive multimedia.1

Chart 1 : The Elements of Multimedia

1 Vaughn, T. (1998). Multimedia: Making It Work. (4th ed.). New York:Osborne-McGraw Hill. (299-300).

MULTIMEDIA

GRAPHICS

ANIMATION

TEXT VIDEO

AUDIO

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 3

1.1 Categories of Multimedia

Multimedia may be broadly divided into linear and non-linear categories. Linear active

content progresses without any navigation control for the viewer such as a cinema

presentation. Non-linear content offers user interactivity to control progress as used with a

computer game or used in self-paced computer based training. Non-linear content is also

known as hypermedia content. Multimedia presentations can be live or recorded. A recorded

presentation may allow interactivity via a navigation system. A live multimedia presentation

may allow interactivity via interaction with the presenter or performer.

1.2 Features of Multimedia

Multimedia presentations may be viewed in person on stage, projected, transmitted,

or played locally with a media player. A broadcast may be a live or recorded

multimedia presentation. Broadcasts and recordings can be either analog or digital

electronic media technology. Digital online multimedia may be downloaded or

streamed. Streaming multimedia may be live or on-demand.

Multimedia games and simulations may be used in a physical environment with

special effects, with multiple users in an online network, or locally with an offline

computer, game system, or simulator. Enhanced levels of interactivity are made

possible by combining multiple forms of media content But depending on what

multimedia content you have it may vary Online multimedia is increasingly becoming

object-oriented and data-driven, enabling applications with collaborative end-user

innovation and personalization on multiple forms of content over time. Examples of

these range from multiple forms of content on web sites like photo galleries with both

images (pictures) and title (text) user-updated, to simulations whose co-efficient,

events, illustrations, animations or videos are modifiable, allowing the multimedia

"experience" to be altered without reprogramming.2

2 Vaughn, T. (1998). Multimedia: Making It Work. (4th ed.). New York:Osborne-McGraw Hill. (299-300).

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 4

2.0 The Elements of Multimedia - Graphic

2.1 Introduction

Graphics or still images are the important element of a multimedia project or a web site. In

order to make a multimedia presentation look elegant and complete, it is necessary to spend

ample amount of time to design the graphics and the layouts. Competent, computer literate

skills in graphic art and design are vital to the success of a multimedia project.

2.2 Definition

Graphics is a digital representation of non-text information such as a drawing, chart, or

photograph. It is also called a digital picture or image, and contains no movement or

animation. In simple description, Graphic is two-dimensional figure or illustration Could be

produced manually (by drawing, painting, carving, etc.) or by computer graphics technology.

Used in multimedia to show more clearly what a particular information is all about

(diagrams, picture).3

2.3 Elements of graphics

To create a remarkable graphics, developer must understand graphics and its elements:

Chart 2 : The Elements of Graphics

3 Ulrich, T. (2001, September 22). Linking business coverage with graphics. Designer, 150, 30-33.

Lines Shapes Space Texture Color

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 5

2.3.1 Lines

A line is a mark with length and directions. Continuous mark made on some surface by a

moving point. Types of line include: vertical, horizontal, diagonal, straight or ruled, curved,

bent, angular, etc.

Picture 1 : Lines

Lines can be used to:

Organize information.

Highlight or stress words.

Connect pieces of information.

Outline a photo or set it off from other elements.

Create a grid. (A grid is the underlying structure of a page.)

Create a chart or graph.

Create a pattern or rhythm by drawing many lines.

Direct the reader's eye or create a sense of motion. (Create a sense of action by

using a diagonal line.)

Suggest an emotion.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 6

2.3.2 Shapes

Anything that has height and width has shape. Unusual shapes can be used to attract

attention. There are basically three types of shapes. Geometric shapes, such as triangles,

squares, rectangles, and circles, are regular and structured. These shapes work very well as

building blocks for graphic design. Natural shapes, such as animals, plants, and humans, are

irregular and fluid. Abstracted shapes, such as icons, stylized figures, and graphic

illustrations, are simplified versions of natural shapes.

Picture 2 : Shapes

With shape you can:

Crop a photo in an interesting way, such as in an oval.

Symbolize an idea.

Make a block of text more interesting by setting the text into a shape.

Create a new format.

Highlight information. You could add a screened or tinted shape to highlight

important information.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 7

2.3.3 Space

Refers to the distance or area between, around, above, below, or within things. It can be

described as two-dimensional or three-dimensional; as flat, shallow or as positive or negative

space etc.

Picture 3 : Space

Space can be used to:

Give the eye a visual rest.

Create ties between elements.

Highlight an element.

Put a lot of white space around something important to call attention to it.

Make a layout easy to follow.

Make type as legible as possible.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 8

2.3.4 Texture

Texture is the look or feel of a surface. You can add richness and dimension to your layouts

with texture. Visual texture creates an illusion of texture on a printed publication or web

page. Patterns, such as the images printed on wrapping paper, are a type of visual texture.

Tactile texture can actually be felt. Printed publications can be printed on textured paper that

readers can feel.

Picture 4 : Textures

Actual textures can be felt with fingers, while simulated textures will be suggested by an

artist in the painting of different areas of a picture.

Texture can be used to:

Give a printed publication, presentation, or web page a mood or personality.

Create contrast for interest.

Fool the eye.

Provoke emotions.

Create a feeling of richness and depth.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 9

2.3.5 Color

Color in layouts can convey moods, create images, attract attention, and identify objects.

When selecting colors for a publication or a web page, think about what you want the color to

do and what is appropriate for your purpose.

An element of art with three properties:

hue or tint (the color name)

Related to the wavelength of light

intensity (purity and strength of a color)

Related to the purity of light

value (the lightness or darkness of a color)

Related to the amplitude of light

Picture 5 : Hue Color Pyramid

Color can be used to:

Highlight important elements such as headlines and subheads.

Attract the eye.

Signal the reader where to look first.

Create an image or a mood.

Tie a layout together.

Organize.

Group elements together or isolate them.

Provoke emotion.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 10

3.0 Principle of Graphics

Graphic principles, on the other hand, deal with the overall look of the piece and how all the

elements fit in with it. Things like balance, focal point, and unity are three of the most

important graphic principles.

3.0.1 Balance

Balance is an equal distribution of weight. In terms of graphics, this applies to visual

weight. Each element on a layout has visual weight that is determined by its size,

darkness or lightness, and thickness of lines. There are two basic approaches to

balance. The first is symmetrical balance which is an arrangement of elements so that

they are evenly distributed to the left and to the right of center. The second is

asymmetrical balance which is an arrangement of unlike objects of equal weight on

each side of the page. Color, value, size, shape, and texture can be used as balancing

elements.

Symmetrical balance can communicate strength and stability and is appropriate for

traditional and conservative publications, presentations, and web sites. Asymmetrical

balance can imply contrast, variety, movement, surprise, and informality. It is

appropriate for modern and entertaining publications, presentations, and web sites.

To create balance:

Repeat a specific shape at regular intervals, either horizontally or vertically.

Center elements on a page.

Put several small visuals in one area to balance a single large image or block of text.

Use one or two odd shapes and make the rest regular shapes.

Lighten a text-heavy piece with a bright, colorful visual.

Leave plenty of white space around large blocks of text or dark photographs.

Offset a large, dark photograph or illustration with several small pieces of text, each

surrounded by a lot of white space.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 11

3.0.2 Focal Point

Focal point (or Emphasis) is always a favorite, since it usually the largest element on

the page and is meant to draw the eye into the piece. The focal point, or the part of the

design that is most emphasized, doesn’t have to be a large image or blob on the page.

It can be a large blob, but most times it is more subtle and is placed in the overall

design. Accents are also used, which are also considered supporting focal points.

Accents are not usually as strongly emphasized as the main point, but they support the

focal point and add to the overall effectiveness of the design.

To create focal point or emphasis:

Use a series of evenly spaced, square photographs next to an outlined photograph

with an unusual shape.

Put an important piece of text on a curve or an angle while keeping all of the other

type in straight columns.

Use bold, black type for headings and subheads and much lighter text for all other

text. Place a large picture next to a small bit of text.

Reverse (use white type) a headline out of a black or colored box.

Use colored type or an unusual font for the most important information.

Put lists you want to highlight in a sidebar in a shaded box.

3.0.3 Unity

Unity helps all the elements look like they belong together. Readers need visual cues to let

them know the piece is one unit-the text, headline, photographs, graphic images, and captions

all go together.

Unify elements by grouping elements that are close together so that they look like they

belong together. Repeat color, shape, and texture. Use a grid (the underlying structure of a

page) to establish a framework for margins, columns, spacing, and proportions.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 12

To create unity:

Use only one or two typestyles and vary size or weight for contrast throughout

the publication, presentation, or web site.

Be consistent with the type font, sizes, and styles for headings, subheads,

captions, headers, footers, etc. throughout the publication, presentation, or web

site.

Use the same color palette throughout.

Repeat a color, shape, or texture in different areas throughout.

Choose visuals that share a similar color, theme, or shape.

Line up photographs and text with the same grid lines.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 13

4.0 Category of Graphics

Chart 3 : Category of Graphics

4.1 Bitmap

A bitmap is a simple information matrix describing the individual dots that are the smallest

elements of resolution on a computer screen or other display or printing device. In other

words, bitmap are made up of pixels in a grid. A one dimensional matrix is required for

monochrome (black and white); greater depth (more bits of information) is required to

describe more than 16 million colors the picture elements may have, as illustrated in

following figure. The state of all the pixels on a computer screen make the image seen by the

viewer, whether in combinations of black and white or colored pixels in a line of text, a

photograph-like picture, or a simple background pattern.

Picture 6 : A matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer

screen or printer

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. 4

4 Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-16.

Graphics Bitmaps Vector-Drawn

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 14

4.2 Vector Drawn

Vector graphics is the creation of digital images through a sequence of commands or

mathematical statements that place lines and shapes in a given two-dimensional or three-

dimensional space. In physics, a vector is a representation of both a quantity and a direction

at the same time. In vector graphics, the file that results from a graphic artist's work is created

and saved as a sequence of vector statements. A vector file is sometimes called a geometric

file. Most images created with tools such as Adobe Illustrator and CorelDraw are in the form

of vector image files. Vector image files are easier to modify than raster image files (which

can, however, sometimes be reconverted to vector files for further refinement).

Animation images are also usually created as vector files. For example, Shockwave's Flash

product lets you create 2-D and 3-D animations that are sent to a requestor as a vector file and

then rasterized "on the fly" as they arrive.

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.5

Picture 7 : Picture showing the distortion on bitmap image.

5 Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-16.

No distortion occurs in when we enlarge the clipart

Distortion occurs in, when we enlarge a bitmap image.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 15

5.0 How Bitmaps and Vector Drawn Images Works?

5.0.1 Where do bitmap come from? How are they made?

Bitmaps objects are described by making a bitmap from scratch with paint or drawing

program. It grabs a bitmap from an active computer screen with a screen capture program,

and then paste into a paint program or your application. Capture a bitmap from a photo,

artwork, or a television image using a scanner or video capture device that digitizes the

image. Once made, a bitmap can be copied, altered, e-mailed, and otherwise used in many

creative ways.

5.0.2 Where do vector come from? How are they made?

Vector-drawn objects are described and drawn to the computer screen using a fraction of the

memory space required to describe and store the same object in bitmap form. A vector is a

line that is described by the location of its two endpoints. A simple rectangle, for example,

might be defined as follows:

RECT 0,0,200,200

“Draw a rectangle starting at 0,0 (upper left corner of screen) going 200 pixels horizontally

right and 300 pixels downward, with a RED boundary and filled with BLUE.”

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 16

6.0 Generating Bitmap and Vector Graphics (Still Images)

Still images may be small or large, or even full screen. Whatever their form, still images are

generated by the computer in two ways: as bitmap (or paint graphics) and as vector-drawn (or

just plain drawn) graphics. Bitmaps are used for photo-realistic images and for complex

drawing requiring fine detail. Vector-drawn objects are used for lines, boxes, circles,

polygons, and other graphic shapes that can be mathematically expressed in angles,

coordinates, and distances. A drawn object can be filled with color and patterns, and you can

select it as a single object. Typically, image files are compressed to save memory and disk

space; many image formats already use compression within the file itself – for example, GIF,

JPEG, and PNG. Still images may be the most important element of our multimedia project.

6.0.1 Generating Bitmap

The abilities and feature of image-editing programs for both the Macintosh and Windows

range from simple to complex. The Macintosh does not ship

with a painting tool, and Windows provides only the

rudimentary Paint (see following figure), so you will need to

acquire this very important software separately – often bitmap

editing or painting programs come as part of a bundle when

you purchase your computer, monitor, or scanner.

Capturing and Editing Images

The image that is seen on a computer monitor is digital bitmap

stored in video memory, updated about every 1/60 second or

faster, depending upon monitor’s scan rate. When the images

are assembled for multimedia project, it may often be needed

to capture and store an image directly from screen. It is

possible to use the Prt Scr key available in the keyboard to

capture a image.

Picture 8 : The Windows Paint accessory

provides rudimentary bitmap editing

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 17

Scanning Images

After scanning through countless clip art collections, if it is not possible to find the unusual

background you want for a screen about gardening. Open the scan in an image-editing

program and experiment with different filters, the contrast, and various special effects. Be

creative, and don’t be afraid to try strange combinations – sometimes mistakes yield the most

intriguing results.

6.0.2 Generating Vector

Most multimedia authoring systems provide for use of vector-drawn objects such as lines,

rectangles, ovals, polygons, and text. Computer-aided design (CAD) programs have

traditionally used vector-drawn object systems for creating the highly complex and geometric

rendering needed by architects and engineers.

Graphic artists designing for print media use vector-drawn objects because the same

mathematics that put a rectangle on your screen can also place that rectangle on paper

without jaggies. (Jaggies is the informal name for artifacts in raster images, most frequently

from aliasing, which in turn is often caused by non-linear mixing effects producing high-

frequency components and/or missing or poor anti-aliasing filtering prior to sampling).6

This requires the higher resolution of the printer, using a

page description language such as PostScript. Programs

for 3-D animation also use vector-drawn graphics. For

example, the various changes of position, rotation, and

shading of light required to spin the extruded. Vector

graphics editors typically allow rotation, movement,

mirroring, stretching, skewing, affine transformations,

changing of z-order and combination of primitives into

more complex objects. Vector graphics are ideal for

simple or composite drawings that need to be device-

independent, or do not need to achieve photo-realism. For

example, the PostScript and PDF page description

languages use a vector graphics model.

6 Don, M. (1998). The antialiasing problem in graphics. London:Ray Tracing.

Picture 9 : Example showing effect of

vector graphics

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 18

6.1 Vector-based vs. Bitmap Graphics

As stated above, vector-based images are resolution independent. You can easily resize

vector images to a thumbnail sketch or a billboard-sized graphic. They just keep their

smoothness when resized and do not lose detail and proportion. Smooth curves are easy to

define in vector-based programs and they retain their smoothness and continuity even when

enlarged. You can also change vector-based images into bitmap formats when needed. On the

other hand, bitmap images provide photo-realistic images that require complex color

variations. They are not easily scalable though. The disadvantage of bitmap images comes

when you want to resize the picture. Increasing the size of a bitmap has the effect of

increasing individual pixels, making lines and shapes appear rough and chunky. Reducing the

size of a bitmap also distorts the original image because pixels are removed to reduce the

overall image size. Moreover, since a bitmap image is created as a set of arranged pixels, its

parts cannot be manipulated individually. The following picture (Figure 3) very well

illustrates the difference between vector-based and bitmap images when they are resized.

Vector-based Image Bitmap Image

Picture 10 : Vector-based image vs. Bitmap image when enlarged by 300%: While the vector-based object is scaled

without any loss in quality, the bitmap image has some pixelation (i.e. jaggies seen above).

Another advantage of using vector-based graphics in designing multimedia and

a Web site is smaller file size. It does not take up so much space because they only

contain data about the points, lines, and curves which form the object. However, most of

you probably have come across the problem of slow download speeds for Web graphics,

which are bitmap image formats.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 19

Hence, vector-based images are great for the Web since they can be resized to any proportion

without loosing the quality of the original image and also the files are very small. Therefore,

one disadvantage of vector-based images is that they cannot provide the realism of a

photograph due to the nature of line drawn images. Whereas, bitmap image formats give a

realistic result for representation of the real world, vector-based images can only come as

close as cartoon-style drawings of the objects.7

BBiittmmaapp GGrraapphhiiccss VVeeccttoorr GGrraapphhiiccss

Pixel-based

More realistic images

Bigger file size

Suffer from distortion problem

Not easily scalable

Difficult to convert to vector

graphics

Mathematically based

Graphics are not realistic

Small file size

No distortion problem (can resize

image)

Easily scalable due to its use of

mathematics formulas

Can be converted to bitmap image

easily

Table 1 : The advantages and disadvantages of both categories.

7 Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-16.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 20

7.0 Editing Tools for Graphics

Graphic art software is a subclass of application software used for graphic design, multimedia

development, specialized image development, general image editing, or simply to access

graphic files. Art software uses either raster or vector graphic reading and editing methods to

create, edit, and view art.

Many artists and other creative professionals today use personal computers rather than

traditional media. Using graphic art software may be more efficient than rendering using

traditional media by requiring less hand–eye coordination, requiring less visualization skill,

and utilizing the computer's quicker (sometimes more accurate) automated rendering

functions to create images. However, advanced level computer styles, effects and editing

methods may require a steeper learning curve of computer technical skills than what was

required to learn traditional hand rendering and visualization skills. The potential of the

software to enhance or hinder creativity may depend on the intuitiveness of the interface.

7.0.1 Bitmap Editing Tools.

Popular editing tools for bitmap graphic, as below ;

• Microsoft Paint

• Adobe Photoshop

• Corel Paint Shop Pro

• Corel Photo Paint

• Ulead PhotoImpact

7.0.2 Vector Editing Tools.

Popular editing tools for vector graphic, as below ;

• Adobe Illustrator

• CorelDRAW

• Xara Xtreme

• Serif DrawPlus

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 21

8.0 Color

Color is a vital component of multimedia. Management of color is both a subjective and a

technical exercise. Picking the right colors and combinations of colors for our project can

involve many tries until we feel the result is right.

The tools we use to describe color are different when the color is printed than from when it is

projected.

Projected color is additive.

Printed color is subtractive.

The letters of the mnemonic ROY G. BIV, learned by many of us to remember the colors of

the rainbow, are the ascending frequencies of the visible light spectrum: red, orange, yellow,

green, blue, indigo, and violet. Ultraviolet light, on the other hand, is beyond the higher end

of the visible spectrum and can be damaging to humans.

The color white is a noisy mixture of all the color frequencies in the visible spectrum. The

cornea of the eye acts as a lens to focus light rays onto the retina. The light rays stimulate

many thousands of specialized nerves called rods and cones that cover the surface of the

retina. The eye can differentiate among millions of colors, or hues, consisting of combination

of red, green, and blue.

8.0.1 Additive Color

In additive color model, a color is created by combining

colored light sources in three primary colors: red, green

and blue (RGB). This is the process used for a TV or

computer monitor.

Picture 11 : A picture showing Additive Color

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 22

8.0.2. Subtractive Color

In subtractive color method, a new color is created

by combining colored media such as paints or ink

that absorb (or subtract) some parts of the color

spectrum of light and reflect the others back to the

eye. Subtractive color is the process used to create

color in printing. The printed page is made up of

tiny halftone dots of three primary colors, cyan,

magenta and yellow (CMY).

Picture 12 : A picture showing Subtractive Color

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 23

9.0 Graphics Quality

Did you know that, by creating a circle with vector programs allows you to specify only one

color for the entire circle; but creating a bitmap circle allows you to change the color of every

pixel in the circle. Thus the bitmap can be more photorealistic. The trade-off is that bitmap

graphic files are larger than vector files. File size is a function of the image size, color depth

and the resolution.

Graphics quality can be determined by evaluating the aspects below:

Figure 1 : Determining the quality of graphics

9.0.1 Image Size

Image size refers to the height and width of the image, measured in inches, centimeters, dots,

or any other unit of measure. Image size is a little tricky to grasp due to the fact that the

resolution of an image can vary. For example, it is not of much help to know that an image is

3 by 5 inches if you do not know how many dots per inch make up the image. And, an image

of 3 by 5 inches at 100 dots per inch contains the same

amount of image data as does an image of 6 by 10

inches at 50 dots per inch.

Alternatively, if the image size is measured in dots or

pixels, then you know exactly how much image data

exists because a 300 pixel by 500 pixel image contains

15,000 pixels no matter how many pixels you designate

per inch.

Picture 13 : The illustration on image sizes.

Image Size Color Depth Resolutions

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 24

9.0.2 Color Depth

Color depth / bit depth is the range of colors available for pixels. We are essentially referring

to how many different colors can exist within a particular image. An image with the

shallowest (to use a non-technical term) color depth can contain only two different colors.

Those two colors, however, can be chosen from a master color set of over 16 million colors.

The actual colors that are used within an image make up the color palette for that image. For

instance, an image of the shallowest color depth could have a palette of orange and blue.

Therefore, every dot in the image would either be orange, or blue.

Picture 14 : Color Depth

2 16

256 16.7 Million

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 25

9.0.3 Resolutions

You can think of a bitmapped image as a piece of graph paper, of any size, that has had each

square filled in by a color. In computer jargon, the squares are called dots or pixels. The term

pixel was derived from the term picture element. The resolution of the image refers to the

number of dots per inch (dpi) there are in the image. For example, the resolution of an image

could be 100 dpi.

Resolution can vary, and may initially be determined by the hardware used to digitize an

image. Resolution can be decreased, but not without losing image detail. The resolution of an

image can also be increased, but to do so the computer just guesses at what the added

resolution data should look like. This technique is called interpolation. Resolution can really

only be increased by redigitizing the image at a higher resolution. Beware! Some digitizers,

especially flatbed scanners, claim high scanning resolutions that are actually achieved

through interpolation.

Picture 15 : The sample on resolutions.

72 dpi graphic The same image after

being reduced to 36 dpi

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 26

10.0 Image File Format for Graphics

Image file formats are standardized means of organizing and storing digital images. Image

files are composed of either pixels, vector (geometric) data, or a combination of the two.

Whatever the format, the files are rasterized to pixels when displayed on most graphic

displays. The pixels that constitute an image are ordered as a grid (columns and rows); each

pixel consists of numbers representing magnitudes of brightness and color.

Table 2 : Well known and various of file format available.

Microsoft Windows DIB .bmp .dib .rle

Microsoft Palette .pal

Autocad format 2D .dxf

Apple Macintosh .pict .pic .pct

Windows Meta file .wmf

Table 3 : Other available file formats.8

8 Parker, R. (1998). Looking Good in Print. Scottsdale, AZ: Coriolis Creative Professionals Press.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 27

10.1 Types of format

10.1.1 TIFF

Versatility and compatibility make the TIFF image format the optimum choice for

almost any project. It works on both the Mac and PC platforms, supports almost any

picture bit depth, and allows various forms of compression.

This flexibility also makes the TIFF format a Pandora's box. There are so many

versions and types of compression for the TIFF file format that no current system can

decode all of them. Furthermore, there's no way to tell how a TIFF will behave until

you attempt to manipulate it. Try to use LZW compression or no compression at all

for best results.

10.1.2 JPG

Because of its good image quality and compression, the JPEG file format is becoming

increasingly popular in desktop publishing. (QuarkXPress has added a JPEG import

filter in XPress 3.3.) Developed by the Joint Photographic Experts Group, the JPEG

format is expected to become an international standard for encoding digitized

photographs. JPEG's major difference from all other current file formats is that it uses

Lossy compression.

Even though JPEG is relatively new, a second format already exists-JFIF is a new

TIFF subformat that embeds a JPEG image into a TIFF file. The JFIF file format has

yet to become popular because it's much more complex without offering more

capability.

10.1.3 GIF

The GIF file format uses a relatively basic form of file compression (Lempel Zev

Welch, or LZW) that squeezes out inefficiencies in the data storage without losing

data or distorting the image. The LZW compression scheme is best at compressing

images with large fields of homogeneous color. It is less efficient at compressing

complicated pictures with many colors and complex textures

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 28

10.1.4 BMP

The BMP file format is available in almost all Windows-based graphics applications,

although it's primarily used in Windows application development.

10.1.5 PNG

Because of its high compression rate (unsurpassed among ``lossless'' formats -- lossy

JPEG is better for photos) PNG is the standard file format that online services use for

storing 1- to 8-bit images, succeeding GIF (which is a proprietary format and thus

increasingly discarded).

10.1.6 PSD

This is the native Photoshop file format created by Adobe. In this format, you can

save multiple alpha channels and paths along with your primary image. You can't

import this format directly into most desktop publishing applications. 9

9 Parker, R. (1998). Looking Good in Print. Scottsdale, AZ: Coriolis Creative Professionals Press.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 29

11.0 Hardware Used To Acquire Graphics.

11.0.1 Scanners and digital imaging products.

Image / Graphics Scanner often abbreviated to just scanner—is a device that optically scans

images, printed text, handwriting, or an object, and converts it to a image. It is Important to

check the optical resolution of the scanner- measured in dots per inch (DPI)

Many forms of scanner

Drum

Flat-bed

Negative / slide

Hand-held

11.0.2 Digital Camera

A digital camera (or digicam) is a camera that takes

video or still photographs, or both, digitally by

recording images via an electronic image sensor. It is

the main device used in the field of digital photography.

Digital cameras can do things film cameras cannot:

displaying images on a screen immediately after they

are recorded, storing thousands of images on a single

small memory device, and deleting images to free

storage space. The majority, including most compact

cameras, can record moving video with sound as well as

still photographs. Some can crop and stitch pictures and perform other elementary image

editing. It uses digital memory instead of film. Images are transferred to computer via a cable

and it can be very high resolution

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 30

11.0.3 Graphic Tablet and Pen

A graphics tablet (or digitizer, digitizing tablet,

graphics pad, drawing tablet) is a computer input

device that enables a user to hand-draw images and

graphics, similar to the way a person draws images

with a pencil and paper. These tablets may also be

used to capture data or handwritten signatures. It can

also be used to trace an image from a piece of paper

which is taped or otherwise secured to the surface.

Capturing data in this way, either by tracing or

entering the corners of linear poly-lines or shapes is

called digitizing.10

10 Anonymous. (n.d.). CEMCA. In Hardware and Software for Multimedia Development. Retrieved October 22, 2011, from http://www.cemca.org/EMHandbook/Section3.pdf.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 31

12.0 Conclusion

Graphics are required in our everyday’s life. The strong meaning of graphic stimulates a

person to reach at the same moment. All over the world, graphic are being designed by the

millions of graphic designers to attract people and increase the sales of a business activity.

To make a graphic really attractive and adorable, proper arrangement of graphics needs to be

done. A graphic becomes meaningful when it defines the text given below properly and

images to produce a coherent and interesting piece of work, according to the end goal.

In the multimedia presentation, graphics will help in improving the look of the layout of a

projector, attract the viewers, convey the message of the project and stimulate their senses

effectively. As simple it may seem, it is lot of hard work. Fonts, color, size and arrangement

of text and graphics are re-looked at and sent for proofreading. Graphic also need to take care

of the things including its balance, color, contrast, emphasis, movement, pattern, proportion,

proximity, repetition, rhythm, texture, unity, and white space. In this growing world, the

scope of graphic designing has changed a lot. Latest technologies have created new means in

this area and new developments can be seen. Now, with the usage of new software and

printing technologies, graphic generating has become more .flexible and practical. Graphic

have become an essential part of any multimedia designing. So, if you want to design a

customized multimedia that states your needs and requirements, make sure you keep the

graphics as per the demands so that it will benefit your business needs.

Finally, you need to decide what image format should be used in order to make your project

better. As discussed above, you may consider what features of images will meet the needs of

your project. If you want photo-realistic images, then the solution will be the use of bitmaps.

However, if the download speed of graphics is important for you and your audience and the

graphics are supposed to be resized and manipulated, then you should consider vector-based

formats.

A suggestion, try everything in the areas of design elements and principles to hone skills. We

can always take away things from multimedia elements to make it more effective, but that

takes practice too. There are many great multmedia design books that can guide the user

through the process and really make it easier. Examples of good design are always important

so we can see what has been done and what has been done effectively.

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

Page | 32

13.0 References

Vaughn, T. (1998). Multimedia: Making It Work. (4th ed.). New York: Osborne-McGraw

Hill.

Ulrich, T. (2001, September 22). Linking business coverage with graphics. Designer, 150,

30-33.

Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-

16.

Anonymous. (n.d.). CEMCA. In Hardware and Software for Multimedia Development.

Retrieved October 22, 2011, from http://www.cemca.org/EMHandbook/Section3.pdf.

Don, M. (1998). The antialiasing problem in graphics. London:Ray Tracing.

Valencia, R. R. (1999). Dealing with Multimedia-Colors. Washington, DC: American

Technology Association.

Bergmann, P. G. (1998). Colours. In The new encyclopedia britannica (Vol. 26, pp. 501-

508). Chicago, IL: Encyclopedia Britannica.

Parker, R. (1998). Looking Good in Print. Scottsdale, AZ: Coriolis Creative Professionals

Press.

Siebert, L. and Ballard, L. (1992). Making a Good Layout. Cincinnati, OH: North Light

Books.