Fundamental of graphic
Upcoming SlideShare
Loading in...5
×
 

Fundamental of graphic

on

  • 4,714 views

 

Statistics

Views

Total Views
4,714
Views on SlideShare
4,714
Embed Views
0

Actions

Likes
2
Downloads
287
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Fundamental of graphic Fundamental of graphic Document Transcript

    • 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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 readers eye or create a sense of motion. (Create a sense of action by using a diagonal line.)  Suggest an emotion. Page | 5
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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 artists 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, Shockwaves 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 theyre 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. Thats 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 Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-16. Page | 14
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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 Kazak, Sibel. (2001). Multimedia Images : Vector-based vs. bitmap. Good and bad, 26(1), 1-16. Page | 19
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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 computers 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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 Pandoras 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, theres 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. JPEGs 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 its 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 10.1.4 BMP The BMP file format is available in almost all Windows-based graphics applications, although its 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 cant 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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
    • FUNDAMENTAL OF GRAPHICS Multimedia for Information Professionals – IMS457 LS 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