Painting the Web by Shelley Powers Publisher: O'Reilly Pub Date: April 28, 2008 Print ISBN-13: 978-0-596-51509-6 Pages: 655 Table of Contents | Index Overview 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 Painting the Web by Shelley Powers Publisher: O'Reilly Pub Date: April 28, 2008 Print ISBN-13: 978-0-596-51509-6 Pages: 655 Table of Contents | Index Painting the Web Preface Chapter 1 You Must Have Fun Section 1.1 What Was Good Enough for Grandpappy… Section 1.2 Draw Me! Section 1.3 $$$$$$$$$$$$ Section 1.4 Graphics: Taste Great, Less Filling Section 1.5 It Hurts! Make It Stop! Section 1.6 Web Graphics Hall of Shame Section 1.7 On with the Wondrous Variety Chapter 2 Imagine Section 2.1 Raster Graphics and RGB Color 101 Section 2.2 JPEG Section 2.3 GIF: Lossless and Paletted Section 2.4 PNG Section 2.5 Images: Annotated, Embedded, and Optimized Section 2.6 Steal This: Images, Copyright, and Hotlinking Section 2.7 Image Storage Chapter 3 Photographs: From Camera to Web Page Section 3.1 The Web Photographer's Workflow Section 3.2 Working with RAW Images Section 3.3 Editing Photos: Bending Light Section 3.4 Color Match That Group: Optimization in Numbers Section 3.5 It's Black and White and Not Red All Over Section 3.6 The Illustrative Effect Section 3.7 Knockouts and Extractions Section 3.8 A Survey of Desktop Photo Editors Section 3.9 Online Editors: Fauxto and Picnik Section 3.10 Photo Workflow Software Section 3.11 Photo Workflow: Camera to Web Redux Chapter 4 The Web As Frame Section 4.1 The Art of Thumbnail Sizing Section 4.2 The Creative Art of Thumbnails Section 4.3 Expanding Thumbnails Section 4.4 Embedding Photos: Condiment and Spice Section 4.5 Plating Photos Section 4.6 Generated Galleries and Slideshows Section 4.7 Gallery Software on the Server Section 4.8 A Bit of Code Chapter 5 Pop Graphics Section 5.1 The Graphic Toolbox: Shapes, Layers, Gradient, and Blur Section 5.2 Shiny Buttons:Gel, Wet, and Glass Section 5.3 Badges and Bows: Beyond the Buttons Section 5.4 Reflecting on Reflection, and Shadowing Revisited Section 5.5 Reverse-Engineering Ideas Section 5.6 Instant in Time: Screenshots Chapter 6 Vector This: Early Days and Markup Section 6.1 WebCGM Section 6.2 The 3Ds Section 6.3 VML Section 6.4 Hello SVG Chapter 7 SVG Bootcamp Section 7.1 SVG Full, Basic, and Tiny Section 7.2 Browser Support: Standoffish or Integrated Section 7.3 The Structure of the SVG Space Section 7.4 SVG Elements Section 7.5 Paths, Patterns, and Markers Section 7.6 Revisiting the Viewport and the viewBox Section 7.7 Transformations Section 7.8 SVG Tools Section 7.9 Static SVG Secrets Chapter 8 CSS Über Zone Section 8.1 Selector Magic Section 8.2 CSS Tips and Tricks Section 8.3 div Play Dough Section 8.4 CSS Tools and Utilities Chapter 9 Design for the Non-Designer Section 9.1 The Elements of Page Design Section 9.2 Web Pages Are Like Ogres, and Ogres Have Layers Section 9.3 Flexible Designs Section 9.4 Colors: Make Your Page Happy, Make Your Page Sad Section 9.5 Typography for the Page Section 9.6 Web Design Tools Section 9.7 Additional Readings Chapter 10 Dynamic Web Page Graphics Section 10.1 The Quick Intro to the DOM Section 10.2 Coloring Highlights Section 10.3 Changing Class and Transparency Section 10.4 Programming with Images Section 10.5 Accordions: Smooshable Spaces Chapter 11 Canvassing Section 11.1 Cross-Browser canvas Support and Microsoft's Silverlight Section 11.2 canvas Basics Section 11.3 Saving State Section 11.4 Layering and Clipping Section 11.5 canvas Effects Chapter 12 Dynamic SVG and canvas Section 12.1 Embedded Animation Section 12.2 Scripting SVG Section 12.3 Embedded Scripting Section 12.4 Animated Clock: The Hello World of Animated and Interactive SVG Section 12.5 Scripting canvas: Zoom! Chapter 13 Image Magic: Programming and Power Tools Section 13.1 Serving Up Photos: Insta-Slideshows Section 13.2 Manipulate Images with PHP/GD Section 13.3 Forget the Interface: The Magic of ImageMagick Section 13.4 Programming with ImageMagick and IMagick Chapter 14 The Geo Zone Section 14.1 Mapping with Google Section 14.2 Yahoo!'s Maps Section 14.3 Living Within the Geoweb Chapter 15 Like Peanut Butter and Jelly: Data and Graphics Section 15.1 Graphs: Every Which Way but Static Section 15.2 Mining Your Photos Section 15.3 Rosy Glow of Completion Section 15.4 One Last Look at Data and Visualization Section 15.5 The data: URI Section 15.6 At the End of This Rainbow Colophon Index Painting the Web by Shelley Powers Copyright © 2008 Shelley Powers All rights reserved Printed in Canada Published by O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 O'Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (safari.oreilly.com) For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com Editor: Simon St.Laurent Indexer: Lucie Haskins Production Editor: Rachel Monaghan Cover Designer: Karen Montgomery Copyeditor: Genevieve d'Entremont Interior Designer: Ron Bilodeau Illustrator: Jessamyn Read Proofreader: Rachel Monaghan Printing History: April 2008: First Edition Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly Media, Inc Painting the Web, the cover image, and related trade dress are trademarks of O'Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O'Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein This book uses RepKover™, a durable and flexible lay-flat binding ISBN: 978-0-596-51509-6 [F] 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 P2.1 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 resetAll function resizing photos 2nd restore method (canvas) 2nd reverse engineering 2nd RGB color model browser support color fade color matching contrast ratio photo histograms rgba color function (canvas) rgba color method RIA (Rich Internet Application) 2nd RMagick site Rogé rotate attribute (svg) 2nd rounded rectangles canvas element roundedRect function (canvas) roundrect element (vml) row ordering technique Ruby rx attribute (svg) elliptical arc curve Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Safari browser CSS support Safari WebKit engine sans-serif fonts 2nd saturation black-and-white conversion save method (canvas) 2nd Schewe Schiller 2nd screen readers screenshots capturing reflecting 2nd Scriptaculous library scripting canvas element support 2nd 3rd 4th 5th 6th 7th 8th cross-document 2nd embedded 2nd 3rd 4th seam carving Second Life community forum Secure Shell (SSH) 2nd selectors child descendant 2nd serif fonts 2nd set element (svg) 2nd 3rd setInterval attribute (svg) setOpacity function shadows bordered effect 2nd 3rd cast 2nd creating with CSS 2nd Shamir shape element (vml) shapes badges 2nd canvas element support 2nd 3rd graphics tools support predefined for SVG predefined for VML 2nd 3rd 4th shapetype element (vml) sharpness Smart Sharpening filter Shea shell scripts 2nd 3rd shiny buttons 3D 2nd 3rd 4th characteristics sidebars font considerations Sketsa tool skewX transformation 2nd 3rd skewY transformation 2nd 3rd 4th slideshows 2nd Smart Edge Freehand lasso Smart Photo fix (Paint Shop Pro) Smart Sharpening filter Photoshop Elements SmartCurve plug-in Smashing Magazine site SMIL (Synchronized Multimedia Integration Language) SmugMug hosting service snooping CSS 2nd social networks hosting photo storage 2nd 3rd spacer GIFs 2nd span element (html) 2nd Sparklines specificity rule splash pages spreadMethod attribute (svg) 2nd src attribute (img) 2nd 3rd SRF (Sony Raw Format) sRGB 2nd startangle attribute (vml) stdDeviation attribute (svg) steganography Stepic tool stop element (svg) storing images 2nd 3rd 4th Story strike-linejoin attribute (svg) stroke attribute (svg) border support stroke attribute (vml) stroke function (canvas) stroke-dasharray attribute (svg) 2nd 3rd stroke-linejoin attribute (svg) stroke-opacity attribute (svg) stroke-width attribute (svg) SVG shapes supported strokecolor attribute (vml) strokeRect function (canvas) 2nd strokeStyle property (canvas) strokeweight attribute (vml) 2nd style attribute (img) style attribute (svg) 2nd style attribute (vml) stylesheet switchers 2nd 3rd 4th SVG (Scalable Vector Graphics) bar charts browser support 2nd 3rd 4th 5th 6th 7th coordinate system 2nd 3rd 4th 5th 6th creating icons elements as groups embedded animation 2nd 3rd 4th 5th 6th 7th 8th embedded scripting 2nd 3rd embedding into web pages 2nd 3rd Inkscape support inline SVG 2nd 3rd 4th 5th object rotation 2nd path commands 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th rosy glow of completion sample application 2nd 3rd 4th scripting support 2nd structure of space 2nd tools overview 2nd 3rd transformations URI support vector graphics support 2nd VML comparison web page mapping SVG Basic SVG canvas boundaries defined object sizing svg element Hello SVG example nested SVG canvas 2nd SVG Mobile SVG Tiny 2nd SVG viewport SVG Wiki SVG wiki SwirlX3D plug-in 2nd Synchronized Multimedia Integration Language (SMIL) Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] target attribute (anchor) TechSmith Snag-It tool 2nd Terminal application text element (svg) 2nd 3rd 4th 5th 6th 7th text-anchor attribute (svg) textLength attribute (svg) Textpad throbbers 2nd thumb class 2nd 3rd 4th 5th thumbnails adding drop shadows 2nd creating with ImageMagick cut-out 2nd sizing 2nd 3rd 4th TIFF format RAW format comparison Time Machine special effects tool TinyLine SVG toolkit title element (html) title element (svg) to attribute (svg) torn-edge effect 2nd 3rd 4th toString function TotalValidator validator Touch iPod Trace Bitmap operation (Inkscape) transform attribute (svg) 2nd 3rd 4th 5th 6th transformations canvas element support GIMP support reflections as cast shadows SVG support transparency alpha binary changing 2nd 3rd creating shadows 2nd from negatives GIF support 2nd 3rd IE limitations PNG support 2nd 3rd 4th tref element (svg) truecolor image Tufte type attribute (vml) Typepad site typography design considerations 2nd 3rd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] UFRaw workflow tool 2nd 3rd 4th ul element (html) 2nd 3rd 4th Uniform Resource Identifier (URI) units of measurement font size and universal selector University of Minnesota Duluth unsharp mask technique URI (Uniform Resource Identifier) 2nd usability use element (svg) UTF-16 encoding UTF-8 encoding Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] V (vertical) command v namespace validation CSS vector graphics 3D languages overview 2nd 3rd 4th 5th 6th 7th SVG support 2nd 3rd 4th 5th system requirements VML support 2nd 3rd 4th WebCGM VectorMagic tool 2nd version attribute (svg) vi editor viewBox element (svg) 2nd 3rd vim editor Virtual Reality Modeling Language (VRML) 2nd visualizing data bar charts line graphs 2nd mining photos 2nd 3rd 4th 5th 6th rosy glow of completion Sparklines VML (Vector Markup Language) specification SVG comparison vml namespace 2nd VRML (Virtual Reality Modeling Language) 2nd 3rd 4th 5th 6th vspace attribute (img) 2nd 3rd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] W3 Schools W3C animation example canvas specification DOM specification RGB color values SVG specification transforming SVG Watt web authoring tools Web Content Accessibility Guidelines web content management tools web design color management 2nd div element consideration 2nd 3rd 4th flexible 2nd 3rd graphics considerations 2nd minimizing confusion 2nd 3rd purposeful sites 2nd 3rd recommended elements recommended tools 2nd 3rd 4th responsibilities of site navigation 2nd 3rd 4th 5th site readability 2nd 3rd 4th typography 2nd uncluttered sites 2nd Web Developer toolkit Web Graphics Hall of Shame animated GIFs browser wars 2nd DHTML and overusing color 2nd overusing widgets sameness in design 2nd 3rd 4th splash pages under construction web pages/sites adding images changing transparency color considerations 2nd 3rd 4th 5th 6th 7th 8th coloring highlights 2nd decreasing load times microformat example minimizing confusion 2nd 3rd navigation typography 2nd uncluttered Web Safe Colors 2nd 3rd 4th Web3D Consortium WebCGM 2nd weblogging software WebSiteTips.com site Weinman Welch wet effect for buttons 2nd 3rd WHATWG group white balance 2nd whitespace design considerations 2nd formatting in CSS width attribute (img) 2nd 3rd width attribute (svg) 2nd Wikipedia window object (DOM) 2nd 3rd WordPress system annotating text content management photo management weblogging support wrapper element (html) WynApse.com site WYSIWYG tools Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] x attribute (svg) gradient element X11 Windows 2nd X3D 2nd 3rd 4th 5th 6th XAML markup 2nd XHTML adding scripting blocks inline SVG SVG compliance X3D support xlink:href attribute 2nd xMax attribute (svg) xMid attribute (svg) xMin attribute (svg) XML comments XML ENTITY notation XSL Transformation (XSLT) Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Yahoo Flickr site 2nd Yahoo! Maps API key 2nd centering/adding controls 2nd 3rd 4th markers YMarker object YMax attribute (svg) YMid attribute (svg) YMin attribute (svg) Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Z (close path) command zoom functionality Google Maps 2nd Yahoo! Maps ... web graphics that have sprung up over the years, and to push against the "musts" that have constrained their use Musts such as the following, for example: Web animation is good On the other hand, web animation is bad... watch Max Headroom through Joost Pop! There went the Web! None of this is essential to the Web, but having access to such things has become essential to us Some would say it was the economy of the Web that pushed... extensions of JPEG, GIF, or PNG when they hear the term "web graphics." However, I consider anything that impacts the visualization of a web page, above and beyond the components that provide the initial structure, part of the family of web