Transcript Web Design 5

5
Typography
and Images
Web Design,
3rd Edition
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
More on Web
Typography
 The appearance and arrangement of characters that
make up your text
– Typeface – actual design of the type
• Times New Roman, Arial, Garamond
– Type style – variations in form (italic, bold)
– Type size – measured in points (72 points = 1 inch)
– Font – combined features of typeface and type style
 Display type is for headings and subheads
 Body type is for main content
– Smaller than display type
More on Web
Typography
Chapter 5: Typography and Images
4
Typography
 Sans serif fonts are a popular choice of many Web
designers
– Use a sans serif typeface for short paragraphs, headings,
lists, and type on buttons
 Use serif type for large blocks of text and pages that
are intended to be printed and then read
– Serifs do not always play a large role in the readability of
online text
– Serifs are short lines or ornaments on each character
 Web fonts are specifically designed for online reading
Typography
serifs
Typography
Chapter 5: Typography and Images
7
More on Web
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
8
Typography
Body type should be 10 to 14 points
Avoid excessive use of caps
Create contrast between page and background
Use no more than three fonts per page
Do not create large text blocks
Limit line length to 8 to 10 words
Extent of Control
 limited control over the way type displays on
a Web page
 Three variables affecting the extent of control
1. operating systems – view pages on different
platforms.
– Windows, Macintosh
2. monitor resolution settings – view pages at
different resolution settings
3. browser settings – default Times New Roman
typeface, in 12-point type size.
More on Web
Typography Tips
Override default font settings
– specified typeface must reside in viewer’s computer
<FONT FACE=“Arial, Helvetica, Verdana, Geneva”>Typography</FONT>
More on Web
Typography
Font choices contribute
to a serious mood at an
investment site
Chapter 5: Typography and Images
Font choices contribute
to a creative mood at a
Web design site
12
Typography
Image Text
– Converts text into a graphic so it displays properly
Text added
to image
 drawbacks
– load time
– not visible if graphics
turned off in browser
– can not be searched
by search engines
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
14
Your Turn! (page 138)
Exploring the Effective Use of Web Page Images
1.
2.
3.
Visit the Web Design Chapter 5 Online Companion Web page
(scsite.com/web3e/ch5/ ) and click links in the Your Turn section to
the following sites to review the home page and at least three
underlying pages at each site:
a.
b.
c.
NASA Kids' Club
NOAA Ocean Explorer
AICPA
d.
Lane Home Furnishings
Review how the site uses images. Do the images add value? Do
they match or complement the color scheme? If image maps are
used, do the images accurately represent their links' target pages?
Do the images contribute to the overall mood of the site and
promote the site's message?
Write a report that summarizes your review. Be prepared to discuss
your report in class.
More on Web
Sources for Images
Digital camera
– Takes a digital image and records it electronically
More on Web
Chapter 5: Typography and Images
16
Your Turn! (page 139)
Exploring Digital Cameras
1.
2.
3.
Visit the Web Design Chapter 5 Online Companion Web page
(scsite.com/web3e/ch5/ ) and click links in the Your Turn section to
the following sites to shop for new digital cameras:
a.
b.
Bizrate
Shopzilla
c.
NexTagNexTag
Review three cameras using information from each site: a low-cost
digital camera for less than $200, a medium-priced camera in the
range of $200 to $500, and a camera that costs more than $500.
Summarize your research in a report. Use a table to compare
camera features and cost. Assume that, as a professional Web
designer, you often shoot digital images for your Web design
projects. Choose one of the three cameras most suitable for your
Web design projects. Give the reasons for your choice.
More on Web
Sources for Images
Scanners
– Flatbed scanner
– Sheet-fed scanner
– Drum scanner
Chapter 5: Typography and Images
18
Sources for Graphics
Scanners
– Flatbed scanner
– Sheet-fed scanner
– Drum scanner
Sources for Images
Guidelines for scanning
– Scan at the size at which they will be displayed
– Scan images at 72 dots per inch (dpi)
– Scan illustrations at 256 colors
– Save images in Tagged Image File Format (TIFF)
Chapter 5: Typography and Images
20
Sources for Images
Screen capture software and Illustration
software
– SnagIt
– !QuickScreen Capture
– FullShot
– Adobe Illustrator
– Xara Xtreme
– Expression Design
Chapter 5: Typography and Images
21
Sources for Images
Screen shot of open Microsoft
Excel 2007 workbook and
chart sheet inside the screen
capture software window
Chapter 5: Typography and Images
Illustration software is used
to draw shapes, lines, and
curves and then combine
them into an image
22
Image File Formats
 Image files are grouped into two categories:
