Hey, guys! This tutorial will help you create a blinkie, an animated .gif. You can use this method for fonts, colour changes, and (for the most advanced) drawings. I'll be using Adobe Photoshop CS3 to create this blinkie. The photo above is what our finished product should look like - if not something similar.

Step 1: Opening an Image

After opening Photoshop, press Ctrl N on the keyboard so we can determine the size we'd like for our blinkie. Copy the dimensions I've added in the width & height box. When finished, press ENTER or click the OK.

Step 2: Adding a Background

If you don't want a background for your blinkie, simply proceed to Step 3.

By now, we should have a small rectangular box.

You can use whatever photo you'd like: either one you've found online or a photo in your Library.
I'll be using this particular picture: http://solifegoes.files.wordpress.com/2011/06/16.gif

If you're using a photo you found online, right-click the picture and click Copy Image . Return back to Photoshop and press Ctrl V . This will paste the image onto the small box we've created. We can resize the photo here by pressing Ctrl T . As we hold the Shift Key , we are not losing the photos dimension as we drag the image to the size we'd like. Press ENTER when satisfied.

Step 3: Adding a Text

By clicking the Text icon, you can now write whatever you'd like on the photo. Make sure the font is legible and fits the size of our picture.

***EXTRA***
If you'd like a border around your text, right-click the text in the layers tab and select Blending Options... This layer style allows you to add effects to your text (i.e. a drop shadow, a gradient style to your writing, etc). If you'd like the border, select Stroke . Selecting this design automatically puts a red border around your writing. I'll be using a white coloured border with the size of 3 px. You can alter this to your liking.

For this particular step, I'll be dividing each word. By separating each word, during the animation stage this allows you to have each word play at a different time. If you want your entire text to blink together, you don't need to separate them.

Step 4: Animation Speed

Now comes the fun part, setting the animation speed.

On the tabs above, select Windows . A drop-list should appear. Select Animation . A rectangular window should have appeared at the bottom. Here we get to add animation to our text to officially make it a blinkie.

To ensure that our animation moves at a specific pace, click the bottom arrow and choose what speed you'd want your blinkie to move. I've selected 0.5 seconds . You can change this.

Step 5: Animating Text

Now we get to select in what order we want our text to move in.

Naturally, we want the first word to display first. We do this by unchecking the other text boxes so that the first word is viewed. To add the next word, click the small icon beside the garbage bin. This duplicates the frame before. Now we can check the next word we want for our animation. Repeat the step and check the final word.

Add one final layer (you should have 4 layers now) in our animation box. Uncheck all the texts so your background is the only thing displayed.

Step 6: Playback

To ensure that we've successfully animated our blinkie, select the Play button to watch our animation in action.

If you're unhappy with the speed of your animation, don't hesitate to change it. Just make sure you select all the layers in the animation tab so each text moves at the same speed.

Step 7: Saving the Blinkie

All that's left to do is save the file.

Open File on the top tabs, and choose Save for Web & Devices...

A pop-up should come up just to show you what's being saved. Click Save and just save your blinkie!