Painting the Web
Catching the User's Eyes - and Keeping Them on Your Site
Publisher: O'Reilly Media
Final Release Date: May 2008
Pages: 656

Do you think that only professionals with expensive tools and years of experience can work with web graphics? This guide tosses that notion into the trash bin.

Painting the Web is the first comprehensive book on web graphics to come along in years, and author Shelley Powers demonstrates how readers of any level can take advantage of the graphics and animation capabilities built into today's powerful browsers. She covers GIFs, JPEGs, and PNGs, raster and vector graphics, CSS, Ajax effects, the canvas objects, SVG, geographical applications, and more -- everything that designers (and non-designers) use to literally paint the Web.

More importantly, Shelley's own love of web graphics shines through in every example. Not only can you master the many different techniques, you also can have fun doing it.

Topics in Painting the Web include:

  • GIF, JPEG, PNG, lossy versus lossless compression, color management, and optimization
  • Photo workflow, from camera to web page, including a review of photo editors, workflow tools, and RAW photo utilities
  • Tricks for best displaying your photos online
  • Non-photographic raster images (icons and logos), with step-by-step tutorials for creating popular "Web 2.0" effects like reflection, shiny buttons, inlays, and shadows
  • Vector graphics
  • An SVG tutorial, with examples of all the major components
  • Tips and tricks for using CSS
  • Interactive effects with Ajax such as accordions and fades
  • The canvas object implemented in most browsers
  • Geographical applications such as Google Maps and Yahoo Maps, with programming and non-programming examples
  • Visual effects such as forms and data displays in table or graphics
  • Web design for the non-designer

Graphics are not essential to the web experience, but they do make the difference between a site that's functional and one that's lively, compelling, and exciting. Whether you want to spruce up a website, use photos to annotate your stories, create hot graphics, or provide compelling displays for your data, this is the book for you.

Table of Contents
Product Details
About the Author
Recommended for You
Customer Reviews


by PowerReviews
oreillyPainting the Web

(based on 2 reviews)

Ratings Distribution

  • 5 Stars



  • 4 Stars



  • 3 Stars



  • 2 Stars



  • 1 Stars



Reviewed by 2 customers

Displaying reviews 1-2

Back to top


SVG ad Canvas with a little DOM

By G Barber

from Undisclosed

Comments about oreilly Painting the Web:

Painting the Web by Shelly Powers is not the type of book I would normally pick up. Having 14 years web design experience means that you tend to have absorbed something in the way of use of graphics on the web, from raster images, to Scalar Vector Graphics (SVG), which is what this book is all about.

Looking at this book from its title alone, I first thought, Painting the Web was a book on SVG. But I was wrong, well partly wrong.

Shelly, takes you through what makes up the graphics on the web now and into the future in a chatty friendly manner, however this book can be a touch dry when it comes to technical explanations.

Raster to Start, Plus a little SVG

It moves through image and colour theory onto a review of professional to budget applications both desktop and online. The book presents a no nonsense explanation of the software. It also supplies a few how to recipes on the building of raster graphics for the web.

