This episode covers an exhaustive workflow that utilizes video clips (first stabilized in After Effects CS4) as both an animated surface map and bump map on a 3D sphere. Along with painted layers to create big exaggerated craters, the effect is pushed to the limit with dramatic lighting and finished off with a concave star field behind it.

Get your 3D Glasses!
The final step in this process is to convert the 3D objects in this animation to stereo anaglyph (red/cyan) – giving it incredible depth!

3-Minute Podcast – 3D Stereo in Photoshop CS4 from Jeff Foster on Vimeo.

**NOTE** You can also download a clean, hi-res version of this movie HERE!

Here is a still shot of the final stereo 3D composition:

Don’t have Red/Cyan 3D Glasses? Get ‘em here FREE!
Send me a self addressed stamped envelope (letter sized) and I will send you a pair!
(one pair per request)

Jeff Foster
PO Box 187
Ojai, CA 93024

Due to popular demand (okay, a few “How’d you do that?” and “Cool animated avatar!” comments) I’ve decided to show you the steps I took to animate my PixelPainter avatar in Photoshop CS4; as well as the last few steps in putting your own animated avatar (GIF) up on your Twitter account. *Tip: It’s really just a matter of persistence – and don’t believe everything you’re told!

I knew that my finished avatar needed to be square so I created a new Photoshop file and imported all the components I needed for my animation. In my case, it’s my company logo, as shown here, but with the designed Text, Arrow and Brush on separate layers in a Photoshop file. Then I scaled them to best fit the new file for the animation.

I opened the Animation palette and selected the Text layer as it was going to scroll across the panel horizontally. I decide that I want the animation to be 3 seconds in length so it’s not too big, so I condense the Work Area bar down to the 3-second mark. I then move the Time Indicator (TI) down to just short of the 1-second mark and set a keyframe for the first position by click on the Stopwatch next to the Text layer in the Animation palette. I then move the TI to the 2-second mark and click-drag on the text layer in the view panel until it goes off the left side and out of view. I can then scrub back and forth with the TI and watch my Text layer move.

I then moved on to the Arrow layer and animated it’s movement onto the “screen” in a similar way, adding keyframes on the Timeline of the Animation palette. I also animated the Opacity of the Arrow layer so it would appear to flash on/off rapidly to indicate a “click” event that starts the animation loop.

Next, I brought int he Arrow layer at the point of the animation where the blue “Painter” text starts to appear and “mocked” some brush stroke movement over time on the Timeline. *Note: I used the term “mocked” here, because to literally have the brush follow the strokes exactly over a 1/2 second period of time would merely generate a nasty blur. I know this because I tried it first!

I then add a fade at the end of my animation so it will appear to loop seamlessly going to white and then starting again in white. I select the Play button on the bottom of the Animation palette to preview the complete animation and make adjustments accordingly. This is a purely subjective process that you will have to spend some time with your own animation.

Once I was satisfied with my animation loop, I selected “Save for Web & Devices” from the File drop down menu. This opens up a new window with it’s own interface and all the tools/settings you’ll need to create an animated GIF from your Photoshop animation.

Obviously, the screen is a lot larger than the image above, so let me point out the important parts to consider…

First, be sure to select the GIF file format and choose “Selective” color. This will force the colors used to a specified amount, based on the most predominant colors in your avatar. Set the number of colors down to 64 to start. You may be able to reduce the number of colors depending on your animation design, and this will make your finished animation smaller in size and load quicker on a web page. Less is more with animated GIF files! Note that this may make your avatar look funny or posterized. Just increase the number of colors until it looks acceptable. But also be cautious of the next step that follows…

Next keep an eye on the lower-left corner of the window as you’re making the adjustments to Color, Dither and Lossy settings. These will greatly affect final file size!

If you know that your animation has to be a specific size for your forum or social community portal, then the bottom right corner is where you can make these adjustments by pixel size or percentage. You can also chose whether or not you want your animation to loop forever or a specified number of times before stopping. These choices too, will affect the final size of your animated GIF.

I’ve used my animated avatars in several Web communities, so I needed several different sizes. This was the easiest way to get all the different sizes from the one larger master Photoshop file.

