[photoshop]affiliate Button Tutorial P2 Animating your Button

[Kubi 0]

Warning! This is PART 2 of the Affiliate Button Tutorial, you must read part 1 before doing this one!

 

Ok, remember in the last tutorial, we created this nice looking button;

 

Well now we're going to animate it!

 

Difficulty: Medium

Time: ~10 Minutes

You will need: ImageReady, Photoshop, the .PSD for the last button we created. And an understanding of where things are located in ImageReady.

 

Lets get started.

 

Step1:

Open up your .PSD file in Photoshop, we need to take out the text blending.

Once open, delete ALL layer blendings for the text.

 

Step2:

Move the text layer above the color balance layer, but still under the border layer.

Set AA(anti-alias) to "None". This will get rid of any blurryness.

Make sure your text is either White, or Black.

 

Step3:

Create a new layer ABOVE the text layer.

I added a red color gradient to this layer, just for looks(it doesn't really matter if anything is in there).

 

Step4:

Press Ctrl+I on the new layer to invert it.

Press Ctrl+G, an arrow will appear, pointing down twords the text layer, and it'll be underlined.

 

Step5:

Press Ctrl+Shift+M to move the image over to ImageReady for animation.

 

Once in image ready you'll notice a couple new boxed. One will be the "Animation Pallete", this is where your slides are located, this is all we're need to be working with, besides the layer pallete.

 

Now that you're in image ready, click the text layer, make sure your pointer tool is selected, as we'll be moving the text.

 

Step6:

Currently, the text should be located in the exact middle of the image.

Move the text off the the left side of the image, so it's not visible.

 

Step7:

Now that your text isn't visible(yet still there), we need to make a new layer.

Find the arrow in the animation pallete, click it, and find "New Layer", then click that.

You'll notice another layer appear in the animation pallete, no text, good.

 

Step8:

Click the second layer in the animation pallete, make sure your still on your text layer with the pointer in hand, and move the text ALL the way over to the other side of the image, yet again, so it's not visible.

 

Step8:

Now that you have 2 layers, one where the text is off the image to the left, and one where the text is off the image to the right, we need to tween this image.

 

 

Now that you have done that, the animation is complete, but it's going to fast, now isn't it?

 

So lets instert a little "Break" in there, as I like to call it.

Look for the layer that has the text located in the middle of the image, in this case, if you used 30 layers, it would be located in frame 16.

 

Select frame 16 and click the little arrow, the text next to it says "0 sec", once you click the arrow, set it to 1 second. This will make the text stop in the middle for 1 second, and then continue off.

 

 

Now you're done.

All that's left is to "Save Optimised as" (Ctrl+Shift+Alt+S)

 

My final Results:

 

There are many other things you can do with animation, but this is just a simple effect for beginners.

 

If you liked this tutorial please register with http://forums.xisto.com/

If you used this tutorial please register with sepiasfx.net/forums

Thank you!

 

Notice from mayank:

Edited topic title.

Edited December 22, 2016 by OpaQue (see edit history)

[Plenoptic 0]

Not bad. I think you should have the text pause for a couple seconds longer though before it continues on. Other than that it's pretty cool.

[kaylanicole 0]

yes, this is great! i've been looking for tutorial that animates affiliate buttons in photoshop/image ready since those are the only good graphics editing programs i have and i finally found one. thanks!