|
Painting the Web
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.
CONTENTS:
Preface
1. You Must Have Fun
What Was Good Enough for Grandpappy-
Draw Me!
$$$$$$$$$$$$
Graphics: Taste Great, Less Filling
It Hurts! Make It Stop!
Web Graphics Hall of Shame
On with the Wondrous Variety
2. Imagine
Raster Graphics and RGB Color 101
JPEG
GIF: Lossless and Paletted
PNG
Images: Annotated, Embedded, and Optimized
Steal This: Images, Copyright, and Hotlinking
Image Storage
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
4. The Web As Frame
The Art of Thumbnail Sizing
The Creative Art of Thumbnails
Expanding Thumbnails
Embedding Photos: Condiment and Spice
Plating Photos
Generated Galleries and Slideshows
Gallery Software on the Server
A Bit of Code
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
Reverse-Engineering Ideas
Instant in Time: Screenshots
6. Vector This: Early Days and Markup
WebCGM
The 3Ds
VML
Hello SVG
7. SVG Bootcamp
SVG Full, Basic, and Tiny
Browser Support: Standoffish or Integrated
The Structure of the SVG Space
SVG Elements
Paths, Patterns, and Markers
Revisiting the Viewport and the viewBox
Transformations
SVG Tools
Static SVG Secrets
8. CSS ber Zone
Selector Magic
CSS Tips and Tricks
div Play Dough
CSS Tools and Utilities
9. Design for the Non-Designer
The Elements of Page Design
Web Pages Are Like Ogres, and Ogres Have Layers
Flexible Designs
Colors: Make Your Page Happy, Make Your Page Sad
Typography for the Page
Web Design Tools
Additional Readings
10. Dynamic Web Page Graphics
The Quick Intro to the DOM
Coloring Highlights
Changing Class and Transparency
Programming with Images
Accordions: Smooshable Spaces
11. Canvassing
Cross-Browser canvas Support and Microsoft's Silverlight
canvas Basics
Saving State
Layering and Clipping
canvas Effects
12. Dynamic SVG and canvas
Embedded Animation
Scripting SVG
Embedded Scripting
Animated Clock: The Hello World of Animated and Interactive SVG
Scripting canvas: Zoom!
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
14. The Geo Zone
Mapping with Google
Yahoo!'s Maps
Living Within the Geoweb
15. Like Peanut Butter and Jelly: Data and Graphics
Graphs: Every Which Way but Static
Mining Your Photos
Rosy Glow of Completion
One Last Look at Data and Visualization
The data: URI
At the End of This Rainbow
Index
|
