1 / 27

Mastering Web Typography and Image Essentials

Dive into typography and images for effective web design. Learn about font selection, image formats, and optimization techniques to create engaging web content.

sondra
Télécharger la présentation

Mastering Web Typography and Image Essentials

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

  2. Typography • The appearance and arrangement of characters that make up your text • Typeface • Type style • Type size • Font Chapter 5: Typography and Images

  3. Typography Chapter 5: Typography and Images

  4. 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 fonts are specifically designed for online reading Chapter 5: Typography and Images

  5. Typography Chapter 5: Typography and Images

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

  7. Typography Chapter 5: Typography and Images

  8. Typography • Image text • Converts text into an image so that it displays properly Chapter 5: Typography and Images

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

  10. Sources for Images • Digital camera • Takes a digital image and records it electronically Chapter 5: Typography and Images

  11. Sources for Images • Scanners • Flatbed scanner • Sheet-fed scanner • Drum scanner Chapter 5: Typography and Images

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

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

  14. Sources for Images Chapter 5: Typography and Images

  15. Image File Formats • Image files are grouped into two categories: • Raster • Vector • Web pages mostly display three formats • Graphics Interchange Format (GIF) • Joint Photographic Experts Group (JPEG) • Portable Network Graphics (PNG) Chapter 5: Typography and Images

  16. Image File Formats Chapter 5: Typography and Images

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

  18. Graphics Interchange Format (GIF) Chapter 5: Typography and Images

  19. Joint Photographic Experts Group (JPEG) • 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 Images

  20. Joint Photographic Experts Group (JPEG) Chapter 5: Typography and Images

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

  22. Web-ready Images • Crop images to remove unwanted subject matter Chapter 5: Typography and Images

  23. Web-ready Images • Optimizing Your Images for Size and Quality • Lossy vs. Lossless compression Chapter 5: Typography and Images

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

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

More Related