Text and ImagePertemuan 01

Matakuliah : L0182 / Web & Animation Design

Tahun : 2008

Bina Nusantara

Learning Outcomes

Pada akhir pertemuan ini, diharapkan mahasiswa akan

mampu :• Menunjukkan penggunaan Text dan Image pada Aplikasi

Multimedia

Bina Nusantara

Outline Materi

• Definition• Fonts effects• Advantages and Disadvantages of Using Text• Hypertext• Bitmap and Raster Images• Advantages and Disadvantages of Using Images

Bina Nusantara

Text

• Text is the form of words, sentences and paragraphs is used to communicate thoughts, ideas and facts in nearly every aspect of our lives.

• Text elements :– Alphabet characters : A - Z– Numbers : 0 - 9– Special characters : Punctuation [. , ; ‘ …] , Sign or Symbols [* &

^ % $ £ ! /\ ~ # @ .…]

• Multimedia products depends on text for many things :– To explain how the multimedia products work– To guide the user in navigating through the multimedia products– To deliver the information for which the multimedia products was

designed

Bina Nusantara

Typefaces and Fonts

• Typefaces : a family of graphics characters that usually includes may type sizes and styles.

• Fonts : a collection of characters of a single size and style belonging to a particular typeface family.

Ascender : an upstroke on a character Descender : the down stroke below the baseline of a character Leading : spacing above and below a font or Line spacing Tracking : spacing between characters Kerning : space between pairs of characters, usually as an

overlap for improvement appearance

Bina Nusantara

Tracking, Kerning, and Leading

AvUnkerned

vAKerned

Reading Line OneReading Line One

Reading Line OneReading Line OneLeading

Bina Nusantara

Fonts Effects• A numbers of effects that are useful for bringing viewer’s attention to

content :– Case : UPPER and lower letter

– Bold, Italic, Underline, superscript or subscript

– Embossed Embossed or ShadowShadow

– CCoolloouurrss

• Font Anatomy

I D xhpBaseline

Serif

Shoulder

Counter

Mean line

Ascender

DescenderSet

width

X-height

Cap height

Point size

Bina Nusantara

• Advantages– Is relatively inexpensive to produce– Present abstract ideas effectively– Clarifies other media– Provides confidentiality– Is easily changed or updated

• Disadvantages– Is less memorable than other visual media– Requires more attention from the user than other media– Can be cumbersome

Advantages and Disadvantages of Using Text

Bina Nusantara

Hypertext

• Hypertext is a computer-based text retrieval system that enables a user to access particular locations in web pages or other electronic documents.

A

FED

CB

Bina Nusantara

• Image is a visual representation of some information that can be displayed on a computer screen or printed out.

• Images come in a variety of forms :– Photographs– Paintings– Maps, etc.

Image

Bina Nusantara

• Images can be generally divided into two formats :– Bitmap or Raster images– Draw-type or Vector graphics or Metafile images

• A bitmap is a data matrix that describes the characteristics of all the pixels making up an image.

• A 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.

Image Types

Bina Nusantara

Bitmap Images

• Each pixel in the image contains information about the color to be displayed. Each pixel can be in a specific colour and each pixel consists of two or more colours.

• The range of these colours is known as the colour depth. Colour depth is measured in bits per pixel.

• More colour per pixel bigger image size• Bitmap images have a fixed resolution and cannot be

resized without losing image quality. • Common bitmap-based formats are JPEG, GIF, TIFF,

PNG, PICT, and BMP.

Bina Nusantara

Colour Depth• 1 bit per pixel = 2 colours

(monochrome)• 2 bits per pixel = 4 colours• 4 bits per pixel = 16 colours• 8 bits per pixel = 256 colours

– Generally good enough for colour images

• 16 bits per pixel = 65536 colours– Better quality for photograph-

like images, also known as high colour

• 24 bits per pixel =>16 million possible colours– Used to recreate photo

realistic images, also known as true colour

• Width of the images measured in pixels

• Height of the images measured in pixels

• Colour depth is the number of bits used for color measured in bits per pixel

• Remember:

– 1024 bytes = 1 kilobyte (KB)

– 1024 kilobytes = 1 megabyte (MB)

8bytesinsize

depthcolourheightwidth

Bina Nusantara

Advantages and Disadvantages of Using Bitmap Images

• Advantages– Convey detail of information quickly– Real life

• Disadvantages– Depend on a Resolution– Effect to the image quality – Size file is big

True Colour (24 bits)8 bits4 bits1 bit

Bina Nusantara

Vector Images• Vector images are stored as the set of graphic primitives

required to represent the image• A graphic primitive is a simple graphic based on drawing

elements or objects such as shape and consists of a set of commands (mathematical equations)– e.g. square, line, ellipse, arc, etc.

• Each primitive object has various attributes that go to make up the entire image– e.g. x-y location, fill colour, line colour, line style, etc.

• Vector image or vector graphics can be resized without losing the integrity of the original image.

• Common bitmap-based formats are WMF, SVG, CGM, PS, PDF, DFX, and EPF.

Bina Nusantara

Advantages and Disadvantages of Using Vector Images

• Advantages– Relatively small amount of data required to represent the image.– Therefore, it does not required a lot of memory to store– Easier to manipulate

• Disadvantages– Limited level of detail than can be presented in an image

Bina Nusantara

Bitmap and Vector Images

Vector Images

Bitmap Images

Bina Nusantara

Advantages and Disadvantages of Using Images

• Advantages– Convey a lot of information quickly– Add visual simulation and colour– Can communicate across language borders– Enhance other media

• Disadvantages– Do not provide in-depth explanations

• Graphics rarely suffice to convey a whole message in business, technical or safety settings

– Can be misinterpreted• Graphics should be used carefully to make sure the message is not

ambiguous or cryptic