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
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.
Chapter 1 You Must Have Fun
What Was Good Enough for Grandpappy…
Graphics: Taste Great, Less Filling
It Hurts! Make It Stop!
Web Graphics Hall of Shame
On with the Wondrous Variety
Chapter 2 Imagine
Raster Graphics and RGB Color 101
GIF: Lossless and Paletted
Images: Annotated, Embedded, and Optimized
Steal This: Images, Copyright, and Hotlinking
Chapter 3 Photographs: From Camera to Web Page
The Web Photographer's Workflow
Working with RAW Images
Editing Photos: Bending Light
Color Match That Group: Optimization in Numbers
It's Black and White and Not Red All Over
The Illustrative Effect
Knockouts and Extractions
A Survey of Desktop Photo Editors
Online Editors: Fauxto and Picnik
Photo Workflow Software
Photo Workflow: Camera to Web Redux
Chapter 4 The Web As Frame
The Art of Thumbnail Sizing
The Creative Art of Thumbnails
Embedding Photos: Condiment and Spice
Generated Galleries and Slideshows
Gallery Software on the Server
A Bit of Code
Chapter 5 Pop Graphics
The Graphic Toolbox: Shapes, Layers, Gradient, and Blur
Shiny Buttons:Gel, Wet, and Glass
Badges and Bows: Beyond the Buttons
Reflecting on Reflection, and Shadowing Revisited
Instant in Time: Screenshots
Chapter 6 Vector This: Early Days and Markup
Chapter 7 SVG Bootcamp
SVG Full, Basic, and Tiny
Browser Support: Standoffish or Integrated
The Structure of the SVG Space
Paths, Patterns, and Markers
Revisiting the Viewport and the viewBox
Static SVG Secrets
Chapter 8 CSS Über Zone
CSS Tips and Tricks
div Play Dough
CSS Tools and Utilities
Chapter 9 Design for the Non-Designer
The Elements of Page Design
Web Pages Are Like Ogres, and Ogres Have Layers
Colors: Make Your Page Happy, Make Your Page Sad
Typography for the Page
Web Design Tools
Chapter 10 Dynamic Web Page Graphics
The Quick Intro to the DOM
Changing Class and Transparency
Programming with Images
Accordions: Smooshable Spaces
Chapter 11 Canvassing
Cross-Browser canvas Support and Microsoft's Silverlight
Layering and Clipping
Chapter 12 Dynamic SVG and canvas
Animated Clock: The Hello World of Animated and Interactive SVG
Scripting canvas: Zoom!
Chapter 13 Image Magic: Programming and Power Tools
Serving Up Photos: Insta-Slideshows
Manipulate Images with PHP/GD
Forget the Interface: The Magic of ImageMagick
Programming with ImageMagick and IMagick
Chapter 14 The Geo Zone
Mapping with Google
Living Within the Geoweb
Chapter 15 Like Peanut Butter and Jelly: Data and Graphics
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
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.
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.
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.
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.