TypographyMultimedia & Webpage Design

1.01 Investigate typefaces and fonts.

Typefaces, Fonts, and Font Families

• A typeface is the basic design of a character.

• Typefaces can be divided into four main categories.– Serif– Sans Serif– Script– Decorative/Ornamental

Serif Typefaces

• Have attributes or strokes at the tips of the letters called serifs.

• Examples:

Bodoni Courier

Goudy Times New Roman

• Used for body text in printed publications. Business correspondence Book text Magazine article text Newspaper text Newsletter text

Recommended sizes for body text are 10 to 12 points.

k

Sans Serif Typefaces

There are no attributes (serifs) at the tips of the letters.

• Examples:• Arial Gill Sans• Berlin Sans Verdana

• Used for very large or very small text and for digital display.• Webpages On-screen display• Headings Tables• Captions Headlines

k

Serif vs Sans Serif Typefaces

Sans SerifThe ends of each character do not have attributes (serifs)

Decorative/OrnamentalTypefaces

• Designed strictly to catch the eye • Should be used sparingly.• Can be hard to read.

• Examples• Chiller Broadway• Webdings engravers MT

• Used for decoration.• Headlines on flyers or advertisements.• Webdings can be used for symbols in

logos.

Script Typefaces

• Appear to have been written by hand with a calligraphy pen or brush– Should never be used to key in all caps.

• Example

• French Script• Uses

• Formal Invitations• Place cards• Poetry • Announcements

Typeface Spacing

• Monospace• Proportional• Leading• Kerning• Tracking

Typeface Spacing

• Monospaced• Each letter takes up the same amount of

space regardless of the letter size.

Courier is monospaced

• Proportional– The amount of space each character takes

up is adjusted to the width of that character.– Therefore, an i is not as wide as an m and

receives less space.

Times New Roman is proportional

Proportional vs. Monospace

Leading

Look in the nook to find

the book tha t you

borrowed to read.

Leading (vertical spacing between lines of text)

Leading (vertical spacing between lines of text)

Kerning

• Horizontal spacing between pairs of letters

• Used to add or subtract space between pairs of letters to create a more visually appealing and readable text.

• BOOK – before kerning.

– after kerning the O’s.

Kerning, Leading, Tracking

LOOK in the nook to find

the book tha t you

b o r r o w e d t o r e a d .

Kerning (horizontal spacing between pairs of letters)

Leading (vertical spacing between lines of text)

