Painting the Web

753 Pages·2008·8.73 MB·English

by  Shelley Powers

PPaaiinnttiinngg tthhee WWeebb
bbyy SShheelllleeyy PPoowweerrss
PPuubblliisshheerr:: OO''RReeiillllyy
PPuubb DDaattee:: AApprriill 2288,, 22000088
PPrriinntt IISSBBNN--1133:: 997788--00--559966--5511550099--66
PPaaggeess:: 665555
TTaabbllee ooff CCoonntteennttss
|| IInnddeexx
OOvveerrvviieeww
DDoo yyoouu tthhiinnkk tthhaatt oonnllyy pprrooffeessssiioonnaallss wwiitthh eexxppeennssiivvee ttoooollss aanndd yyeeaarrss ooff eexxppeerriieennccee ccaann wwoorrkk wwiitthh wweebb
ggrraapphhiiccss?? TThhiiss gguuiiddee ttoosssseess tthhaatt nnoottiioonn iinnttoo tthhee ttrraasshh bbiinn.. PPaaiinnttiinngg tthhee WWeebb iiss tthhee ffiirrsstt ccoommpprreehheennssiivvee bbooookk
oonn wweebb ggrraapphhiiccss ttoo ccoommee aalloonngg iinn yyeeaarrss,, aanndd aauutthhoorr SShheelllleeyy PPoowweerrss ddeemmoonnssttrraatteess hhooww rreeaaddeerrss ooff aannyy lleevveell
ccaann ttaakkee aaddvvaannttaaggee ooff tthhee ggrraapphhiiccss aanndd aanniimmaattiioonn ccaappaabbiilliittiieess bbuuiilltt iinnttoo ttooddaayy''ss ppoowweerrffuull bbrroowwsseerrss.. SShhee
ccoovveerrss GGIIFFss,, JJPPEEGGss,, aanndd PPNNGGss,, rraasstteerr aanndd vveeccttoorr ggrraapphhiiccss,, CCSSSS,, AAjjaaxx eeffffeeccttss,, tthhee ccaannvvaass oobbjjeeccttss,, SSVVGG,,
ggeeooggrraapphhiiccaall aapppplliiccaattiioonnss,, aanndd mmoorree ---- eevveerryytthhiinngg tthhaatt ddeessiiggnneerrss ((aanndd nnoonn--ddeessiiggnneerrss)) uussee ttoo lliitteerraallllyy ppaaiinntt
tthhee WWeebb.. MMoorree iimmppoorrttaannttllyy,, SShheelllleeyy''ss oowwnn lloovvee ooff wweebb ggrraapphhiiccss sshhiinneess tthhrroouugghh iinn eevveerryy eexxaammppllee.. NNoott oonnllyy
ccaann yyoouu mmaasstteerr tthhee mmaannyy ddiiffffeerreenntt tteecchhnniiqquueess,, yyoouu aallssoo ccaann hhaavvee ffuunn ddooiinngg iitt.. TTooppiiccss iinn PPaaiinnttiinngg tthhee WWeebb
iinncclluuddee::
GGIIFF,, JJPPEEGG,, PPNNGG,, lloossssyy vveerrssuuss lloosssslleessss ccoommpprreessssiioonn,, ccoolloorr mmaannaaggeemmeenntt,, aanndd ooppttiimmiizzaattiioonn
PPhhoottoo wwoorrkkffllooww,, ffrroomm ccaammeerraa ttoo wweebb ppaaggee,, iinncclluuddiinngg aa rreevviieeww ooff pphhoottoo eeddiittoorrss,, wwoorrkkffllooww ttoooollss,, aanndd
RRAAWW pphhoottoo uuttiilliittiieess
TTrriicckkss ffoorr bbeesstt ddiissppllaayyiinngg yyoouurr pphhoottooss oonnlliinnee
NNoonn--pphhoottooggrraapphhiicc rraasstteerr iimmaaggeess ((iiccoonnss aanndd llooggooss)),, wwiitthh sstteepp--bbyy--sstteepp ttuuttoorriiaallss ffoorr ccrreeaattiinngg ppooppuullaarr
""WWeebb 22..00"" eeffffeeccttss lliikkee rreefflleeccttiioonn,, sshhiinnyy bbuuttttoonnss,, iinnllaayyss,, aanndd sshhaaddoowwss
VVeeccttoorr ggrraapphhiiccss
AAnn SSVVGG ttuuttoorriiaall,, wwiitthh eexxaammpplleess ooff aallll tthhee mmaajjoorr ccoommppoonneennttss
TTiippss aanndd ttrriicckkss ffoorr uussiinngg CCSSSS
IInntteerraaccttiivvee eeffffeeccttss wwiitthh AAjjaaxx ssuucchh aass aaccccoorrddiioonnss aanndd ffaaddeess
TThhee ccaannvvaass oobbjjeecctt iimmpplleemmeenntteedd iinn mmoosstt bbrroowwsseerrss
GGeeooggrraapphhiiccaall aapppplliiccaattiioonnss ssuucchh aass GGooooggllee MMaappss aanndd YYaahhoooo MMaappss,, wwiitthh pprrooggrraammmmiinngg aanndd nnoonn--
pprrooggrraammmmiinngg eexxaammpplleess
VViissuuaall eeffffeeccttss ssuucchh aass ffoorrmmss aanndd ddaattaa ddiissppllaayyss iinn ttaabbllee oorr ggrraapphhiiccss
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: [phone] or [email protected].
Editor: Simon St.Laurent Indexer: Lucie Haskins
Production Editor: Rachel Monaghan Cover Designer: Karen Montgomery
Copyeditor: Genevieve d'Entremont Interior Designer: Ron Bilodeau
Proofreader: Rachel Monaghan Illustrator: Jessamyn Read
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 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.
P2.2. How This Book Is Organized
As I've mentioned, you can read the chapters in any order, though I would recommend reading Chapter 7
before progressing into the later sections of the book. Starting from the beginning, though….
Chapter 1, You Must Have Fun
Includes an introduction to the book, as well as an overview of how the book defines "web graphics."
Also included is the Web Graphics Hall of Shame, where former "luminaries" such as spacer GIFs and
BLINK are covered.
Chapter 2, Imagine
Provides an overview of the initial image types of GIF, JPEG, and PNG, including discussion on lossy
versus lossless compression, color management, and optimization. Also included are issues of
copyright, how to prevent hotlinking of images, and various online storage techniques.
Adobe Photoshop, GIMP, and ImageMagick also are discussed in this chapter. Any of these tools could
be used with the examples, but none of the tools are necessary.
Chapter 3, Photographs: From Camera to Web Page
Covers the photo workflow. It includes a review of several photo editors, workflow tools, and RAW
photo utilities, plus edits that can improve a photo specifically for web publication.
Tools used in this chapter are:
UFRaw
Adobe Camera Raw*
Adobe DNG Converter
Adobe Photoshop CS3*
Adobe Photoshop Elements*
GIMP
NET.Paint
Paint Shop Pro*
Adobe Lightroom*
Apple's Aperture*
Fauxto
Picnik
(Asterisks indicate software with a price tag.)
Chapter 4, The Web As Frame
Continues the work of taking a photograph from camera to the Web by examining the different ways
a photo can be displayed online. The approaches explored include thumbnails embedded in the page,
slideshows, and gallery software. This chapter also explores approaches to better presenting photos,
from background colors to presentation effects.
Tools used in this chapter are:
Gallery (online photo album software)
Lightbox 2.0 (embedded photo expansion software)*
Aperture* and Lightroom*
Adobe Photoshop CS3*
Postcard Viewer*
Photoshop Elements for Window*
The Java-based Gallery Constructor
Chapter 5, Pop Graphics
Focuses on the non-photographic raster images, including icons, logos, shiny buttons, and reflections.
Some of the more popular Web 2.0 effects—reflection, shiny buttons, inlays, and shadows—are
created using step-by-step tutorials. In addition, this chapter covers screenshot tools for posting
screenshots online.
Tools used are:
Adobe Photoshop*
GIMP
Skitch
SnagIt*
Chapter 6, Vector This: Early Days and Markup
Introduces the concept of vector graphics and explores some earlier and current vector formats,
including VRML and VML. This chapter then moves into a basic introduction to the Scalar Vector
Graphic (SVG) format, including how to use SVG in a page, and some of the vector graphics editors.
Tools used are:
Inkscape
Sketsa (non-timed, fully functional demo)
GIMP
Chapter 7, SVG Bootcamp
Provides a tutorial on working with SVG, including an overview and examples of all the major
components. This chapter also covers the different ways that SVG can be incorporated into web
pages, including how to work with embedded SVG. The basic shapes are covered, as are paths and
curves. In addition, the use of gradients and text is included. In order to focus on the technology, I
use only text editors and Inkscape to create the examples.
Chapter 8, CSS Über Zone
Focuses on tips and tricks related to CSS, rather than providing a general introduction. Included are
instructions on how to reset global whitespace, how to better control your layout, and how to work
with multiple classes. The CSS tool CSSEditor is explored in this chapter, as well as CSS validators
and browser extensions, which are all freely available.
Chapter 9, Design for the Non-Designer
Covers some of the basics of design, including accessibility, validity, mobile-readiness, and especially
readability. The use of color is explored, including its role in setting mood and enhancing the visual
experience. Several web sites are visited, to explore what works—and what doesn't—with each.
Chapter 10, Dynamic Web Page Graphics