Fundamental of graphic

FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS

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.

Page | 1


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

GRAPHICS

AUDIO ANIMATION

MULTIMEDIA

VIDEO TEXT

Chart 1 : The Elements of Multimedia

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

Page | 2


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).
Page | 3


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:

Lines Shapes Space Texture Color

Chart 2 : The Elements of Graphics

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


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.

Page | 5


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.

Page | 6


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.

Page | 7


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.

Page | 8


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.

Page | 9


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.

Page | 10


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.

Page | 11


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.

Page | 12


4.0 Category of Graphics

Vector-
Drawn Graphics Bitmaps

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.

Page | 13


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

No distortion occurs in
when we enlarge the clipart

Distortion occurs in,
Picture 7 : Picture showing the distortion on bitmap image. when we enlarge a bitmap image.

5

Page | 14


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

Page | 15


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

Page | 16


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
Picture 9 : Example showing effect of
vector graphics 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.

Page | 17


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.

Page | 18


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

Bitmap Graphics Vector Graphics

 Pixel-based  Mathematically based

 More realistic images  Graphics are not realistic

 Bigger file size  Small file size

 Suffer from distortion problem  No distortion problem (can resize
image)

 Not easily scalable  Easily scalable due to its use of
mathematics formulas

 Difficult to convert to vector  Can be converted to bitmap image
graphics easily

Table 1 : The advantages and disadvantages of both categories.

7

Page | 19


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

Page | 20


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

Page | 21


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

Page | 22


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:

Image Size Color Depth Resolutions

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.

Page | 23


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.

2 16

256 16.7 Million

Picture 14 : Color Depth

Page | 24


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.

72 dpi graphic The same image after
being reduced to 36 dpi

Picture 15 : The sample on resolutions.

Page | 25


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.

Page | 26


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

Page | 27


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.

Page | 28


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

Page | 29


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 .

Page | 30


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.
Page | 31


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.

Page | 32

Fundamental of graphic

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (12)

Similar to Fundamental of graphic

Similar to Fundamental of graphic (20)

More from Dirz M

More from Dirz M (7)

Recently uploaded

Recently uploaded (20)

Fundamental of graphic