Tracking (horizontal spacing between all characters in a large block of text.

Multimedia & Webpage Design

1.02 Investigate design principles and elements

Principles of Design

Color Terms

• Hue – a color.• Shade – a hue + black.

– CMYK and RGB colors can be made darker by adding black.

– The original color is not changed, it just becomes darker.

• Tint – a hue + white. – CMYK and RGB colors can be made lighter by adding

white.– The original color is not changed, it just becomes

lighter.• Saturation – the amount of the hue used.

The Six Principles of Design

• Alignment• Balance• Contrast• Proximity/Unity• Repetition/Consistency• White space

Alignment• Visual relationship between all of the

elements in a layout, even if the elements are far apart.

Symmetrical Balance

Asymmetrical Balance

Radial Balance

• With radial designs the elements radiate from or swirl around in a circular or spiral path.

Contrast• The use of big and small elements, black

and white text, squares and circles

Proximity/Unity• Grouping elements to demonstrate their

relationship to each other.

Repetition/Consistency• Repeat some aspect of the design

throughout the entire layout.

White Space• Negative or space empty of any color• Gives a design breathing room

Optical Center & Z-Pattern• Optical Center – the spot the eye first sees

when it encounters a page.– Place the most important design element

here.• Z-Pattern – the pattern eye follows when

scanning a page.1 2 3

Optical Center

Z-Pattern

DTP Design Features

Multimedia & Webpage Design

1.03 Demonstrate desktop publishing.

Special Features of Publications

• Bleed• Dropped Cap • Running

Headlines/Footers

• Pull Quote• Text Box• Watermark• Reverse text

Bleed• A print effect in which a

color, object or image appears to run off the edge of a page.

Dropped Cap• An enlarged character

at the beginning of a paragraph

• Drops below the line of text

Running Headlines/Footers• Running text at the top and/or bottom of a

document.

• Also called headers.

• Used for organization, page numbers, date, author, running title, etc.

Pull Quote• Quotation taken

directly from the body of the article.

• Used to draw attention.

• Often made larger than body text.

Text Box

• Container for text that can be placed and formatted independently of other text.

• Have borders that display when selected.

Reverse Text

• Text that is the opposite to what the reader is accustomed.

• Light text on a dark background.

• Often used in headlines to draw attention.

• Use sparingly!

Prototype

• A prototype, or mockup, is an example of how the final document should appear.

• Created using software or paper and pencil.

• Also called a “dummy” page.

Compression

• The greater the compression, the lower the quality

• Two types:– Lossless

• Reduces the file size without losing any pixel data

– Lossy • Alters and/or eliminates some data• The more the image is reduced, the more the

quality is degraded

PortabilityHow easily you can open, modify, and transmit the file across the internet?

Must be able to use in ANY Web Browser or Operating System.

Transparency

Image Formats

Multimedia & Webpage Design

2.01 Investigate Graphic Image Design.

GIF – Graphics Interchange Format

Animation – Standard format for animation on the Internet.

Transparency – yes

• Lossless compression

• Colors = 256 (8-bit)

• Most common format for:– Text – Clip art, animations,

icons, logos– Simple diagrams, line

drawings– Graphics with large blocks

of a single color– Graphics with transparent

areas – Images displayed on

computer screens and on websites.

Animated Gif

JPEG – Joint Photographic Experts Group

X Animation – No X Transparency – No • Lossy compression• Colors – 16.7 M (24-

bit)• High quality but larger

file size than a GIF

• Commonly Used For:– Desktop publishing

photographs– Photographs and natural

artwork– Scanned photographs– Emailing photographs– Digital camera

photographs

BMP - Bitmap

X Animation – No X Transparency – No • Uncompressed• 256 colors• Large file size - not

well suited for transfer across the Internet or for print publications

• Commonly Used For:– Editing raster graphics– Creating icons and

wallpaper– On-screen display

Icons

Computer Animation

Multimedia & Webpage Design

2.02 Develop Computer Animations

Morphing Animation• The term morphing comes from the word metamorphosis, which is the transformation of one thing into another.

• For example, a photograph of one person might gradually morph into a picture of another person.

Beginning Image

Ending Image

Finished Animation

Path Based Animation

• An object follows a path which is a line, or vector, inserted by the animator.

• A motion path can include curves, loops, and angles.

Stop Motion Animation

• Process of manipulating real-world objects and photographing them one frame at a time.

• Very popular method with the film industry until computer generated imagery became possible.

• Now used mainly in clay animation.• Example

– http://en.wikipedia.org/wiki/File:Moving_Penny.gif

Scrubbing

Dragging the playhead across the timeline in order to preview the animation.

LibraryStores frequently used graphics, movie clips, and buttons.

WAV (Waveform)

• The standard format for sound on computers running the Windows operating system.

• WAV files produce high-quality sound.• Generate large file sizes.

MP3

MP3 is a standard format for music files sent over the Internet that compresses music or other types of audio.

The compression process removes sounds that humans cannot hear.

To most listeners, MP3 files sound as good as WAV files.

Factors that influence the delivery of computer animations:

• Viewer’s bandwidth, or connection speed.

• Streaming rate• Playback rate Internet

(water is the data)

Connection Type determines how much data can transfer to the network.

Streaming and Playback Rate• Streaming rate is the rate in frames

per second at which videos can be downloaded or transferred to a computer and is determined by:– The viewer’s network connection

speed.– The content of the video file being

downloaded.• Playback rate is the rate in frames per

second at which the video plays.