Twitter Users:
Here’s a tip about getting your animated avatar into Twitter! (remember, persistence is the key – and a bit of patience)

First go to your Settings page in your Twitter account (you must be logged-in of course) and select the “Picture” tab. Click on the Browse button to locate your animated GIF on your hard drive and select “Save”.

More than likely it won’t work on the first try. You will get one of a few different error messages, such as the one shown below stating that “Twitter is over capacity.” It’s probably just their way of discouraging people from using animated GIFs for avatars – or maybe just a bugging infrastructure, but nonetheless – don’t be fooled by the error messages! This is where both persistence and patience come in. Like trying to get a “human” to talk to from the cable company, you have to keep trying… Over and over and over until eventually – Viola! It sticks!!

To see my Twitter profile with the avatar in action, CLICK HERE!

. . .

First of all, let me start this post by stating that I DO applaud Adobe for combining the animation capabilities of Image Ready into Photoshop, starting with Photoshop CS3. I was hoping they would have stepped up to the plate and given us a bit more in CS4, however. Simple things like a little more control of keyframe interpolation. Allow us a little finesse in the control of keyframes, as we have in After Effects (for several versions now). Also, the biggest disappointment is the stuttering layer movement that makes your animations look like a GIF animation from 1998. Opacity fades are a bit more smooth, but move a layer over time, and you may be a bit disheartened.

Let’s take a look at the Photoshop CS4 Animation Panel:

Photoshop CS4′s Animation Panel – showing a 3-layer animation

This is an example of a simple 3-layer animation… a background in motion, along with a mid-ground element and a foreground layer. In After Effects, this would go together quickly with many simple controls to chose from on the Timeline. However, this is a much more complicated process in Photoshop, since there are so many limitations and lack of simple animatible functions and keyframe tools.

For instance, the simple tools that would give you more control over layer animations would be:
• Keyframable Scaling
• Keyframable Rotation
• Keyframe Interpolation controls – more than just Hold or Linear (on/off)
• Smoother motion of layer elements in an animation (perhaps adjustable by frame rate?)

In comparison, let’s take a look at the After Effects CS4 Timeline Panel:

This is the After Effects CS4 Timeline Panel, split & stacked to view the details

Again, there are far more tools for animation on the Timeline Panel in After Effects than there are in Photoshop, such as Motion Blur, Frame Blending, 3D Layers, Graph Editing, and much, much more…
But what I’d like to compare are the “logical”, simple tools that Photoshop should include at minimum, like SOME Keyframe Interpolation control (even just a simple on/off for Easy Ease In/Out) and the ability to animate Scale and Rotation (or any other Transform functions, if they should chose to do so)!

Okay – so how about we take a look at the end results of this simple animation, with a side-by-side comparison video:

*Download a hi-res, non-streaming version of this video clip to really see the difference here: Hi-Res h.264 Movie Clip

Notice the difference between the smoothness of the After Effects animation compared to the Photoshop version? The only thing I did different between them was to use an Easy Ease In/Out on the Keyframe Interpolation in AE CS4… something not available in Photoshop CS4. But the quality of the layers in motion between the two examples is what I’m mainly concerned about. Both were set to 30fps as well.

So why am I so bothered by this, anyway? Why should I care if Photoshop has these tools when obviously, I have After Effects and have self-admittedly stated that I find that workflow much easier to achieve the results I’m looking for?

Well, I’m thinking about the average guy/gal here. You know, “Joe Six-pack & Jane Wine-box”. They probably don’t have the premium suite which includes After Effects, or maybe they’re intimidated by it’s complex UI, that they have to take a nap by merely opening it up and viewing it. Either way, they’re promised something in Photoshop that is still only “barely” there in my opinion.

I don’t think this is asking too much from Adobe – and I’m not trying to circumvent the After Effects capabilities by trying to do everything in Photoshop, or suggest that Photoshop is any kind of replacement for After Effects – only that Adobe considers that if they are going to go down that road by claiming Photoshop’s keyframe animation capabilities, that they NOT take a half-assed approach at it!

There.
I’ve come down to the point where I actually swore in my blog.
Thanks Adobe.

…/RANT

Jeff