Discuss effective use of w ebpage images Describe image file formats Discuss how to prepare webready images Chapter 5 Typography and Images 2 Webpage Typography Issues The appearance and arrangement of characters ID: 782729
Download The PPT/PDF document "Chapter Objectives Explain webpage typog..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Slide2Chapter Objectives
Explain webpage typography issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images
Chapter 5: Typography and Images
2
Slide3Webpage Typography Issues
The appearance and arrangement of characters applied to textTypefaceType styleType size
Font
Chapter 5: Typography and Images
3
Slide4Webpage Typography Issues
A typeface is a group of alphabetic characters, numbers, and symbols with the same design, such as the slant and thicknessChapter 5: Typography and Images
4
Slide5Webpage Typography Issues
Chapter 5: Typography and Images5
Slide6Webpage Typography Issues
Serif fonts have a short line extending from the top or bottom of a character, called a serifSans 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
6
Slide7Webpage Typography Issues
Chapter 5: Typography and Images7
Slide8Webpage Typography Issues
A font family, or font stack, includes a default font and backup font types if a browser cannot locate the default fontEmbedded 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
Slide9Webpage Typography Issues
Font size can be expressed as an absolute size or a relative sizeAbsolute font sizes do not change when visitors change their browser font size settingsRelative 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
Slide10Webpage Typography Issues
Chapter 5: Typography and Images10
Slide11Webpage Typography Issues
Image TextSome image-editing software and apps contain features that allow you to create images from text or add text to an imageChapter 5: Typography and Images
11
Slide12Webpage Images
Images can:Add value to your websiteMatch or complement your website’s color schemeAccurately represent the content to which they link, if used for image mappingSupport the website’s message
Contribute to the overall mood you want to set
Chapter 5: Typography and Images
12
Slide13Digital Cameras
Digital cameras record images electronicallyMany smartphones have built-in digital cameras that can take quality photosChapter 5: Typography and Images
13
Slide14Screen Capture and Illustration Software and Apps
Screen capture software creates an image of computer screen contentsScreen shotsWeb designers and graphic artists use illustration software and apps to create images by drawing shapes, lines, and curves
Chapter 5: Typography and Images
14
Slide15Screen Capture and Illustration Software and Apps
Chapter 5: Typography and Images
15
Slide16Image File
FormatsImage files are grouped into two categories:RasterVectorWebpages mostly display three formatsGraphics Interchange Format (GIF)
JPEG File Interchange Format (JFIF)
Portable Network Graphics (PNG)
Chapter 5: Typography and Images
16
Slide17Image File Formats
Chapter 5: Typography and Images17
Slide18Graphics Interchange Format (GIF)
Original graphics format used on the webDisplay up to 256 colorsInterlaced GIF displays image in a sequence of passesEach 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
18
Slide19Graphics Interchange Format (GIF)
Chapter 5: Typography and Images19
Slide20JPEG File Interchange Format (JFIF)
Commonly referred to as the JPEG image formatBest suited for digital photographs on the web that are more than 256 colorsJPEG images are a good choice for photographs and other high-quality digital images used on webpages
Chapter 5: Typography and Images
20
Slide21Portable Network Graphics (PNG) Format
Free open source image format to replace the GIF formatGreater range of colors than the GIF formatSuperior transparency capabilities
Chapter 5: Typography and Images
21
Slide22Web-Ready Images
Crop images to remove unwanted subject matterChapter 5: Typography and Images
22
Slide23Web-Ready Images
Optimizing Images for Size and QualityLossy vs. Lossless compressionCompression artifacting is when higher compression values lead to a greater loss of image data
Chapter 5: Typography and Images
23
Slide24Chapter
SummaryExplain webpage typography issuesDiscuss effective use of webpage imagesDescribe image file formatsDiscuss how to prepare web-ready images
Chapter 5: Typography and Images
24
Slide25