Web Design, 5 th Edition 5 Typography and Images.
-
Upload
katherine-sharon-daniels -
Category
Documents
-
view
224 -
download
0
Transcript of Web Design, 5 th Edition 5 Typography and Images.
Chapter 5: Typography and Images 2
Chapter Objectives
Explain webpage typography issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images
Chapter 5: Typography and Images 3
Webpage Typography Issues
The appearance and arrangement of characters applied to text– Typeface– Type style– Type size– Font
Chapter 5: Typography and Images 4
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 6
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 serifsWeb designers often vary serif and sans serif
fonts for heading and body text fonts to create visual contrast
Chapter 5: Typography and Images 8
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 9
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 11
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 12
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 13
Digital Cameras
Digital cameras record images electronically– Many smartphones have built-in digital cameras
that can take quality photos
Chapter 5: Typography and Images 14
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 16
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 18
Graphics Interchange Format (GIF)
Original graphics format used on the webDisplay up to 256 colorsInterlaced GIF displays image in a sequence
of passes– Each pass displays the image at a higher
resolutionYou can turn on or off a single color in a
transparent GIF
Chapter 5: Typography and Images 20
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 21
Portable Network Graphics (PNG) FormatFree 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 23
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 24
Chapter Summary
Explain webpage typography issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images