Chapter Objectives

2. Chapter Objectives • Explain Web page typography issues • Discusseffectiveuse of Web page images • Describe image fileformats • Discuss how to prepareWeb-readyimages Chapter 5: Typography and Images

3. Typography More on Web • The appearance and arrangement of characters that make up your text • Typeface – actual design of the type • Times New Roman, Arial, Garamond • Type style – variations in form (italic, bold) • Type size – measured in points (72 points = 1 inch) • Font – combined features of typeface and type style • Display type is for headings and subheads • Body type is for main content • Smaller than display type

4. Typography More on Web Chapter 5: Typography and Images

5. Typography • Sans serif fonts are a popular choice of many Webdesigners • 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 do not always play a largerole in the readability of online text • Serifs are short lines or ornaments on each character • Web fonts are specifically designed for online reading

6. Typography serifs

7. Typography Chapter 5: Typography and Images

8. Typography More on Web • Font size can be expressed as an absolute size or a relative size • Absolute font sizes allowdesigners to maintaincontrol 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 operatingsystems • Font selection can contribute to a specific mood Chapter 5: Typography and Images

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

10. Extent of Control • limited control over the way typedisplays on a Web page • Three variables affecting the extent of control • operating systems – view pages on different platforms. • Windows, Macintosh • monitor resolution settings – view pages at different resolution settings • browser settings – default Times New Roman typeface, in 12-point type size.

11. Typography Tips More on Web • Override default font settings • specified typeface must reside in viewer’s computer <FONT FACE=“Arial, Helvetica, Verdana, Geneva”>Typography</FONT>

12. Typography More on Web Font choices contributeto a serious mood at aninvestment site Font choices contributeto a creative mood at aWeb design site Chapter 5: Typography and Images

13. Typography • Image Text • Converts text into a graphic so it displays properly • drawbacks • load time • not visible if graphics turned off in browser • can not be searched by search engines Text addedto image

14. Web Page Images • Images can: • Add value to your Web site • Match or complement your Web site’s colorscheme • Accurately represent the content to which they link, if used for imagemapping • Contribute to the overall mood you want to set and support the site’s message Chapter 5: Typography and Images

15. Your Turn! (page 138)Exploring the Effective Use of Web Page Images • Visit the Web Design Chapter 5 Online Companion Web page (scsite.com/web3e/ch5/ ) and click links in the Your Turn section to the following sites to review the homepage and at least threeunderlyingpages at each site: • NASA Kids' Club • NOAA Ocean Explorer • AICPA • Lane Home Furnishings • Review how the site uses images. Do the images add value? Do they match or complement the color scheme? If image maps are used, do the images accurately represent their links' target pages? Do the images contribute to the overall mood of the site and promote the site's message? • Write a report that summarizes your review. Be prepared to discuss your report in class.

16. Sources for Images More on Web More on Web • Digital camera • Takes a digital image and records it electronically Chapter 5: Typography and Images

17. Your Turn! (page 139) Exploring Digital Cameras • Visit the Web Design Chapter 5 Online Companion Web page (scsite.com/web3e/ch5/ ) and click links in the Your Turn section to the following sites to shop for newdigitalcameras: • Bizrate • Shopzilla • NexTagNexTag • Reviewthreecameras using information from each site: a low-cost digital camera for less than $200, a medium-priced camera in the range of $200 to $500, and a camera that costs more than $500. • Summarize your research in a report. Use a table to compare camera features and cost. Assume that, as a professional Web designer, you often shoot digital images for your Web design projects. Chooseone of the three cameras mostsuitable for your Web designprojects. Give the reasons for your choice.

18. Sources for Images More on Web • Scanners • Flatbed scanner • Sheet-fed scanner • Drum scanner Chapter 5: Typography and Images

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

20. Sources for Images • 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 • Save images in Tagged Image File Format (TIFF) Chapter 5: Typography and Images

21. Sources for Images • Screen capture software and Illustration software • SnagIt • !QuickScreen Capture • FullShot • Adobe Illustrator • Xara Xtreme • Expression Design Chapter 5: Typography and Images

22. Sources for Images Screen shot of open MicrosoftExcel 2007 workbook and chart sheet inside the screencapture software window Illustration software is usedto draw shapes, lines, andcurves and then combinethem into an image Chapter 5: Typography and Images

23. Image File Formats • Image files are grouped into two categories: • Vector graphics – images defined by mathematical statements • resized without degrading quality • Raster graphics or bitmaps – defined by rows and columns of different colored pixels • illustration will be created and manipulated as a vector graphic, then converted to a raster graphic. Chapter 5: Typography and Images

24. Image File Formats Chapter 5: Typography and Images

25. Graphics File Formats • Web pages mostly display three formats • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG)

26. Graphics Interchange Format (GIF) • Original graphics format used on the Web, created by CompuServe • Display up to 256 colors (8-bit) • GIF 87A • Interlaced GIF displays image in a sequence of passes • Each pass displays the image at a higher resolution • changes from blurry to distinct • You can turn off a single color in a transparent GIF

27. Graphics Interchange Format (GIF) non-interlaced GIF interlaced GIF

28. Graphics Interchange Format (GIF) • GIF 89A • Features capabilities to be interlaced, transparent, and animated • Halo effectborder of imageremains afterbackground hasbeen removedusing thetransparencycapability(antialiased)

29. Graphics Interchange Format (GIF) • Compressing the file sizes ensures quickertransfers • GIF compression is lossless • all data retained when image is compressed • Limit physical size of image • Create image with solid colors • Web-safe palette • Minimize bit depth • Utilize Adobe ImageReady to optimize the image

30. Graphics Interchange Format (GIF) More on Web GIFs are most suitablefor basic, solid-color images, such as cartoons,diagrams, or navigationbuttons Chapter 5: Typography and Images

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

32. Typography Tips additional pixels inantialiased type smoothjagged edges

33. 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 • 24-bit RGB color • 8-bit monitor - colors are dithered • 2 types of JPEGs • Standard • progressive JPEG displays on the screen in a sequence of passes • can specify number of passes

34. Joint Photographic Experts Group (JPEG) • JPEG compression is lossy • Greater compression equals lower image quality • redundant data is lost during compression • can control level of compression • determine acceptable balance between file size and image quality • Wide level of browser support

35. Joint Photographic Experts Group (JPEG) JPEG image file format is appropriate for photographsor photo-like art Chapter 5: Typography and Images

36. Portable Network Graphics (PNG) Format • Developed as a free open source image format to replace the GIF format • Superior transparency capabilities • Better-quality interlacing capabilities • Greater range of color depths • Capability of embedding text in images • Lossless compression • Undecided whether PNG images will replace GIF images • Lack of browser support Chapter 5: Typography and Images

37. Web-ready Images More on Web • Crop images to remove unwanted subject matter selected portionof image to crop Chapter 5: Typography and Images

38. Web-ready Images • Optimizing Your Images for Size and Quality • Lossy vs. Lossless compression Very High qualitysetting File formatand compressionoptions High qualitysetting medium qualitysetting low qualitysetting File size, download speedand image quality values Chapter 5: Typography and Images

39. Web-ready Images • Guidelines for preparing Web-ready images • Determine the appropriate image file format • Refine your images using enhancementfeatures • Refine and edit your image files in a losslesscompressionformat, and then save them one time in a lossy compression format • Useoptimizationfeatures Chapter 5: Typography and Images

40. Chapter Summary • Explain Web page typography issues • Discusseffective use of Web page images • Describe image file formats • Discuss how to prepare Web-ready images Chapter 5: Typography and Images

41. Case Study # 5 • Case Study Page 156 • Do steps 1-6 creating a multiple page Word document. • See assignment web page for details.