Building an Animated Plug for Plugboards

Plugs are these nifty little buttons that you can build to promote your website. Many places all over the internet host what are called plugboards. You can search Google to find them. When you do find one, you will be able to enter in the url for the button that you are going to create and the web address that it will link to when people click on it. Your button will show up on the board and will slowly rotate out as others plug theirs in. In essence, it's free advertising, which we like.

To build a plug, I use Photoshop (I have the Elements version). Before you begin, there are a few things that you will want to consider. Do you want it to be a still image or an animated one? If it is to be animated, how many layers or slides will it have? Plugs are small, so you will need to keep each layer simple and easy to read.

Open photoshop and select File - New - and set the width to 88 pixels and the height to 31 pixels. That will give you the file to build on. For each layer that you are going to make, do the same thing. If you will have 5 layers, then you should create a new canvas for each layer + one to stack them on. Use the Photoshop tools to build each layer on its own individual canvas. When each layer is how you want it to look, you will need to flatten it into a single image. You will do this by going to Layer - Flatten Image. Do this to each of your layers (in my example here, I want CagedBirdSings' glass piece to stay in the animation longer, so I created 2 of that layer to stack on top of each other when it is time).


When each of your layers are flattened, it is time to stack them in your empty box that will soon become your animated .gif file. You are going to stack them backwards. In this example, the "Caged" layer would be moved first (you will just click on it and drag it over), then the "Bird" layer, "Sings", and finally the two glass pictures. As you drag them over, Photoshop will just copy them to the new canvas. Click on your working canvas that now has all 5 layers in it.

Now go to File - Save for Web and a new screen will pop up. This is the screen you will use to choose "animate", "loop", and the speed between frame changes. You may also care to try the preview option at the bottom of the window to see how it looks online and in action. If you are happy with the results, press OK and you will be prompted to save the .gif file on your computer.


Now that you have created and saved your animated .gif, you will need to upload it to an online image hosting service that supports animated gifs. Photobucket will work, but I don't know about any others. If you do not already have an account, you will need to sign up for one. Once it is uploaded, you will be able to copy the "direct link" code to enter on plugboards. The other address that you will need for a plugboard is the one for you website that you are advertising.

Hope I didn't miss anything . . .
Feel free to comment with any advice or questions.

~Jaimi @ Eli N Opus

ps. If you'd like to add a plugboard to your own site, you can sign up and get the code for one at http://www.plugme.net/