Photoshop CS2 Tutorial – Animated signature for WordPress
I’m going to teach you how you can create a slick little animated signature in Photoshop CS2 to adorn the end of your posts in your WordPress blog. I wouldn’t be surprised if there are easier ways out there to do this, but this is how I’ve always created an animated signature.
First you of course need a signature. You can either choose to find a handwritten style font or if you happen to own a tablet you can write your signature just like you would with a pen, pencil, marker…whatever. Maybe you’re even nimble enough to do it with a mouse. I use a Wacom tablet, so here is my actual handwritten signature that I’m going to use for this tutorial. Whichever way you choose to do it, just make sure your signature is on a transparent layer.
Step 1:
Open your layers palette hold down your ctrl key and click on your signature thumbnail.
You’ll know you’re clicking in the right spot when a dashed box appears on top of your hand icon. This should outline your signature.
For the sake of making it easier for you to see what I’m doing, I’ve created a second layer beneath my signature and just filled it with white. You don’t have to do this, however you can if you’d like. In the end you’re probably not going to use this layer unless you plan to put the signature on a website with a white background.
Step 2:
Now that you’ve highlighted your signature, go ahead and make the signature layer invisible by clicking on the small eye icon to the left of the layer.
You should now see something like this:
Step 3:
Now we get to the fun part. Actually creating the frames for our animation. To get started we need to make a new layer for our first frame. At the bottom of your layers palette look for the icon just to the left of the trash can and click it.
Now you should see something like this.
As you can see I’ve begun to name my layers. This helps to keep things organized as you begin adding more frames. I recommend that you name your layers as well, but you don’t necessarily have to.
Step 4:
Grab a decent sized solid black brush from your brush palette.
Now in your first layer starting on the left side of your signature and begin to paint it back in, like so.
You don’t want to paint in the entire signature because then it’s not going to be animated. You’re going to do a little bit on each frame to simulate the signature actually being written. It’s important to paint in the signature going from left to write. Unless of course you’re weird and sign your signature right to left.
Step 5:
Create another new frame and again just paint in a bit more of the signature. Continue creating new frames, painting in more of the signature until you’ve filled it in entirely. The more frames and steps you take filling in your signature, the more fluid it’s going to look. Don’t go too crazy though because we’re going to assemble all these frames into an animated gif. The larger number of frames you have, the larger the file size will be.
Step 6:
Animating time! If you’re using Photoshop CS2 you can go up to your menu click on Window and open up the Animation palette. It will look like this. If you have an earlier version of Photoshop you can optionally use Image Ready which includes the same controls for animating. I can’t remember if CS includes the controls because it’s been a while since I’ve used it.
As you can see I have all my layers turned on at this point so you can see the entire signature in the first layer. Obviously we don’t want that. What you need to do is turn off all your layers (make them invisible). If you created a white background layer, you’ll want to lose that as well. It’s okay to keep it however if you’re planning on using this signature on a white background on your website. With all of your layers turned off, this is what you should see.
Step 7:
In the upper right corner of your layers palette just below the window controls, you should see a little arrow. 
Click on that arrow and choose New Frame.
In your layers palette make the first frame of your signature visible. You should see something similar to this depending on what the first frame of your animation looks like.
Continue on creating one new frame in your animation palette for each frame in your layers palette. For example, if you used 20 frames to paint in your signature, you’ll want to create 20 new frames in your animation palette. With each new frame you create in your animation palette, you should begin to see your animation taking shape.
Step 8:
In the very last frame of your animation look just below the image for the following icon.
Click on that and change the value to something somewhat lengthy like 2 seconds, or even 5 seconds. What this will do is create a delay at the end of your animation allowing the viewer to see the entire completed signature, before the animation starts over again.
Alternatively if you’d prefer not to have your animation repeat itself, you can choose to turn off looping. The control for this is located beneath the first frame of your animation. The default animation setting is Forever. If you don’t want your animation to loop, change the setting to Once.
Step 9:
Now all that’s left to do is export your animation and try it out on your site! Go to your menu choose File, then Save for Web. Concentrate on the following section in the window that opens.
Use the same settings I have in the picture above. Under the Matte setting choose the color you plan to use as your background on your site and then go ahead and click save. Your animation is complete! Here’s how my animation turned out. I used a five second delay at the end.
As you can see I resized the image to make it smaller before exporting. How big you want your signature is up to you.
Now how do you add that animated signature to WordPress? Fortunately Lorelle from Lorelle On WordPress has already put together a great tutorial on how to add a custom signature in WordPress. Since you’ve already got your signature file created, scroll down to section titled Integrating Your Signature Into Your WordPress Blog.
After thinking about it for a while tonight, I’ve personally decided not to use an animated signature because I’ve already got enough at the end of my posts as it is, but hopefully this tutorial was helpful to those that DO want to end their posts with a signature =)
UPDATE: I’ve been noticing that several people find this tutorial each day via Google, yet no one leaves any feedback. I’d love to know if you found this tutorial helpful or you think I could be improved in any way =)
nice , this really help me alot keep up the good work mate :D
Awesome! Really glad to hear it :D
Didnt work for me :( I couldnt select the signature using Ctrl in the layers palette, it was locked. Dont know what the prob was…
Hmm. Sometimes photoshop can be a little picky about where you click when doing that step. Can ya describe for me exactly what and how you did it?
If you think the layer may be locked, look for a little padlock icon to the very right on that layer. If you see one then it is indeed locked. You can unlock it using the padlock icon in the lock menu just above the layers.
Also make sure that the layer you’re attempting to select the signature on is a proper layer. If for example if it’s called “background” just double click on that and you’ll get a box prompting you to create a new layer. Go ahead and give it a name and click okay. Now it won’t be locked.
Thank you so very much Mike. It worked!!! :)
Awesome! Glad to hear it :)
everytime i make a new animation frame, the previous frame always followed the new one… why is that ?
Hi there Gau. I’m not sure I understand exactly what you mean by the previous frame following the new one. Can ya possibly elaborate a bit more on what’s occurring?
Thanks Mike! You rock!
Hi Mike,
Thanks for this tutorial. I found a couple of them on the internet and yours was the one which was easiest and I finally did it after having so many setbacks with the other tutorials. There is one thing I would like to know is how to add a pen simulating the writing…Thanks
thanks for your easy to follow and helpful tutorial~
Nice!! I’ve been looking for something like this ^^
LOL! i din’t notice that CS3 has that option.. =P(Window–>Animation) THANKS a LOT!!! I believe that option was erased ^^
P/D: Sry about my bad english ^^
P/D2: Thx again
Congrats!
Glad to be of service to ya folks :)
Mike’s last blog post..Free Adobe After Effects training
Love your tutorial… easy to understand and to implement. One question…… can you place the signature over a picture?
Thanks, Bruce =) Sure you could. The easiest way would probably be to put whatever image you want the text over on your bottom most layer. Of course you’d want to resize your project to fit the size of that image, or resize the image to fit.
Hey Mike does the same thing works with let say making an item or something else glow?? And is it the same progress?
Hi Simis, can ya explain a bit more about how ya want something to glow? Perhaps I could put together a tutorial once I know a bit more about what you’re looking to achieve :)
Glow. well let say there is an item or a part of a picture. And i want to make it glow, something like pulsing color. Well something like that.
very good tutorial! I have leard! THx a lot
well thankyou a whole heap ^^, this was one of the easeir tutorials iv read or watched. your words were simple, flowed evenaly, and made sense. i normaly do all my animations in flash and never realy tested it on PS CS3. CS3 has the same concepts as CS2 as well.
Hey man REALLY great tutorial, really simple i owe you big time
i found this thru google and wasnt really looking for this but im deff glad i found it. you did an amazing job. this is very easy to follow!
thanks
Very Cool! I’ll definitely be giving this one a try.
Ginis last blog post..How to Create Gorgeous Snowflakes in Photoshop
I tried to make the animated signature and bingo it worked just perfectly! But,when I went to Lorelle’s instructions for inserting it into the PHP files, no luck. hmmm…. maybe it is the theme beast blog http://www.blogbyknight.com. I could try it on another one of my sites but all for now. Thanks for teaching me a nice littel trick.My very first animation!
.-= Judi Knight´s last blog ..The Dynamic Duo: Online and Offline Networking =-.