1 / 46

Ch 5. Typography and Graphics

Ch 5. Typography and Graphics. ISC325. Chapter 5 Objectives. The basic principles of good typography on the Web The Web variables that limit typographic control Strategies for Web Typography The Web-useable graphics file formats The procedures to prepare graphics for the Web

finn
Download Presentation

Ch 5. Typography and Graphics

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. Ch 5. Typography and Graphics ISC325

  2. Chapter 5 Objectives • The basic principles of good typography on the Web • The Web variables that limit typographic control • Strategies for Web Typography • The Web-useable graphics file formats • The procedures to prepare graphics for the Web • Various types of graphics file compression • Typography and graphics tips and techniques

  3. Typography • The appearance and arrangement of characters that make up your text • Typeface • Type style • Type size • Font • Display type is for headings and subheads • Body type is for main content • Smaller than display type

  4. Typography Typeface: Arial Type style: roman, italic Type size: 12 point

  5. Typography • Use a sans serif typeface for short paragraphs, headings, lists, and type on buttons • Use serif type for large blocks of text and pages that are intended to be printed and then read • Serifs are short lines or ornaments on each character

  6. Typography

  7. Typography • Body type should be 10 to 14 points • Avoid excessive use of caps • Create contrast between page and background • Use no more than three fonts per page • Do not create large text blocks • Limit line length to 8 to 10 words

  8. Typography Tips • Override default font settings <FONT FACE=“Arial, Helvetica, Verdana, Geneva”>Typography</FONT>

  9. Typography Tips • Graphic Typography • Converts text into a graphic so it displays properly

  10. Typography Tips • Antialiasing Type • Technique used to smooth the appearance of graphics or type • Eliminates jagged edges • Web graphics programs generate antialiased type • Only apply to type larger than 10 points

  11. Typography Tips

  12. Selecting Styles and Type • Apply styles to elements sharing the same HTML tag • Define type size in points • Specify paragraph leading • Control tracking and kerning

  13. Graphics • Choose quality, relevant photographs to add value • Photographs and illustrations should match or complement the site’s color scheme • Photographs and illustrations for image mapping should accurately represent the content they link to

  14. Sources for Graphics • Digital camera • Takes a digital image and stores it electronically

  15. Sources for Graphics • Scanners • Flatbed scanner • Sheet-fed scanner • Drum scanner

  16. Sources for Graphics • Guidelines for scanning • Scan at the size at which they will be displayed • Scan images at 72 dots per inch (dpi) • Scan illustrations at 256 colors, photos at higher color settings. • Save images in Tagged Image File Format (TIFF)

  17. Sources for Graphics • Illustration software • Adobe Illustrator • Macromedia Freehand • Vector graphics • Raster graphics or bitmaps

  18. Graphics File Formats

  19. Graphics Interchange Format (GIF) • Original graphics format used on the Web • Display up to 256 colors • Three types of GIFs: GIF87A, GIF89A, Animated GIF • GIF 87A • Interlaced GIF displays image in a sequence of passes • Each pass displays the image at a higher resolution

  20. Graphics Interchange Format (GIF)

  21. Interlaced and Noninterlaced GIFs • Interlacing refers to the way the GIF is saved by the graphics software. • Normally, with a noninterlaced GIF the image is saved one line at a time, starting from the top of the graphic and moving downward. • With interlaced GIFs, the image is saved and retrieved “stepwise.” • for example, every fifth line of the image might appear first, followed by every sixth line, and so forth through the remaining rows • Interlacing is an effective format if you have a large graphic and want to give users a preview of the final image as it loads.

  22. top appears first Image appears one line at a time entire image is retrieved Noninterlaced Graphic This figure shows how a noninterlaced GIF appears as it is slowly retrieved by the Web browser. If the graphic is large, it might take several minutes for the entire image to appear, which can frustrate the visitors to your Web page.

  23. a rough image appears first image starts to show more detail final image is crisp and detailed Interlaced Graphic This figure shows the effect of interlacing, which is when the graphic starts out as a blurry representation of the final image, then gradually comes into focus-unlike the noninterlaced graphic, which is always a sharp image as it’s being retrieved, although an incomplete one.

  24. Transparent GIF • Pick colors from the color lookup table of the GIF to be transparent by using image-editing software like Photoshop http://www.webstyleguide.com/graphics/gifs.html

  25. Graphics Interchange Format (GIF) • GIF 89A • Features capabilities to be interlaced, transparent, and animated • Halo effect

  26. Animated GIF • Combine multiple GIF images into a single file to create animation • Animated GIFs are an effective way to compose slide shows or to simulate motion. • Animated GIF files are typically larger than static GIF images. • The use of animated GIFs can greatly increase the size of a Web page. • Be careful not to overwhelm the user with animated images.

  27. fellow1.gif fellow2.gif fellow3.gif • What do you need to make an animated GIF? • A series of pictures (GIFs ) that make up the frames of the animation • A program that will put the GIFs together and display them in the order you specify. Animated GIF • http://www.wigglebits.com/animation.html

  28. Animated GIF Programs This figure shows a list of programs available on the Web that you can use to create your own animated GIFs.

  29. Animated GIF Collections If you don’t want to take the time to create your own animated GIFs, many animated GIF collections are available on the Web. This figure shows a list of a few of them.

  30. Graphics Interchange Format (GIF) • Compressing the file sizes ensures quicker transfers • GIF compression is lossless • Limit physical size of image • Create image with solid colors • Minimize bit depth • Utilize Adobe ImageReady to optimize the image

  31. Joint Photographic Experts Group (JPEG) • Best suited for photographs on the Web • Not suggested for solid color images • Can be displayed with millions of colors • Control the size of a JPEG with the degree of image compression • But, for a image covering large sections with a single color, the GIF format will be better. • A progressive JPEG displays on the screen in a sequence of passes

  32. Joint Photographic Experts Group (JPEG)

  33. Joint Photographic Experts Group (JPEG) • JPEG compression is lossy • Greater compression equals lower image quality • Wide level of browser support

  34. Portable Network Graphics (PNG) Format • Expected to eventually replace GIFs • Superior transparency capabilities • Better-quality interlacing capabilities • Greater range of color depths • Capability of embedding text in images • Lossless compression

  35. Preparing and Optimizing Graphics • Crop images to remove unwanted subject matter

  36. Preparing and Optimizing Graphics • Adjust colors and image size

  37. Graphics Tips and Techniques • Thumbnails • Version of an image that has been greatly reduced in size • Allows quick preview of an image • Thumbnail is normally a link to the full-size image

  38. Graphics Tips and Techniques

  39. Graphics Tips and Techniques • The LOWSRC Attribute • Gives a quick preview of the original image • Browser loads a lower-quality image, followed by a high-quality image over it • The lower-quality image loads only when the page is first opened • Code Example: • <img src=“image.jpg" alt=“a picture of a house" lowsrc=“gifimage.gif" height=238 width=350>

  40. Graphics Tips and Techniques • Drop Shadow • Creates a 3-D effect for both text and images • Be consistent with all shadows throughout your Web site

  41. Graphics Tips and Techniques • Sidebar • Tiles or repeats down the length of the page • Used mostly for navigation bars • Consistent location • Content in sidebar distinctly separate from main content

  42. Graphics Tips and Techniques

  43. Graphics Tips and Techniques • Image Map • Attractive alternative to hyperlinked text • Hot spots link to a specific URL when clicked • Most Web Authoring software includes mapping capabilities

  44. Graphics Tips and Techniques • ALT Attribute • Description of images for viewers with graphics turned off • Especially important for image maps <IMG SRC=“inflation.gif” ALT=“Inflation Figures for 2000-2005”>

  45. Summary of File Formats • Uses for GIF and JPEG files • Gif files • The most widely supported graphics format on the Web • Supports transparency and interlacing • JPEG • Huge compression rations: faster download speeds • Excellent for most photographs and complex images • Supports full-color (24-bit, “true color”) images

  46. Guidelines for the use of graphics • Use small images that load quickly • Provide a text-only option • When using color graphics, minimize the number of colors that are used in a single image • Include ALT tags for images. Display alternate text for each image using HTML’s ALT feature • If images or icons are used as links, provide a redundant text link

More Related