1. Vector graphics – images defined by
mathematical statements
•
resized without degrading quality
2. Raster graphics or bitmaps – defined by rows
and columns of different colored pixels
 illustration will be created and manipulated as
a vector graphic, then converted to a raster
graphic.
Chapter 5: Typography and Images
23
Image File Formats
Chapter 5: Typography and Images
24
Graphics File Formats
 Web pages mostly display three formats
1. Graphics Interchange Format (GIF)
2. Joint Photographic Experts Group (JPEG)
3. Portable Network Graphics (PNG)
Graphics Interchange Format
(GIF)
Original graphics format used on the Web,
created by CompuServe
Display up to 256 colors (8-bit)
GIF 87A
– Interlaced GIF displays image in a sequence of
passes
• Each pass displays the image at a higher resolution
• changes from blurry to distinct
– You can turn off a single color in a transparent GIF
Graphics Interchange Format (GIF)
non-interlaced GIF
interlaced GIF
Graphics Interchange Format
(GIF)
GIF 89A
– Features capabilities to be interlaced, transparent,
and animated
• Halo effect
border of image
remains after
background has
been removed
using the
transparency
capability
(antialiased)
Graphics Interchange Format
(GIF)
 Compressing the file sizes ensures quicker transfers
– GIF compression is lossless
• all data retained when image is compressed
 Limit physical size of image
 Create image with solid colors
– Web-safe palette
 Minimize bit depth
 Utilize Adobe ImageReady to optimize the image
Graphics Interchange Format
(GIF)
More on Web
GIFs are most suitable
for basic, solid-color
images, such as cartoons,
diagrams, or navigation
buttons
Chapter 5: Typography and Images
30
Typography Tips
Antialiasing Type
– Technique used to smooth the appearance of
graphics or type
– Eliminates jagged edges
– Web graphics programs generate antialiased type
– Only apply to type larger than 10 points
Typography Tips
additional pixels in
antialiased type smooth
jagged edges
Joint Photographic Experts
Group (JPEG)
 Best suited for photographs on the Web
 Not suggested for solid color images
 Can be displayed with millions of colors
– 24-bit RGB color
– 8-bit monitor - colors are dithered
 2 types of JPEGs
1. Standard
2. progressive JPEG displays on the screen in a
sequence of passes
– can specify number of passes
Joint Photographic Experts
Group (JPEG)
JPEG compression is lossy
– Greater compression equals lower image quality
• redundant data is lost during compression
• can control level of compression
• determine acceptable balance between file size and
image quality
Wide level of browser support
Joint Photographic Experts
Group (JPEG)
JPEG image file format
is appropriate for photographs
or photo-like art
Chapter 5: Typography and Images
35
Portable Network Graphics
(PNG) Format
Developed as a free open source image format
to replace the GIF format
– Superior transparency capabilities
– Better-quality interlacing capabilities
– Greater range of color depths
– Capability of embedding text in images
– Lossless compression
Undecided whether PNG images will replace
GIF images
Lack of browser support
Chapter 5: Typography and Images
36
More on Web
Web-ready Images
Crop images to remove unwanted subject
matter
selected portion
of image to crop
Chapter 5: Typography and Images
37
Web-ready Images
Optimizing Your Images for Size and Quality
– Lossy vs. Lossless compression
Very High quality
setting
File format
and compression
options
High quality
setting
medium quality
setting
low quality
setting
File size, download speed
and image
quality values
Chapter
5: Typography
and Images
38
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
39
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
40
Case Study # 5
Case Study Page 156
Do steps 1-6 creating a multiple page Word
document.
See assignment web page for details.
5
Typography
and Images
Web Design,
3rd Edition