CHAPTER 18 WEB GRAPHICS BASICS

IN THIS CHAPTER

Where to get images

An overview of GIF, JPEG, and PNG formats

Image size and resolution

Resizing images in Photoshop

Binary and alpha transparency

Preventing “halos”

Unless you plan on publishing text-only sites, chances are you’ll need to know how to create web graphics. For many of you, that might mean getting your hands on an image-editing program for the first time and acquiring some basic graphics production skills. If you are a seasoned designer accustomed to print, you may need to adapt your style and process to make graphics that are appropriate for web delivery.

This chapter covers the fundamentals of web graphics production, beginning with some options for finding and creating images. From there, it introduces the file formats available for web graphics and helps you decide which to use. You’ll also learn the basics of image resolution, resizing, and transparency.

As always, there are step-by-step exercises along the way. I want to point out, however, that I write with the assumption that you have some familiarity with an image-editing program. I use Adobe Photoshop (the industry standard) in the examples and exercises, but you can follow along with most steps using other tools listed in this chapter. If you are starting at square one, I recommend spending time with the manual or third-party books about your graphics software.

Image Sources

You have to have an image to save an image, so before we jump into the nitty-gritty ...

Get Learning Web Design, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.