Chapter 8

Chapter 8 - Principles of Web Design 5th Edition Chapter...

Info iconThis preview shows pages 1–14. Sign up to view the full content.

View Full Document Right Arrow Icon
Principles of Web Design 5 th Edition Chapter Eight Graphics and Color
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Objectives When you complete this chapter, you will be able to: Understand graphic file formats Choose a graphics tool Use the <img> element Control image properties with CSS Understand computer color basics Control color properties with CSS Control background images with CSS 2 Principles of Web Design 5 th Ed.
Background image of page 2
Understanding Graphic File Formats
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Understanding Graphic File Formats You can currently use only three image file formats on the Web: GIF, JPG, and PNG A newer format, SVG, has had limited success These formats all compress images to create smaller files Knowing which file format to use for which type of image is important If you choose the wrong file type, your image won’t compress or display properly Principles of Web Design 5 th Ed. 4
Background image of page 4
5 GIF GIF uses a lossless compression technique, meaning that no color information is discarded when the image is compressed The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics Principles of Web Design 5 th Ed.
Background image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
6 GIF Transparency With GIF files, you can choose any one color in an image to appear as transparent in the browser The background color or pattern will show through the areas that you have designated as transparent Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle Principles of Web Design 5 th Ed.
Background image of page 6
7 Principles of Web Design 5 th Ed.
Background image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
8 GIF Animation The GIF format lets you store multiple images and timing information about the images in a single file This means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion Principles of Web Design 5 th Ed.
Background image of page 8
9 Principles of Web Design 5 th Ed.
Background image of page 9

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
10 JPG JPG is best for photographs or continuous tone images JPGs are 24-bit RGB images that allow millions of colors JPGs use a “lossy” compression routine especially designed for photographic images When the image is compressed, some color information is discarded, resulting in a loss of quality from the original image Principles of Web Design 5 th Ed.
Background image of page 10
11 JPG When you create the JPG file, you can also manually balance the amount of compression versus the resulting image quality The higher the compression, the lower the image quality You can play with this setting to create files that are as small as possible but still look good Many photos can sustain quite a bit of compression while still maintaining image integrity Principles of Web Design 5 th Ed.
Background image of page 11

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
12 Principles of Web Design 5 th Ed.
Background image of page 12
13 PNG A royalty-free file format that is intended to replace GIF This lossless format compresses bit images to smaller file sizes than GIF PNG supports transparency and interlacing but not animation Principles of Web Design 5 th Ed.
Background image of page 13

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 14
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 01/13/2012 for the course IS 3020 taught by Professor Staff during the Spring '08 term at Kennesaw.

Page1 / 85

Chapter 8 - Principles of Web Design 5th Edition Chapter...

This preview shows document pages 1 - 14. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online