1. Web Design, 4 th 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 –Type style –Type size –Font Chapter 5: Typography and Images3

4. Typography Chapter 5: Typography and Images4

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

6. Typography Chapter 5: Typography and Images6

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

8. Typography Chapter 5: Typography and Images8

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

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

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

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

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

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

15. Sources for Images Chapter 5: Typography and Images15

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

17. Image File Formats Chapter 5: Typography and Images17

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

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

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

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

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

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

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

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

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

27. Web Design, 4 th Edition 5 Typography and Images