Unit 2: Unit 2 Multimedia Graphics Design
Introduction to Multimedia: Introduction to Multimedia Text What is TEXT?: What is TEXT? Basic media for many multimedia systems.
Texts in the form of words, sentences and paragraphs is used to communicate thoughts, ideas and facts in nearly every aspect of our lives.
What is TEXT?: What is TEXT? Multimedia products depends on text for many things:
to explain how the application work.
to guide the user in navigating through the application.
deliver the information for which the application was designed.
What is TEXT?: What is TEXT? Minimize the texts in multimedia application
Texts consists of two structures:
What is TEXT?: What is TEXT? Linear
A single way to progress through the text, starting at the beginning and reading to the end.
What is TEXT?: What is TEXT? Non-Linear
Information is represented in a semantic network in which multiple related sections of the text are connected to each other
A user may then browse through the sections of the text, jumping from one text section to another.
Kancil Page Crocodile Case Page Belt Case Page Hungry Monkey Page Why Text is Important in MM?: Why Text is Important in MM? Factors affecting legibility of text:
The size of the text
Background and foreground color
The color in which the text is written in / on.
Also known as typeface and font
refers to the amount of added space between lines of type.
Originally, when type was set by hand for printing presses, printers placed slugs—strips of lead of various thicknesses—between lines of type to add space. Why Text is Important in MM?: Why Text is Important in MM? Factors affecting legibility of text:
Background and foreground color (BG – Light colored, FG – Dark)
Leading Text Technology: Text Technology Based on creating letters, numbers and special characters.
Text elements can be categories into:
Alphabet characters : A – Z
Numbers : 0 – 9
Special characters : Punctuation [. , ; ‘ …] , Sign or Symbols [* & ^ % $ £ ! /\ ~ # @ .…]
Also known Character Sets
Text Technology: Text Technology May also include special icon or drawing symbols, mathematical symbols, Greek Letter etc.
Font VS Typefaces: Font VS Typefaces Is there a difference?
How do we differentiate one with the other?
Font: Font A ‘font’ is a collection of characters of a particular size and style belonging to a particular typeface family.
Usually vary by type sizes and styles.
The sizes are measured in points
This includes the letter set, the number set, and all of the special character and diacritical marks you get by pressing the shift, option, or command/control keys.
Arial Fonts Typeface: Typeface A ‘typeface’ is a family of graphic characters that usually includes many type sizes and styles.
A typeface contains a series of fonts. For instance, Arial, Arial Black Arial Narrow and Arial Unicode MS are actually 4 fonts under the same family.
Arial Typefaces Family Font and Faces: Font and Faces The study of fonts and typefaces includes the following:
Font styles - boldface, italic, underline, outline
Font sizes - point, kerning, leading
Cases – uppercase, lowercase, intercap
Serif versus Sans Serif Font Effects: Font Effects A numbers of effects that are useful for bringing viewer’s attention to content:
Case: UPPER and lower cased letter
Bold, Italic, Underline, superscript or subscript
Embossed or Shadow
Font Effects Example: Font Effects Example Tracking, Kerning, Leading: Tracking, Kerning, Leading Ascender
an upstroke on a character
the down stroke below the baseline of a character
spacing above and below a font or Line spacing
spacing between characters
space between pairs of characters, usually as an overlap for improvement appearance
Text Characteristic: Text Characteristic FD xhp This example shows the Times New Roman font Tracking, Kerning, Leading: Tracking, Kerning, Leading Av Unkerned Kerned Tracking, Kerning, Leading: Tracking, Kerning, Leading Reading Line One
Reading Line Two Leading Types of Fonts: Types of Fonts Two classes of fonts
Serif Text: Serif Text Decorative strokes added to the end of a letter's
Serifs improve readability by leading the eye along the line of type.
Serifs are the best suited for body text.
Serif faces are more difficult to read in small scale (smaller than 8pt) and in very large sizes.
San Serif Text: San Serif Text Sans serif faces doesn't have decorative strokes.
A sans serif text has to be read letter by letter.
Use sans serif faces for small (smaller than 8pt) and very large sizes.
Used for footnotes and headlines Serif vs Sans Serif Fonts: Serif vs Sans Serif Fonts For computer displays, Sans Serif fonts considered better because of the sharper contrast.
San Serif Serif Types of Fonts: Examples: Types of Fonts: Examples Examples of Serif fonts Examples of San Serif fonts Using Text in Multimedia: Using Text in Multimedia The text elements used in multimedia are:
Menus for navigation
Fields for reading
Symbols and icons
Using Text in Multimedia: Using Text in Multimedia Text applying guidelines:
Use appropriate fonts
Make it readable
Consider type styles and colors
Use restraint and be consistent
Font Editing and Design Tools : Font Editing and Design Tools Text creating software
Introduced by Apple Text to design text as a bitmap image.
Font Editing and Design Tools: Font Editing and Design Tools Text creating software:
Developed by Macromedia for Macintosh and Apple
Use to edit the existing font
Freehand drawing tools is used to design a font.
Text in Hypermedia: Text in Hypermedia Hypertext: Hypertext How Text Can Be Used Effectively: How Text Can Be Used Effectively Communicating Data
Customer names and address
Pricing information of products How Text Can Be Used Effectively: How Text Can Be Used Effectively Explaining concepts and ideas
A company mission statement
A comparison of medical procedures
How Text Can Be Used Effectively: How Text Can Be Used Effectively Clarifying other media
Labels on button, icons and screens
Captions and callouts for graphics
Advantages & Disadvantages Using Text: Advantages & Disadvantages Using Text Advantages:
Is relatively inexpensive to produce
Present abstract ideas effectively
Clarifies other media
Provides confidentiality (password)
Is easily changed or updated
Advantages & Disadvantages Using Text: Advantages & Disadvantages Using Text Disadvantages:
Is less memorable than other visual media
Requires more attention from the user than other media
Can be cumbersome Summary - Text: Summary - Text Multimedia applications and presentations invariably rely to some extent on the use of text to convey their message to users.
Text has many characteristics that the developer can modify to enhance the user experience.
size, weight, typeface, style, colour, kerning, tracking, etc.
Just like any other media, it requires careful planning and creativity.
Graphics Overview: Graphics Overview Key feature/element in multimedia products
Most of the time, using text only is not enough to convey a message to the user.
Multimedia products need attractive graphical combination and presentation
Developers must understand the purpose and significance of graphics that are going to be used in their projects
Also important in information delivery. Graphics Overview: Graphics Overview Graphics can be developed using several methods:
Graphic/image manipulation software
Acquiring through scanning or camera transfer
Graphic files can be stored in various file format – each format has different purposes Elements of Graphic: Elements of Graphic To create a remarkable graphics, developer must understand graphics and its elements:
Color Lines: Lines 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. Shapes: Shapes Enclosed space defined and determined by other art elements such as line, color, value, and texture
Can appear as 2 dimensional (2D) or 3 dimensional (3D) Space: Space Refers to the distance or area between, around, above, below, or within things
can be described as two-dimensional or three-dimensional; as flat, shallow or as positive or negative space etc Texture: Texture Surface quality or "feel" of an object, its smoothness, roughness, softness, etc
Actual or Simulated Texture: Texture Actual textures - can be felt with fingers
Simulated textures - suggested by an artist in the painting of different areas of a picture Color: Color Produced by light of various wavelengths - when light strikes an object and reflects back to the eyes Color: Color An element of art with three properties:
hue or tint (the color name)
intensity (purity and strength of a color)
value (the lightness or darkness of a color)
Photographers measure color temperature in degrees Kelvin (K). Graphics Image Development: Graphics Image Development Graphical images obviously play a very important role in multimedia products
Images may be photograph-like bitmaps, vector-based drawings, or 3D renderings
Access to the right tools and right hardware for image development is important!
E.g., graphic designers like to have large, high-resolution monitors or multiple monitors Graphics Image Development: Graphics Image Development Still images are generated in two ways:
bitmaps (or raster-based)
vector-drawn Generating still images: Bitmap: Generating still images: Bitmap Bitmap - a matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer screen or printer Generating still images: Bitmap: Generating still images: Bitmap Example Generating still images: Bitmap: Generating still images: Bitmap Monochrome just requires one bit per pixel, representing black or white BMP – 16 KB Generating still images: Bitmap: Generating still images: Bitmap 8 bits per pixel allows 256 distinct colors BMP – 119KB Generating still images: Bitmap: Generating still images: Bitmap 16 bits per pixel represents 32K distinct colors (Most graphic chipsets now supports the full 65536 colors and the color green uses the extra one bit) BMP – 234 KB Generating still images: Bitmap: Generating still images: Bitmap 24 bits per pixel allows millions of colors BMP – 350KB Generating still images: Bitmap: Generating still images: Bitmap More bits provide more color depth, hence more photo-realism,
but require more memory and processing power
Graphics production software may capture in 24-bit color and convert to 8-bit Generating still images: Bitmap: Generating still images: Bitmap GIF and PNG formats use a 8-bit color table allowing up to 256 color GIF – 74KB PNG – 63KB Generating still images: Bitmap: Generating still images: Bitmap JPG preserves more color depth with 16 bits per pixel JPG – 19KB Generating still images: Bitmap: Generating still images: Bitmap Bitmaps are best for photo-realistic images or complex drawings requiring fine detail Generating still images: Bitmap: Generating still images: Bitmap Bitmaps picture and their suitability of use:-
Use the native Microsoft bmp format as a raw image that will later be processed. It faster to process.
Use JPEG, for photo sharing on the web because of its size and quality.
GIF is normally used for diagrams, buttons, etc., that have a small number of colours
It is also suitable for simple animation because it supports interlaced images.
PNG is almost equal to gif except that it didn’t support the animation format.
How to Create Bitmap Graphics : How to Create Bitmap Graphics Clip Art Drawn Capture Scan Generating still images: Vector-Drawn: Generating still images: Vector-Drawn Vector-drawn - created from geometric objects such as lines, rectangles, ovals, polygons using mathematical formulas
e.g., RECT 0,0,200,300,RED,BLUE says
“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.” Generating still images: Vector: Generating still images: Vector
Generating still images: Vector: Generating still images: Vector The first popular vector-drawn images were for computer-aided design (CAD)
Such as AutoCAD, for aiding engineers and artists in creating complex renderings
Graphic artists designing for print media use vector-drawn objects because they put rectangles and Bezier curves on paper without jaggies, exploiting high resolution printers Generating still images: Vector: Generating still images: Vector Macromedia Freehand, Corel Draw & Adobe Illustrator are vector-drawing applications
Macromedia Flash puts vector-drawing on the Web with a plug-in 3D Object: 3D Object 3D graphics tools, such as Macromedia Extreme3D, or Form-Z, typically extend vector-drawn graphics in 3 dimensions (x, y and z) 3D Object: 3D Object A 3D scene consist of object that in turn contain many small elements, such as blocks, cylinders, spheres or cones (described in terms of vector graphics)
The more elements, the finer the object’s resolution and smoothness. 3D Object: 3D Object Objects as a whole have properties such as shape, color, texture, shading & location.
A 3D application lets you model an object’s shape, then render it completely. 3D Object: 3D Object Modeling involves drawing a shape, such as a 2D letter, then extruding it or lathing it into a third dimension.
extruding : extending its shape along a defined path
lathing : rotating a profile of the shape around a defined axis Extrude and Lathe: Extrude and Lathe 3D Object: 3D Object Modeling also deals with lighting, setting a camera view to project shadows 3D Object: 3D Object Rendering : produces a final output of a scene and is more compute-intensive. Colors: Colors 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. Additive Color: Additive Color The additive reproduction process usually uses red, green and blue light to produce the other colors.
No light (or color) is black. All light (all colors) is white.
Subtractive Color: Subtractive Color Subtractive color explains the theory of mixing paints, dyes, inks, and natural colorants to create colors which absorb some wavelengths of light and reflect others. Colors: Colors Color models:
Different ways of representing information about color
CMYK HSB Model: HSB Model Based on human perception of color, describe three fundamental properties of color:
Saturation (or chroma)
Brightness - relative lightness or darkness of color, also measured as %
* There is no HSB mode for creating or editing images HSB Model: HSB Model Hue - color reflected from or transmitted through an object, measured on color wheel HSB Model: HSB Model Saturation (or chroma) - strength or purity of color (% of grey in proportion to hue) HSB Model: HSB Model Brightness - relative lightness or darkness of color, also measured as %
0% 50% 100% RGB Model: RGB Model Add red, green and blue to create colors, so it is an additive model.
Assigns an intensity value to each pixel ranging from 0 (black) to 255 (white)
A bright red color might have R 246, G 20, B 50 CMYK Model: CMYK Model Based on light-absorbing quality of ink printed on paper
As light is absorbed, part of the spectrum is absorbed and part is reflected back to eyes
Associated with printing; called a subtractive model
Four channels: Cyan (C ), magenta (M), yellow (Y) and black (K) In theory, pure colors should produce black, but printing inks contain impurities, so this combination produces muddy brown
K is needed to produce pure black, hence CMYK is four-color process printing Color : Color Color Gamut
Range of colors that a color system can display or print
Different models have different gamut (RGB has the smallest gamut, approximately) Color : Color Color Channel
Photoshop shows information about color elements in different channels
E.g., RGB has at least three channels; CMYK has at least four channels - at least, because Photoshop also permits “Alpha” channels for storing mask information
A mask lets part of an image be transparent so that other layers show through Graphic Files & Application Format: Graphic Files & Application Format Most popular formats:
JPEG (Joint-Photographic Experts Group)
GIF (Graphical Interchange Format)
PNG (Portable Network Graphic)
BMP, PSD, TIFF/TIF, TGA, EPS, PCX, ICO JPEG: JPEG For continuous tone images, such as full-color photographs
Supports more than 16 millions of color (24-bit)
Uses lossy compression (averaging may lose information) GIF: GIF For large areas of the same color and a moderate level of detail.
Supports up to 256 colors
Allows transparency and interlacing
Uses lossless compression PNG: PNG lossless, portable, well-compressed storage of raster images
patent-free replacement for GIF
also replace many common uses of TIFF
Support indexed-color, grayscale, and true color images + an optional alpha channel for transparency Other Formats: Other Formats BMP – Bitmap File Format.
Native bitmap file format of the Microsoft Windows environment.
PSD – Photoshop Document.
Native bitmap file format of the Adobe Photoshop graphical editing application.
TIFF – Tagged Image File Format.
Used to exchange documents between different applications and platforms. Other Formats: Other Formats TGA – Targa File Format.
An image format designed for systems using Truevision video boards
supported by MS-DOS platforms.
EPS – Encapsulated PostScript
file format. Adobe drawing format supported by most illustration and page layout programs. Other Formats: Other Formats PCX – ZSoft IBM PC Paintbrush file format.
One of the oldest bitmapped formats popularized by MS-DOS paint programs that first appeared in the early 1980's.
ICO – Icon file format.
Created by Microsoft for icons. Information Delivery: Information Delivery Graphics are used to convey information in multimedia products.
For example, a picture of an automobile engine is much more effective than text that merely describes it. Information Delivery: Information Delivery Graphics for information delivery include:
Charts and graphs
People Information Delivery: Information Delivery In each case, the image must be relevant to the overall product.
Image size, color in respect to the application and other images, and positioning must all be considered when using images. Information Delivery: Information Delivery Information Delivery: Information Delivery Information Delivery: Information Delivery Summary-Graphics: Summary-Graphics The computer generates still images as bitmaps and vector-drawn images.
Images can be incorporated in multimedia using clip arts, bitmap software, or by capturing, editing, or scanning images.
Creating 3-D images involves modeling, extruding, lathing, shading, and rendering.
Color is one of the most vital components of multimedia.