1 / 47

Typography

Typography. Multimedia & Webpage Design 1.01 Investigate typefaces and fonts. A typeface is the basic design of a character. Typefaces can be divided into four main categories. Serif Sans Serif Script Decorative/Ornamental. Typefaces, Fonts, and Font Families.

shilah
Download Presentation

Typography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Typography Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.

  2. A typeface is the basic design of a character. Typefaces can be divided into four main categories. Serif Sans Serif Script Decorative/Ornamental Typefaces, Fonts, and Font Families

  3. 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. Serif Typefaces k

  4. 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 Sans Serif Typefaces k

  5. Serif vs Sans Serif Typefaces Sans Serif The ends of each character do not have attributes (serifs)

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

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

  8. Typeface Spacing • Monospace • Proportional • Leading • Kerning • Tracking

  9. 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 iis not as wide as an m and receives less space. • Times New Roman is proportional

  10. Proportional vs. Monospace

  11. Leading Look in the nook to find the book that you borrowed to read. Leading (vertical spacing between lines of text) Leading (vertical spacing between lines of text)

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

  13. Kerning, Leading, Tracking LOOK in the nook to find the book that youborrowed to read. 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.

  14. Principles of Design Multimedia & Webpage Design 1.02 Investigate design principles and elements

  15. ColorTerms • 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.

  16. The Six Principles of Design • Alignment • Balance • Contrast • Proximity/Unity • Repetition/Consistency • White space

  17. Alignment • Visual relationship between all of the elements in a layout, even if the elements are far apart.

  18. Symmetrical Balance Asymmetrical Balance

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

  20. Contrast • The use of big and small elements, black and white text, squares and circles

  21. Proximity/Unity • Grouping elements to demonstrate their relationship to each other.

  22. Repetition/Consistency • Repeat some aspect of the design throughout the entire layout.

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

  24. Optical Center & Z-Pattern 1 2 3 Z 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.

  25. DTP Design Features Multimedia & Webpage Design 1.03 Demonstrate desktop publishing.

  26. Special Features of Publications • Bleed • Dropped Cap • Running Headlines/Footers • Pull Quote • Text Box • Watermark • Reverse text

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

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

  29. Pull Quote Text Box • Quotation taken directly from the body of the article. • Used to draw attention. • Often made larger than body text. • Container for text that can be placed and formatted independently of other text. • Have borders that display when selected.

  30. 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!

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

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

  33. Portability How 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

  34. Image Formats Multimedia & Webpage Design 2.01 Investigate Graphic Image Design.

  35. 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. AnimatedGif

  36. JPEG – Joint Photographic Experts Group • Animation – No • 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

  37. BMP - Bitmap • Animation – No • 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

  38. Computer Animation Multimedia & Webpage Design 2.02 Develop Computer Animations

  39. MorphingAnimation • 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

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

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

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

  43. Library Stores frequently used graphics, movie clips, and buttons.

  44. WAV (Waveform) • The standard format for sound on computers running the Windows operating system. • WAV files produce high-quality sound. • Generate large file sizes.

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

  46. Internet (water is the data) Connection Type determines how much data can transfer to the network. Factors that influence the delivery of computer animations: • Viewer’s bandwidth, or connection speed. • Streaming rate • Playback rate

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

More Related