Painting the Web

Painting the Web

by Shelley Powers
Released May 2008
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596553920

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Publisher resources

View/Submit Errata

Table of contents

  1. Painting the Web
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. Preface
      1. How to Use This Book
      2. How This Book Is Organized
      3. Conventions Used in This Book
      4. Using Code Examples
      5. How to Contact Us
      6. Safari® Books Online
      7. Acknowledgments
    4. 1. You Must Have Fun
      1. What Was Good Enough for Grandpappy…
      2. Draw Me!
      3. $$$$$$$$$$$$
        1. Pictures on the Cheap
        2. Programming for Pennies
      4. Graphics: Taste Great, Less Filling
      5. It Hurts! Make It Stop!
      6. Web Graphics Hall of Shame
        1. Under Construction
        2. Web Design and Graphics As Tail Wagging the Dog
        3. Hamster on a Color Wheel
        4. One Can Never Have Too Many Widgets
        5. The Browser Wars
        6. Mystery Meat Navigation
        7. Animated GIFs
        8. The Splash Page
        9. Don't BLINK
        10. The Spacer
      7. On with the Wondrous Variety
    5. 2. Imagine
      1. Raster Graphics and RGB Color 101
        1. The RGB Color Model
        2. Raster Graphics: A Text Example
      2. JPEG
        1. Lossy Compression
        2. JPEG and Managed Color
        3. LCD for Color on the Web
      3. GIF: Lossless and Paletted
        1. GIF Animation and Throbbers
        2. GIF Compression
      4. PNG
        1. PNG and Transparency
        2. Transparency and Anti-Aliasing
      5. Images: Annotated, Embedded, and Optimized
        1. Images. In Pages.
        2. GIF Optimization
        3. JPEG Optimization
        4. PNG Optimization
      6. Steal This: Images, Copyright, and Hotlinking
        1. OK to Copy, Not OK to Link
      7. Image Storage
        1. Hosting on a Social Network Photo Site
        2. Other Hosting Solutions
        3. Regardless of Choice, Have an Exit Plan
    6. 3. Photographs: From Camera to Web Page
      1. The Web Photographer's Workflow
      2. Working with RAW Images
        1. UFRaw
        2. Adobe Camera Raw
      3. Editing Photos: Bending Light
      4. Color Match That Group: Optimization in Numbers
        1. Classic Color Matching with Adobe's Color Match
        2. Home-Baked Color Matching: Cooking with Levels and Curves
        3. Overlay Color Match Workaround
      5. It's Black and White and Not Red All Over
      6. The Illustrative Effect
        1. Sharpen Me Up, Blur Me Down
        2. The Gaussian Blur and "Mood"
      7. Knockouts and Extractions
      8. A Survey of Desktop Photo Editors
        1. Adobe Photoshop CS3
        2. Photoshop Elements
        3. Paint Shop Pro Photo XI
        4. Paint.NET
        5. GIMP
      9. Online Editors: Fauxto and Picnik
        1. Fauxto
        2. Picnik Photo Editing: Less Is More
      10. Photo Workflow Software
        1. Apple's Aperture
        2. Adobe's Lightroom
      11. Photo Workflow: Camera to Web Redux
    7. 4. The Web As Frame
      1. The Art of Thumbnail Sizing
        1. Resizing, Resampling, and Retargeting
        2. iSizing
        3. Mobile Sizing
        4. Seam Carving
      2. The Creative Art of Thumbnails
        1. Adding Drop Shadows
        2. Cut-Out Thumbnails
      3. Expanding Thumbnails
      4. Embedding Photos: Condiment and Spice
        1. Prep
        2. Float a Row of Images
      5. Plating Photos
        1. Creating a Reusable Ladder Mask
        2. Torn Edges
        3. Broken Photo
        4. Group Effects
      6. Generated Galleries and Slideshows
        1. Editor and Workflow Shows
        2. Specialized Web Gallery Applications
      7. Gallery Software on the Server
      8. A Bit of Code
    8. 5. Pop Graphics
      1. The Graphic Toolbox: Shapes, Layers, Gradient, and Blur
      2. Shiny Buttons:Gel, Wet, and Glass
        1. Creating a 3D Button in GIMP: Shiny
        2. Creating a 3D Button, Two: The Dip
        3. Creating a 3D Button, Three: The Wet Button
      3. Badges and Bows: Beyond the Buttons
        1. Simple, Shiny Irregular Shape
        2. Glowing Rather Than Shiny
      4. Reflecting on Reflection, and Shadowing Revisited
        1. Reflection As Mirror Image
        2. Reflection As Cast Shadow
        3. A True Reflecting Reflection
        4. Reflecting Screenshots and Pictures
      5. Reverse-Engineering Ideas
      6. Instant in Time: Screenshots
    9. 6. Vector This: Early Days and Markup
      1. WebCGM
      2. The 3Ds
      3. VML
        1. VML Basics
        2. A Brief Trip into Advanced VML
      4. Hello SVG
        1. A First Application
        2. SVG Full, Tiny, and Basic
        3. Browser Support
        4. The SVG Shapes
        5. URIs and Reuse Through defs and use
        6. Coordinate System, Grouping Objects, and Object Rotation
        7. Style, Units, and Color
    10. 7. SVG Bootcamp
      1. SVG Full, Basic, and Tiny
      2. Browser Support: Standoffish or Integrated
        1. SVG Through the object Element
        2. Inline SVG
      3. The Structure of the SVG Space
      4. SVG Elements
        1. Rectangles and Paint Attributes
        2. Lines, Stroke Patterns, and desc
        3. Text
        4. Circles, Ellipses, and Gradient Fills
        5. The Polys: Polylines and Polygons
        6. The Image
        7. Groups and SVG As Containers
      5. Paths, Patterns, and Markers
        1. Basic Path Commands
        2. An Elliptical Arc Curve Path
        3. Quadratic Bézier Curves
        4. Cubic Bézier Curves
        5. Paths, Markers, and Arrow Heads
        6. Paths As Patterns
      6. Revisiting the Viewport and the viewBox
        1. The viewBox
        2. preserveAspectRatio
      7. Transformations
      8. SVG Tools
        1. Inkscape
        2. Sketsa
        3. SVG Converters and Other Tools
      9. Static SVG Secrets
        1. Finding and Adapting SVG
        2. Adapting the Image
        3. Embedding the Musical Notes
        4. Issues with SVG Embedded into Pages
    11. 8. CSS Über Zone
      1. Selector Magic
        1. Using the Universal Selector to Globally Reset Whitespace
        2. Dropped Caps with Pseudoelements
        3. Specificity and Multiple Class Names
      2. CSS Tips and Tricks
        1. Same Length Sidebars
      3. div Play Dough
        1. Horizontal Lists
        2. The Unit Font Trick
        3. Multiple Stylesheets and Stylesheet Switchers
        4. Programming CSS
      4. CSS Tools and Utilities
        1. Snooping CSS Through Firefox and the Web Developer Toolkit
        2. CSS Editors
        3. CSS Validation
        4. CSS Toys and Tools
    12. 9. Design for the Non-Designer
      1. The Elements of Page Design
        1. Clear Navigation: Missouri's Department of Conservation
        2. The Readability of a Site: The CSS Zen Garden
        3. An Uncluttered Site: The Guardian Unlimited
        4. A Purposeful Site: I Love Typography
        5. Minimizing Confusion: Usability, Accessibility, Validity, and Meaning
      2. Web Pages Are Like Ogres, and Ogres Have Layers
        1. Only the Shadow Knows
        2. Multiple Backgrounds, Multiple Layers
      3. Flexible Designs
      4. Colors: Make Your Page Happy, Make Your Page Sad
        1. Web Colors: Worry? Not?
        2. Color and Accessibility
        3. Color, Schemes, Themes, and Mood
      5. Typography for the Page
        1. Choosing a Font
        2. Increasing Readability: Color Contrast, Line Length, Line Heights
      6. Web Design Tools
        1. Editors
        2. Web Authoring Tools
        3. Other Tools and Utilities
      7. Additional Readings
    13. 10. Dynamic Web Page Graphics
      1. The Quick Intro to the DOM
        1. Enter: The DOM
        2. Working with CSS Style Settings
      2. Coloring Highlights
      3. Changing Class and Transparency
      4. Programming with Images
      5. Accordions: Smooshable Spaces
    14. 11. Canvassing
      1. Cross-Browser canvas Support and Microsoft's Silverlight
      2. canvas Basics
        1. Beginning to Draw
        2. Basic Shapes
        3. Paths
        4. The Curves
      3. Saving State
      4. Layering and Clipping
        1. Clipping
        2. globalCompositeOperation and a Quick Word on Text and HTML Integration
      5. canvas Effects
        1. Gradients
        2. Transformations
        3. Images
    15. 12. Dynamic SVG and canvas
      1. Embedded Animation
        1. animateColor
        2. animateMotion
        3. animateTransform
        4. set and animate
      2. Scripting SVG
      3. Embedded Scripting
        1. Cross-Document Scripting
      4. Animated Clock: The Hello World of Animated and Interactive SVG
        1. The Dots, the Dots
        2. SVG Animation
      5. Scripting canvas: Zoom!
        1. Capturing Events on the canvas Element
        2. Dragging a Selection Rectangle and Frame Animation
        3. Zooming In for the Finish
    16. 13. Image Magic: Programming and Power Tools
      1. Serving Up Photos: Insta-Slideshows
      2. Manipulate Images with PHP/GD
        1. Adding Borders
        2. Adding a Drop Shadow, Cheatin' Style
        3. Tilt!
        4. Mashup: Photos, PHP, and SVG
      3. Forget the Interface: The Magic of ImageMagick
        1. Understanding the Command-Line ImageMagick
        2. The ImageMagick Commands
        3. Simple Liners
        4. Multi-Line Commands
      4. Programming with ImageMagick and IMagick
    17. 14. The Geo Zone
      1. Mapping with Google
        1. Google Maps: Up and Running
        2. Fun with Markers
        3. Routes on Google Maps
      2. Yahoo!'s Maps
        1. Yahoo!'s Run
        2. X Marks the…
        3. Routing with Yahoo!
      3. Living Within the Geoweb
        1. Finding Longitudes and Latitudes
        2. Mapping a Photowalk with Yahoo!'s Maps
        3. Mapping an Event
    18. 15. Like Peanut Butter and Jelly: Data and Graphics
      1. Graphs: Every Which Way but Static
        1. Line Graph As Inline SVG
        2. IE- and HTML-Friendly Embedded SVG Version
        3. The Googlefied canvas Alternative
        4. Heck, Just Create a Picture, It'll Last Longer
        5. Bars, Charts, and Pies
      2. Mining Your Photos
      3. Rosy Glow of Completion
      4. One Last Look at Data and Visualization
      5. The data: URI
        1. Sparklines
      6. At the End of This Rainbow
    19. Index
    20. About the Author
    21. Colophon
    22. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: Painting the Web
  • Author(s): Shelley Powers
  • Release date: May 2008
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596553920