PDA

View Full Version : Creating an Animated Siggie in Photoshop



Lisa
05-14-2011, 01:08 AM
<?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
05-14-2011, 04:23 AM
This is awesome Lisa! I always wondered how to do this :) Might have to give it a go soon

Jodi
05-23-2011, 02:32 PM
Awesome tutorial Lisa!

GodBlessAmerica
02-28-2012, 04:29 AM
Great tutorial. I have not done any animation in a few year. I need to re-learn it. lol

geswho40
08-05-2012, 07:29 PM
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
08-05-2012, 07:56 PM
I have never done animation in CS so it's good to know how!! Thanks!

msbrad
08-05-2012, 10:39 PM
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
08-06-2012, 12:49 PM
I just came across this now - great tut Lisa! I've done this before - but you explained it so well!

Ricki
08-17-2012, 10:23 PM
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
09-04-2012, 03:11 PM
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
09-09-2012, 02:16 PM
Super Awesome! And thanks for using my kit for this tutorial. It looks fantastic!!