{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

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

Info icon This 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
Image of page 1

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

View Full Document Right 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.
Image of page 2
Understanding Graphic File Formats
Image of page 3

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

View Full Document Right 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
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.
Image of page 5

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

View Full Document Right 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.
Image of page 6
7 Principles of Web Design 5 th Ed.
Image of page 7

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

View Full Document Right 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.
Image of page 8
9 Principles of Web Design 5 th Ed.
Image of page 9

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

View Full Document Right 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.
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.
Image of page 11

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

View Full Document Right Arrow Icon
12 Principles of Web Design 5 th Ed.
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.
Image of page 13

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

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

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern