Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Spatial anti-aliasing wikipedia , lookup
Computer vision wikipedia , lookup
Portable Network Graphics wikipedia , lookup
3D television wikipedia , lookup
Indexed color wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Image editing wikipedia , lookup
5 Typography and Images Web Design, 5th Edition Chapter Objectives Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images Chapter 5: Typography and Images 2 Webpage Typography Issues The appearance and arrangement of characters applied to text – – – – Typeface Type style Type size Font Chapter 5: Typography and Images 3 Webpage Typography Issues A typeface is a group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thickness Chapter 5: Typography and Images 4 Webpage Typography Issues Chapter 5: Typography and Images 5 Webpage Typography Issues Serif fonts have a short line extending from the top or bottom of a character, called a serif Sans serif fonts do not have serifs Web designers often vary serif and sans serif fonts for heading and body text fonts to create visual contrast Chapter 5: Typography and Images 6 Webpage Typography Issues Chapter 5: Typography and Images 7 Webpage Typography Issues A font family, or font stack, includes a default font and backup font types if a browser cannot locate the default font Embedded fonts are included in the code for the webpage and must be downloaded to the user’s device before the webpage text can appear Chapter 5: Typography and Images 8 Webpage Typography Issues Font size can be expressed as an absolute size or a relative size Absolute font sizes do not change when visitors change their browser font size settings Relative font sizes adjust to the user’s screen and resolution Not all fonts are available on all computer operating systems Font selection can contribute to a specific mood Chapter 5: Typography and Images 9 Webpage Typography Issues Chapter 5: Typography and Images 10 Webpage Typography Issues Image Text – Some image-editing software and apps contain features that allow you to create images from text or add text to an image Chapter 5: Typography and Images 11 Webpage Images Images can: – Add value to your website – Match or complement your website’s color scheme – Accurately represent the content to which they link, if used for image mapping – Support the website’s message – Contribute to the overall mood you want to set Chapter 5: Typography and Images 12 Digital Cameras Digital cameras record images electronically – Many smartphones have built-in digital cameras that can take quality photos Chapter 5: Typography and Images 13 Screen Capture and Illustration Software and Apps Screen capture software creates an image of computer screen contents – Screen shots Web designers and graphic artists use illustration software and apps to create images by drawing shapes, lines, and curves Chapter 5: Typography and Images 14 Screen Capture and Illustration Software and Apps Chapter 5: Typography and Images 15 Image File Formats Image files are grouped into two categories: – Raster – Vector Webpages mostly display three formats – Graphics Interchange Format (GIF) – JPEG File Interchange Format (JFIF) – 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 on or off a single color in a transparent GIF Chapter 5: Typography and Images 18 Graphics Interchange Format (GIF) Chapter 5: Typography and Images 19 JPEG File Interchange Format (JFIF) Commonly referred to as the JPEG image format Best suited for digital photographs on the web that are more than 256 colors JPEG images are a good choice for photographs and other high-quality digital images used on webpages Chapter 5: Typography and Images 20 Portable Network Graphics (PNG) Format Free open source image format to replace the GIF format – Greater range of colors than the GIF format – Superior transparency capabilities Chapter 5: Typography and Images 21 Web-Ready Images Crop images to remove unwanted subject matter Chapter 5: Typography and Images 22 Web-Ready Images Optimizing Images for Size and Quality – Lossy vs. Lossless compression Compression artifacting is when higher compression values lead to a greater loss of image data Chapter 5: Typography and Images 23 Chapter Summary Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images Chapter 5: Typography and Images 24 5 Typography and Images Web Design, 5th Edition