A good third of the book is dedicated to the use of vector graphics on the web. Dealing with X3D, VRML (now that brings back memories), VML, SVG (noting it's restrictive browser implementation). I was expecting maybe a little discussion on desktop vector applications, but instead there is comprehensive introduction on SVG. It's not just a few pages folks, this goes from the simple to complex examples. There is also a good overview of the SVG tools and editors in the marketplace to round it off.

Web Design Basics

There is a small section looking at CSS. Now this is not meant to be a primer, it assumes you know your CSS, and I'll assume you do. The book looks at the more advanced elements of CSS 2, not bad if you're not using all the browser compliant elements already. It runs us through concepts such as pseudo-elements, specificity and styling microformats. Like with Raster graphics there are a number of CSS recipes as well.

For me this is where the book slips up a little; if we are uber CSS designers then we should know all the basics that she explains such as layered background, conditional statements, font unit resets, unordered list menus.

There is a section on the principles of good design, as well, detailing how to layout a good semantic web page, be that static or via a flexible layout grid.

One small point on the microformats front, a footnote reference to the microformats wiki would have been a nicety, it's not a biggie, something to consider for the 2nd edition. There is also no explanation what microformats are and how they are used. Slap on the wrist to the technical editor.

Lets Go Dynamic

Dynamic Web Page Graphics is also gets a look in. I was expecting a section on Silverlight, Flash, a little AIR and maybe a some Ajaxian animation. What the book presents is DHTML (shudder - does anyone still use that term anymore). This book steps through the DOM and the usual manipulation of the CSS styling moving onto lightbox and accordion functionality using the standard unobtrusive Javascript implementation. Again this is a quick visit into the ajaxian world.

Paint the Canvas

There is a interesting exploration into the realm of the canvas and it's extension into the use with SVG. This book explains the creation of simple objects and their comparison to SVG, to the use of canvas effects and transformations. The canvas element is one of those under used elements that I can see getting a greater use in the near future.

The section ends with an extensive bringing together of SVG and the canvas with a little Javascript and manipulation of the DOM. It is the use of this type of animation techniques demonstrated in the book, that make me really question the need for implementation of like functionality in traditional animation rendering platforms like Flash.


Overall it's not a bad book, like I said previously, not something I would pick up, but I'm a little jaded on the subject and looking for the edge. Still the sections on SVG and the canvas where informative.

These sections on SVG and canvas to some may seem to be worthless. Well I have the feeling that we are going to see a greater use of these to with the development of various dynamic canvas libraries as with have with Javascript. This book has just seeded the ground for this with a good primer in the subject. With the increasing compliance of browsers with SVG, it will not be long before this is another standard technique for front end developers..

However, the book could do with the gleam of a good technical editor, there are sections of the book that I was wincing over, not that they are technically wrong. It was just the sequence of the chapters and the information therein, a little too much on digital imagery and photographic aspects for my liking for instance.

This with some of the disjointed sections it tended to give me the impression that the book was all over the place not really knowing what it wanted to be, graphics, CSS, AJAX, SVG, Canvas or design overview; it does it all. A little streamlining and this could have been a better book.

That said if you want a good comprehensive overview on the graphical elements of the web, especially SVG at 600+ pages, Painting the Web, by Shelly Powers is a good place to start.

Side Note

There is no way Shelly could have know about Javascript dynamo Dmitry Baranovskiy's awesome Raphael JavaScript Library that provides cross browser support for browser generated vector graphics such as SVG. Considering the book was published in April 2008, I sure, if she had known this would have been included.


Filling in the blanks

By Anonymous

from Undisclosed

Comments about oreilly Painting the Web:

This is an excellent reference by someone who is obviously passionate and knowledgeable about the complex world of Web graphics. There is crucial information on things like the difference between GIF and PNG, CSS and um.. how to create those shiny Web 2.0 buttons.

My major criticism would be the author spends way too much time on her pet areas of knowledge. There's an entire chapter on digital photography for example; something I think is an entirely different subject. There's also chapters on SVG, Canvas and W3D, things I'm very interested in but that have little application in the real Web design world outside of theory at this point.

Bottom line, this is a great book for experienced designers and hackers looking to expand their horizons and fill in the blanks about many things we've been fudging over the years. For the beginner trying to grasp the basics of Web graphics, it may be a bit uneven, however.

Displaying reviews 1-2

Back to top

Buy 2 Get 1 Free Free Shipping Guarantee
Buying Options
Immediate Access - Go Digital what's this?
Ebook:  $35.99
Formats:  DAISY, ePub, Mobi, PDF
Print & Ebook:  $49.49
The shipment of this item may be delayed.
Print:  $44.99
The shipment of this item may be delayed.