Kewl Cats Animated Logo

• You should have completed the Kewl Cats Logo Tutorial and have your PSD end product to complete this tutorial.

1. Open up your Kewl cats psd. Right click on the cat layer and select apply layer mask. Duplicate the layer 3 times. Call these cat layers cat1, cat2, cat3.

2. On the top cat layer, cat3, lasso the front paw and click edit=>transform=>skew.
Grab the center bottom handle and move it slightly to the left so that the horizontal akew is set to -20.

3. Click on cat2. Use the rectangular marquee to select a rectangle around the tail starting at the top of the tail and encompassing the entire tail. Click on your lasso tool and set the lasso to "subtract from selection". Use the lasso to remove the selection that includes the body beyond the tail on the right by encircling it.

4. Click Filter=> distort=> Shear. Put dots in the first three center line points and move the bottom point to the left about half way to the next guide line. See the image on the right.

5. Click on Cat 1. With the selection still selected, click control F. Then use your Lasso tool set back to normal selection to encircle the front paw. Click Edit=>skew. Grab the center bottom handle and move it slightly to the left so that the horizontal akew is set to -20.

6. Turn your cat layer on now and the cats1, 2, 3, layers off now by clicking the eye in front of them.Save your PSD now.

If you are going to go on to make the template for your site and slice, please skip to this next tutorial now.

If you just want the animated logo, Switch to Image Ready Now.

Image Ready Animation

7. Use your slice tool to slice the tail and the front paw you worked on in this tutorial, making a total of 5 slices. Call the tail slice "tail" and the paw slice "paw" on the slice panel. Set the tail slice and the paw slice to gif. The rest should be jpg's

8. Open your animation panel.

Set the timing of frame 1 to 1 second.

Duplicate current frame by clicking the double paper icon on the bottom of the animation panel. Turn off cat layer and turn on cats1 layer by clicking the eye on or off accordingly. Set the frame2 to 1 second.

Duplicate the current frame2. Turn off cats1 and turn on cat layer. Set the frame3 to 0.5 seconds.

Duplicate current frame3. On frame 4, turn off cat layer and turn on cats2 layer. Set the timing of frame 4 to 0.5 seconds.

Duplicate current frame 4. On frame 5 turn off the cats2 layer and turn on cats3 layer. Set the timing of frame5 to 0.5 seconds.

9. Optimize and file=>save optimized as. Name your html fragment cat.html. Use the table of images with the image sin the image folder in your html document.