TEKNIDERMY - ISSUE 7: November/December 2001

Zoomer Tutorial

Created By: Rich Flathmann

DesktopX is a application that allows skinners to create and customized their own desktop, which is mainly done via objects and or animated zoomers etc. Since it's all left up to your imagination & graphical skills the styles and designs are limitless!

Zoomers are basically a graphical animated blow out object that you can create to activate an action or application on your desktop and when you perform either a mouseover or click on it the object then appears to "Zoom Out" for more details on how to accomplish these effects on zoomers Rich has created this Tutorial in hopes of assisting you brave skinners that wish to try your hand at making these cool looking effects ;)

Read on to learn how...

Zoomer Basics

Zoomers can be created in one of two ways. With the old "255 0 255" transparency color or using more "modern" per-pixel alpha blending. Doing it "the old way" will many times cause problems with jagged edges, makes it almost impossible to have nice shadows, and every pixel must be accounted for otherwise you'll end up with purple specs or edges. However, if you want to create smooth blended edges, smooth shadows and awe inspiring effects, do it with "per-pixel" blending. I am going to focus on the "modern" way but you can easily apply the basic idea using the transparent background color method.

How it works

A Zoomer (or any DX animated object) is simply a series of horizontal frames that DX divides into equal size images. For example, if you create an image 575 pixels wide and tell DX that there are five frames in the animation, it will create five 115 pixel wide images from the source file. If you're doing per-pixel alpha blending, DX will also divide that image in two vertically using the bottom half as the image mask. So, if you create a 500X200 pixel image, the final size of the image that DX creates is five frames at 100X100. More on this below.

The real trick is being sure that each image within the "frame" lies in the right spot so the animation doesn't jitter from side to side or up and down. If you're going to create an "alpha-blended shadow", be sure to leave room at the bottom of the actual image and mask for it (see the illustration for details). Doing a simple Zoomer usually entails starting with the last frame (the farthest right) which is usually the largest. It is almost always better to start with a large image and reduce it to avoid pixelating the image. Then, making copies of that image, reducing it proportionately and moving it left into each subsequent frame.

Alpha Blending

In a DX "per-pixel alpha blended" image, the bottom half of the image is the "mask" which tells DX what part of the top row of images is opaque vs. transparent. Black is totally transparent where as the white is totally opaque. Any shade in between is proportionately transparent. For example, 50% gray would make the image above 50% transparent.

Tricks

(I use Photoshop but you can figure out how to do it in your own program)

Grids: Decide on the number of frames your final image will require, how wide each frame will be and then multiply. Let's say we wanted a 100 pixel wide image and 7 frames of animation. 7*100=700. Make your canvas 700 pixels wide (add around 10 pixels per frame if you're doing a shadow) Then, in Photoshop, go to EDIT->PREFERENCES->GUIDES & GRID. Make sure GRID measurement is set to pixels and in the "Gridline Every" box, put "100" and "1" for subdivisions. Then make sure you turn GRIDLINES on in your VIEW settings. Each horizontal gridline will now represent a single frame of the animation. Unfortunately you'll have to ignore the vertical gridlines and use a ruler guide instead.

Image Masks: Create your top row of images first, then duplicate it. Move it down to the bottom row and remove all black from the image for a totally opaque duplicate. This way you're assured of an exact copy of what exists in the images.

Simple Shadows: Duplicate your Mask layer, call it Shadows and fill it with 70-90% black depending on how dark you want the shadow to be. Depending on the size of your image, move the shadow layer right and down so it overhangs the MASK. In that layer, use the Magic Wand to select the background. This should select everything but the shadows themselves. Do a SELECT INVERSE, then SELECT FEATHER, Depending on the size of the images, use anywhere from four to six pixels, Now, SELECT INVERSE again and EDIT CLEAR. This will feather the edges so that you get a nice soft shadow, Now, move the layer behind the mask layer. The reason I do it this way rather than selecting the MASK images themselves is that sometimes I use varying degrees of opacity. Doing it this way assures that I get all of the image outline.

Realistic Shadows: The problem with Simple Shadows is that it shadows all frames equally. In real life something that actually moved away from the desktop would create more of a shadow as it "Zoomed" towards us. To accomplish this, we need to do more work. The shadow layer we created is going to have to be separated and each one adjust appropriately. The first frame should have very little shadow whereas the last frame should have the most.

Animation: If you want your Zoomer to look even "Zoomier" keep the leftmost image in the lower left part of the frame and the right one at the top right of the frame. This will make the icon look even more like it's Zooming out.

Double Check: That your image width is EVENLY divisible by the number of frames you want and that your image height is evenly divisible by two. Make absolutely sure that your background (the parts you want transparent) are 0,0,0 otherwise your entire object will have a haze around it.

Focus: Each time you reduce one of these tiny images, some detail is lost. I use a "Unsharp Mask" to bring some of that lost detail back. However, be careful or you can turn a nice smooth image into a frenzy of high and low contrast pixels resulting in something that looks as if it is even more out of focus. Small adjustments are the key here.

Credits: I learned a lot thanks to Paul (mormegil) Boyer. I'm indebted to Paul for allowing me to "hack" his Zoomers and then providing me with feedback and encouragement. As anyone who uses DX knows, Paul is an incredibly talented artist and we should consider ourselves lucky to have him as part of the skinning community.

(Click on image to view upclose)