Things By Mike

Photoshop CS2 Tutorial - Animated signature for Wordpress

Apr 17, 2007 Graphics

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 =)

Popularity: 26% [?]

Looks like you've never been here before! Today is your lucky day. For just the price of a simple mouse click, you can subscribe to this blog's RSS feed!

Tags: animated signature, CS2, CS3, photoshop, Tutorials, Wordpress