Transcript Chapter 5 PowerPoint

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