Microsoft Image Composer Reshapes the Look of the Web

Alvy Ray Smith

Alvy Ray Smith is a pretty interesting guy, as you can discover for yourself at http://www.research.microsoft.com/research/graphics/alvy/.

The advent of the Web as a development environment has made developers increasingly “image” conscious. Image Composer is an easy-to-use image compositor and editor for on-screen delivery of images, whether in a Web page, a video, a Microsoft PowerPoint presentation, a CD-ROM title, or a video game.

We call Image Composer a sprite compositor and editor because we emphasize images that have an irregular shape—and a sprite is exactly that, an image with shape.

Image Composer, which was code-named “Dali,” uses a paradigm unlike that of most other image applications. It allows you to create an image by assembling image objects (another term for sprites) on a desktop or workspace. You can move these objects freely and independently by selecting a subset of pixels, which “unglues” those pixels from the underlying image and allows you to move, or “float,” the selection over the underlying image from which it was extracted.

For example, you can select an image of a vase of flowers on a table—and move it. Then you can set that vase of flowers aside momentarily and—this is how Image Composer most differs from other image applications—you can come back to the vase later and move it to a new location without having to reselect it. The image objects are never “glued down”—fixed in one location—until you, as creator, decide it’s time. In the more common paradigm for image editing, everything is glued down as the default.

This makes image creation far more intuitive, easier to learn and to use than importing a rectangular background image and making modifications to it—a paradigm that forces the user to think in terms of rectangular results.

Shape, by the way, includes “opacity shape”—that is, pixel-by-pixel transparency—as well as two-dimensional spatial shape. If you want to work with rectangular, opaque sprites, of course you may. Often, your final composition will be rectangular and opaque—always, if you are going to a Web page today—but this is a decision you can make separately from the creation of your final image.

For example, I just put my great-great-grandparents into my Web page, using Image Composer, as softly vignetted oval cutouts from old photographs that I scanned into Image Composer (using the built-in TWAIN scanner support). Since I knew the result was going to a white Web page, I simply told this to Image Composer, which exported the final .GIF image files with my ovals composited over a white background. I didn’t have to carry around an all-white image sprite for this simple background. And on the Web page (http://www.research.microsoft.com/research/graphics/alvy/family/), my forebears appear in soft-edged ovals, not hard-edged rectangles. The white of the .GIF file disappears into the white of the Web page.

Because the individual sprites of a more complex image can move independently of one another, or “float” (one reason for the name), they are always available during the design process for rearrangement. This allows nonartists to assemble attractive pictures by assembling (or compositing, as we call it) pieces (or sprites)—just by clicking and dragging.

The user paradigm is new only for images. Anyone who has used a drawing or illustration application should recognize the user interface. The only difference is that Image Composer applies the interface to pieces of images (sprites, or image objects) rather than to pieces of geometry (drawings of geometrical objects, such as triangles, rectangles, ovals, or polygons). So such familiar features as reordering, multiple selection, alignment, individual resizing and rotation, and select-by-clicking all work in the same way in Image Composer.

However, instead of line drawings or line drawings with fill patterns, you manipulate full-color sprites. The desktop (or workspace) familiar from drawing or illustration applications is also present in Image Composer. It’s just “whatever is there,” not necessarily a part of the final creation. If you really want to maintain the old style, you can always insert a rectangular, opaque background sprite.

Image Composer supplies hundreds of “starter sprites,” so you can create interesting images immediately. Or, if you need to create new sprites, it has tools for extracting sprites from scanned images or photographs, or you can select areas of common color to “lift” a sprite from another image.

There is also an entire image editor with hundreds of effects that can be applied to each sprite—plus any plug-in compatible with Adobe PhotoShop. The product includes color correction tools, spatial transformations and warps, softening or sharpening filters, sprite-to-sprite transfers of pixels, and painting. In fact, if you have only a single rectangular image, then Image Composer is just a classic image editor. We believe you will find the emphasis on un-glued, floating, shaped sprites refreshingly different—and even an obvious thing to do.

While you’re at it, try using the GIF Animator tool with Image Composer. It features an 8-bit previewer mode that lets you look at your pictures as they would be seen on a Web page, even though you are creating in Image Composer in 24 bits for maximum flexibility.

Until it goes into widespread release late this year, Image Composer and the GIF Animator are available for beta download at http://www.microsoft.com/imagecomposer/, where you can also obtain product information and free sample images. Image Composer will ship with Microsoft FrontPage 97.