Painting the Web
1st Edition
Published on 10. June 2008
Book
Paperback/Softback
655 pages
978-0-596-51509-6 (ISBN)
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.
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.
More details
Other editions
Additional editions
E-Book
05/2008
O'Reilly
€35.49
Available for download
E-Book
05/2008
O'Reilly
€37.49
Available for download
Person
Shelley Powers has been seeking fun in technical topics from ActiveX to RDF to CSS to JavaScript to Ajax over the last decade. Recent books including "Learning JavaScript", "Adding Ajax", and "Practical RDF" (all O'Reilly). She has spent much of the last few years taking pictures, as a glance at http://burningbird.net/category/photography/ will demonstrate.
Content
Inhaltsverzeichnis
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
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