Painting the Web

Preface

Ask 20 different people what the term "web graphics" means to them and you'll get 20 different answers: images, photos, illustrations, raster graphics, bitmaps, SVG, Photoshop, EXIF, CSS, web design, JPEG, Ajax, GIMP, GIF, developing with images, animations, buttons, icons—they all fall under this rather all-encompassing term.

When I think of web graphics, the one word that comes to me is "fun." From the very first time I programmed the layout of a house using FORTRAN, Photoshopped a photo, accessed metadata from an image, followed steps to create a "shiny" button, animated a display, created a CSS design—no matter how useful they are, these uses of graphics have been, and should be, fun. Contrary to expectations, one doesn't have to be a professional graphics artist or designer to have fun with web pages. I don't consider myself to be especially artistic, and I'm definitely not a designer by trade. However, I've enjoyed working with web graphics for years. Outside of free drawing, or originating graphical concepts or designs, most effects can be re-created just by following given steps or using well-designed and documented tools and technologies.

You don't have to spend thousands, either. Tools range from free to hundreds of dollars, with most of us able to get by with those tools toward the free end of the spectrum. Even those tools that have a price tag have trials, so you can give the tool a run before deciding to buy.

Regardless of your artistic ability, the state of your pocketbook, or your experience, one thing that you do need before working with web graphics is an interest in trying new things. You also need to be willing to dip your toes into various web technologies, because many web-based graphics are based on technologies such as CSS, JavaScript, or server-side functionalities such as ImageMagick or PHP.

I don't think it's possible to write a web graphics book that covers everything "but the kitchen sink," but I tried. Included are overviews of the specs and the concepts, such as JPEGs and lossy compression; how to ensure your photos look great online; how to create page objects, such as a shiny Web 2.0 button or reflections; PHP applications that create slideshows or generate images; camera to web page photo workflows; interesting CSS design effects; and fades and other effects created with JavaScript.

Many of the examples don't require any programming experience, but several do require some experience working with PHP or JavaScript. I've tried to keep the programming simple, easy to follow, and clean to read. Some exposure to both languages is needed, but you don't have to be an expert.

Several of the examples also use XML and CSS, but again, such use is kept as simple as possible. You don't have to be expert or pro, either at graphics or the Web, to work with any of the book examples.

How to Use This Book

The chapters in this book can be read in any order, but there is a method to the madness underlying its organization. First, the book moves from working with static graphics, using tools such as Photoshop and GIMP, to using programming languages (PHP and JavaScript) to generate or modify graphics. To complement this organization, the use of web-specific technology increases as you progress through the book.

Speaking of web technologies, there are several covered in this book. Tools, too. This is not the type of book that you'll want to gulp down in a couple of sittings. Instead, it is a book you should sip in small installments, reading through some chapter sections, trying out the examples, trying out the tools on your own, before moving on to a new topic.

Several applications are covered, but there are probably thousands of tools and utilities focused on web graphics, so what's covered here is nothing more than a sample. Several factors governed my choices of the technologies used in the book: the tool/utility/technology is significant or representative in the field, has unique or interesting properties, is relatively uncomplicated to install, and, most importantly, does not cost anything to use—at least, not while you're trying out the examples in this book.

All applications discussed in this book are either free to download or, if it's a commercial or shareware product, come with at least a 30-day free trial.