This interface is unique because most of the shading on the metallic panels was done freehand with the airbrush tool. For each part of the floating display doo-hickey, I created a selection with the selection tools, and filled them with 50% Gray. Then, I dropped the selection, turned on Preserve Transparency for that layer, and used the airbrush tool to add the highlights and shadows I wanted. Working with the freehand tools does take practice, but if you're looking for that less-than-precise appearance of a metallic gadget that a mad scientist might throw together, you might try it!

Today's tutorial is all about those little LED lights that are reminiscent of Kitt from Knight Rider. I'll explain how the animation was made with the fade out effect. The tutorial assumes that the lights will animate from left to right, but you can easily make adjustments to make them animate in any direction. So, start up your graphics application of choice, and lets get going:

1. First of all, you'll need the flare or the glow that gives the appearance of an illuminated light. (If you happen to be using Photoshop, there are some flare brushes, which were used in this interface. To load them, open the Brushes palette, and click Load Brushes under the triangle menu. Then, navigate to Goodies/Brushes/Assorted Brushes.abr in your Photoshop directory to enable the flare brushes) Add a flare to a new layer, and position it on top of the first light.


Some Assorted Brushes
in Photoshop

2. Decide how many frames it takes for a light to fade out. I used 3 frames, which means that each light has 3 levels of intensity. That corresponds to the number of layers you'll need for the flares. Make a copy of the flare layer, and position the new copy to the left the distance that the lights are spaced apart. In the Sphere interface, the lights are 10 pixels apart, so I moved the 2nd flare 10 pixels left (which is not currently over a light). Then, I copied the original flare to yet another new layer, and moved it 20 pixels to the left, making a total of 3 flares, with 10 pixels of distance between them.

3. Next, adjust the opacities of the flare layers to create the fade-out effect. I left the original frame at 100% opacity, set the middle one to 67% opacity, and the left one to 33%. Now, I am ready to start generating the frames of the animation. Link the flare layers by turning on the chain icon of the unselected layers. Linking layers causes them to be moved together. Below is what the layers palette should look like with the linking icons shown. If your application doesn't have a layer linking feature, you'll simply need to move each layer individually.

4. To generate the first frame, I want the 100% flare to be on top of the leftmost light, with the flares fading out to the left. Because the flares to the left aren't over any lights at all, turn off the visibility of those respective layers by clicking the eye icon next to them. Then, to make a copy of this frame of the animation, select any visible layer (one with the eye icon on) and make a rectangular selection around the total area surrounding the lights. Use guides if possible (such as in the Sphere interface) to precisely place the rectangular selection. Do a merged copy (Edit»Copy Merged), and then paste into a new document. This is the same process you would use to "cut up" a PSD file into smaller images for re-assembling in an HTML table. For each frame of the animation, they can be made into layers in a separate file for importing into a GIF animator. Repeat this step for each frame of the animation by moving the linked flares 10 pixels to the right so the 100% flare is over the next light, toggling on and off the flare layers so the ones that are over lights are visible, and making another merged copy. For simplicity, each of these frames can be put on a separate layer in one image, leading to a document that looks like this:

5. At this point, you're done with your main graphics application and can finish up in your favorite GIF animation application. If you have an animator that supports importing of layered PSD files, use that with the document containing all of the frames of animation.

In my animation, I rotated the different flares slightly between the different intensities for a very subtle spinning effect. Other things you might try include changing the flares' colors as they move, or using additional flares to more gradually fade out the glow effect.





Included Generic Version