Create an Attractive Text Animated Square Banner Using Photoshop and ImageReady

Create an Attractive Text Animated Square Banner Using Photoshop and ImageReady

I’ve seen a lot of people posting on different websites and mine asking for a tutorial on animation in imageready to make banners. I will make a few more tutorials using images to make different banners in the future as well.

In this tutorial I will show you how to make a Square 125x125 banner using Text Animation using both Photoshop and ImageReady.

The Final result of the banner made in this tutorial:

You start off in Photoshop.

Create a Document. In my case I wanted to create a 125x125 banner. So I open my new image using these settings:

You add a Black Background to your image by using the Paint Bucket Tool.

Next, you add a stroke. This is easily done by going to the layer style options and ticking the stroke, here is an image to illustrate what you have to do:

Now, the trick to having good text in your animation is to first put in the proper text into the image before you transfer it to ImageReady. if you haven’t noticed, ImageReady is pretty limited when it comes to adding some effects using layer styles.

To make preparations before we go into ImageReady.

We add the text, you can choose to have any font you like, I used ‘Nb Obese’ for the font.

In case you want to know the Layer Style settings:

Here are the settings I used for the font in White, name this layer ‘main text’:

Here are the settings I used for the font with the Blue Stroke, name this ‘mywebsite’:

there are no settings for the ‘Check this out’ Layer, its just plain red color.

Time to move to ImageReady:

Now, if you don’t have the animation tray open. You can open it by going to the Window Menu and clicking on Animation:

Now you should see an animation bar, where you can see the frames of your animation. Right now there’s only one animation frame:

To create a new frame, click on ‘duplicates current frame’ as shown in the image below:

You may have noticed a small ‘0.7 sec.’ written below the frame in the image above, that is the amount of time the frame will display before moving on to another frame. You can set the time by right clicking on that area, as shown in the image below, set the first frame to 1 sec, since there is text on the first frame, we should give the viewer time to read:

You can set individual time on each frame, this gives you total control over the animation:

On with the animation, reset the second frame back to 0 secs. we’ll adjust it later, we already created a new frame, now create another one by duplicating the frame again. In the new frame, move the visible text to the center of the image, as shown in the image below.

Next hold ‘Shift’ on your keyboard and select both frames by clicking them.

Hit the Tween button, also shown in the image:

When you hit the Tween button, you’re telling ImageReady to create frames between this frame and the last frame. We’re going to be creating 5 frames in between, here is what you need to do, when the Tween window pops up:

This is what you’ll get:

Now to set the time on all these new frames. Hold ‘Select’ on your keyboard and click all the layers that are set to 0 secs, and set them to 0.1 secs, as shown in the image below:

Duplicate another frame, this is Frame 9. On this frame, make the ‘Check this out’ Layer visible, adjust it according to the image below and set the time for this frame to 0.5 secs:

Duplicate another frame. Make the ‘Check this Out’ layer invisible again and set the time for this frame to 0.3 seconds. This is frame 10.

Duplicate another frame. This is the last frame, frame 11, make the ‘Check this out’ Layer visible, but this time set the time for this frame to 1 secs, so it is visible for a while before the animation loops all over again:

Although we are done, here is an idea to try out. Try playing with the opacity of the layers.

For Example:

You could put some text on one frame. On the next frame, drop the opacity to say 50%, Another frame, Drop the opacity to 0%. Add two more frames. On one write some text and set the opacity to 50%, and on the last one bring up the opacity to 100%. Now play it.

You can do a lot of things with all these tools. The reason I avoid too many frames is to make the size of the image smaller and easier to load.

Hope this tutorial was easy to understand. If you found our website useful and own a website please consider linking to us using one of our banners 🙂

If there are any questions please feel free to use the comments box.

The final image: