1. Web Design, 3 rd Edition 5 Typography and Images

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

3. Typography  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 More on Web

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

5. Typography  Sans serif fonts are a popular choice of many Web designers –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 large role 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 Images7

8. 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 Images8 More on Web

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 type displays on a Web page  Three variables affecting the extent of control 1.operating systems – view pages on different platforms. –Windows, Macintosh 2.monitor resolution settings – view pages at different resolution settings 3.browser settings – default Times New Roman typeface, in 12-point type size.

11. Typography Tips  Override default font settings –specified typeface must reside in viewer’s computer Typography More on Web

12. Typography Chapter 5: Typography and Images12 More on Web Font choices contribute to a serious mood at an investment site Font choices contribute to a creative mood at a Web design site

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 added to image

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

15. Your Turn! (page 138) Exploring the Effective Use of Web Page Images 1.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 home page and at least three underlying pages at each site:scsite.com/web3e/ch5/ a.NASA Kids' ClubNASA Kids' Club b.NOAA Ocean ExplorerNOAA Ocean Explorer c.AICPAAICPA d.Lane Home FurnishingsLane Home Furnishings 2.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? 3.Write a report that summarizes your review. Be prepared to discuss your report in class.

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

17. Your Turn! (page 139) Exploring Digital Cameras 1.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 new digital cameras:scsite.com/web3e/ch5/ a.BizrateBizrate b.ShopzillaShopzilla c.NexTagNexTagNexTagNexTag 2.Review three cameras 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. 3.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. Choose one of the three cameras most suitable for your Web design projects. Give the reasons for your choice.

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

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 Images20

21. Sources for Images  Screen capture software and Illustration software –SnagItSnagIt –!QuickScreen Capture!QuickScreen Capture –FullShotFullShot –Adobe IllustratorAdobe Illustrator –Xara XtremeXara Xtreme –Expression DesignExpression Design Chapter 5: Typography and Images21

22. Sources for Images Chapter 5: Typography and Images22 Screen shot of open Microsoft Excel 2007 workbook and chart sheet inside the screen capture software window Illustration software is used to draw shapes, lines, and curves and then combine them into an image

23. Image File Formats  Image files are grouped into two categories: 1.Vector graphics – images defined by mathematical statements resized without degrading quality 2.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 Images23

24. Image File Formats Chapter 5: Typography and Images24

25. Graphics File Formats  Web pages mostly display three formats 1.Graphics Interchange Format (GIF) 2.Joint Photographic Experts Group (JPEG) 3.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 effect border of image remains after background has been removed using the transparency capability (antialiased)

29. Graphics Interchange Format (GIF)  Compressing the file sizes ensures quicker transfers –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 imageAdobe ImageReady

30. Graphics Interchange Format (GIF) Chapter 5: Typography and Images30 More on Web GIFs are most suitable for basic, solid-color images, such as cartoons, diagrams, or navigation buttons

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 in antialiased type smooth jagged 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 1.Standard 2.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) Chapter 5: Typography and Images35 JPEG image file format is appropriate for photographs or photo-like art

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 Images36

37. Web-ready Images  Crop images to remove unwanted subject matter Chapter 5: Typography and Images37 More on Web selected portion of image to crop

38. Web-ready Images  Optimizing Your Images for Size and Quality –Lossy vs. Lossless compression Chapter 5: Typography and Images38 Very High quality setting medium quality setting High quality setting low quality setting File format and compression options File size, download speed and image quality values

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

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

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

42. Web Design, 3 rd Edition 5 Typography and Images