Web Design, 4 th Edition 5 Typography and Images

Chapter Objectives  Explain Web page typography issues  Discuss effective use of Web page images  Describe image file formats  Discuss how to prepare Web-ready images Chapter 5: Typography and Images2

Typography  The appearance and arrangement of characters that make up your text –Typeface –Type style –Type size –Font Chapter 5: Typography and Images3

Typography Chapter 5: Typography and Images4

Typography  Sans serif fonts are a popular choice of many Web designers  Serifs do not always play a large role in the readability of online text  Web-safe fonts are specifically designed for online reading Chapter 5: Typography and Images5

Typography Chapter 5: Typography and Images6

Typography  Font size can be expressed as an absolute size or a relative size  Absolute font sizes allow designers to maintain control over the size of page text  Relative font sizes allow visitors to control the font sizes in their browsers  Not all fonts are available on all computer operating systems  Font selection can contribute to a specific mood Chapter 5: Typography and Images7

Typography Chapter 5: Typography and Images8

Typography  Image Text –Some image-editing software packages, such as Adobe Photoshop CS5, contain features that allow you to create and edit horizontal or vertical text as part of an image Chapter 5: Typography and Images9

Web Page Images  Images can: –Add value to your Web site –Match or complement your Web site’s color scheme –Accurately represent the content to which they link, if used for image mapping –Contribute to the overall mood you want to set and support the site’s message Chapter 5: Typography and Images10

Sources for Images  Digital camera –Takes a digital image and records it electronically Chapter 5: Typography and Images11

Sources for Images  Scanners –Flatbed scanner –Sheet-fed scanner –Drum scanner Chapter 5: Typography and Images12

Sources for Images  Guidelines for scanning –Scan at the size at which they will be displayed –Scan illustrations at 256 colors –Save images in Tagged Image File Format (TIFF) Chapter 5: Typography and Images13

Sources for Images  Screen capture software and Illustration software –SnagIt –!QuickScreen Capture –FullShot –Adobe Illustrator –Xara Xtreme –Microsoft Expression Design 4 Chapter 5: Typography and Images14

Sources for Images Chapter 5: Typography and Images15

Image File Formats  Image files are grouped into two categories: –Raster –Vector  Web pages mostly display three formats –Graphics Interchange Format (GIF) –JPEG File Interchange Format (JFIF) –Portable Network Graphics (PNG) Chapter 5: Typography and Images16

Image File Formats Chapter 5: Typography and Images17

Graphics Interchange Format (GIF)  Original graphics format used on the Web  Display up to 256 colors  Interlaced GIF displays image in a sequence of passes –Each pass displays the image at a higher resolution  You can turn off a single color in a transparent GIF Chapter 5: Typography and Images18

Graphics Interchange Format (GIF) Chapter 5: Typography and Images19

Joint Photographic Experts Group (JPEG)  Commonly referred to as the JPEG image format  Best suited for digital photographs on the Web that are more than 256 colors  A progressive JPEG displays on the screen in a sequence of passes with progressively improved image quality Chapter 5: Typography and Images20

Joint Photographic Experts Group (JPEG) Chapter 5: Typography and Images21

Portable Network Graphics (PNG) Format  Developed as a free open source image format to replace the GIF format –Greater range of colors than the GIF format –Superior transparency capabilities  Undecided whether PNG images will replace GIF images  Lack of browser support Chapter 5: Typography and Images22

Web-ready Images  Crop images to remove unwanted subject matter Chapter 5: Typography and Images23

Web-ready Images  Optimizing Your Images for Size and Quality –Lossy vs. Lossless compression Chapter 5: Typography and Images24

Web-ready Images  Guidelines for preparing Web-ready images –Determine the appropriate image file format –Refine your images using enhancement features –Refine and edit your image files in a lossless compression format, and then save them one time in a lossy compression format –Use optimization features Chapter 5: Typography and Images25

Chapter Summary  Explain Web page typography issues  Discuss effective use of Web page images  Describe image file formats  Discuss how to prepare Web-ready images Chapter 5: Typography and Images26

Web Design, 4 th Edition 5 Typography and Images