Creating an Animated Siggie in Photoshop

[Lisa]

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
Here at GingerScraps your finished siggie needs to be 700 pixels x 150 pixels MAX.
<o:p></o:p>
<o:p></o:p>
First, build your background and add your shows as in a normal LO. Next, add the element you wish to animate, I chose a butterfly. Add your first element in the first position…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/1-2.jpg<o:p></o:p>
<o:p></o:p>


I usually don’t name my layers but I do when animating, I called mine butterfly 1. Now duplicate that layer, I use crtl+J, rename it butterfly 2, then using the arrow keys nudge it over so the layers overlap a bit…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/2-3.jpg<o:p></o:p>
<o:p></o:p>


Next, using ctrl+T, rotate the element a bit to mimic the butterflies fluttering, you can make it a bit smaller also. In my finished siggie I used PS5’s Puppet Warp, it’s not necessary but fun, and we’ll cover that later.<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/3-2.jpg<o:p></o:p>
<o:p></o:p>

Now duplicate butterfly 1 again, in the layers palette move it over butterfly 2, rename it butterfly 3. Using the arrow keys nudge it so it overlaps butterfly 2. Now duplicate butterfly 2, name it butterfly 4 and move it over butterfly 3, then nudge. Continue to duplicating, renaming and nudging until your screen is covered.<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/5-2.jpg<o:p></o:p>
<o:p></o:p>

Click the eye in the layer palette so that only butterfly 1 is visible. Now open the Animation window…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/6-2.jpg<o:p></o:p>
<o:p></o:p>


If your screen doesn’t look like this, click the Convert to Frame Animation…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/7-2.jpg<o:p></o:p>
<o:p></o:p>

Chose a frame time, try .02 seconds…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/8-1.jpg<o:p></o:p>
<o:p></o:p>

Click the duplicate frame button in the animation palette…
http://i182.photobucket.com/albums/x65/dirtchickpics/12.jpg

In the layers palette, unclick the eye button next to butterfly 1 and click the eye next to butterfly 2… <o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/11.jpg<o:p></o:p>
<o:p></o:p>

Repeat the steps, click the duplicate frame button in the animation palette, in the layers palette, unclick the eye button next to butterfly 2 and click the eye next to butterfly 3…<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/12.jpg<o:p></o:p>
<o:p></o:p>

Continue until all the frames are completed. I added one more frame without a butterfly and changed the timing on that frame to 1 second. Click play to watch. Save you file, then choose “Save for Web and Devices” chose GIF, you can resize it to under 700 x 150 if needed. Now it’s ready to upload.<o:p></o:p>
<o:p></o:p>
If you have Photoshop CS5 you can play with Puppet Warp. Go to Edit / Puppet Warp. You can add pins in places you want to manipulate; I made mine “squishyer”. Play with your element then replace it within the layers and timeline.<o:p></o:p>
<o:p></o:p>
http://i182.photobucket.com/albums/x65/dirtchickpics/13.jpg<o:p></o:p>
<o:p></o:p>

<o:p></o:p>
<o:p></o:p>
<o:p>Today I decided I wanted the butterfly to fly behind the "A" so I moved that layer to the top of the list.</o:p>
<o:p></o:p>
<o:p>I hope this is a fun tut, and hopefully NOT confusing. Post up if you have questions.</o:p>

[PixelsByJen]

This is awesome Lisa! I always wondered how to do this :) Might have to give it a go soon

[Jodi]

Awesome tutorial Lisa!

[GodBlessAmerica]

Great tutorial. I have not done any animation in a few year. I need to re-learn it. lol

[geswho40]

Wow, thanks for pointing this out Lisa, this is really cool, I just may have to try this sometime soon. Great job on the tut, thank you for taking the time to put this together!

[missdamsel]

I have never done animation in CS so it's good to know how!! Thanks!

[msbrad]

Oh wow!!! how cool you did this tut for us! I was about to PM you to ask you created your awesome siggie!
Thanks- cannot wait to try this out.
m
ps- does it work other places??

[trina513]

I just came across this now - great tut Lisa! I've done this before - but you explained it so well!

[Ricki]

I never even thought of trying animation, always looked too complicated. Until now and it was so easy, I tried it on my first sig. Thank you very much Lisa for the great guide! When I succeeded I was thrilled like a kid to see my butterfly fluttering around :)

btw, how is it written, siggy or siggie? I have seen it written both ways many times..........

.....but then it didn't fly here so back to the old one until I work this out............silly me.

[swastinadia]

Wow, I just read this really useful tutorial.... I've always been a fan of your siggie, Lisa.
I think I might try it out and hopefully can come up with fun siggie like yours :)

[Harmonystar]

Super Awesome! And thanks for using my kit for this tutorial. It looks fantastic!!