Animated Affiliate Button

Step 1

Create a new document 88x31px and fill the background with #ff7506. Create a new layer named 'bg shine' and make a selection of 88x17px at the top of the document and fill with #ffffff, lower the opacity to 15%. Make a new text layer and add some text, the font I used was Tahoma, Regular, 11pt, None, #0a0a0a. Make another layer named 'stroke' and go Edit > Stroke, 1px, #000000.




Step 2

Cteate a new layer named 'top' and fill the document with #0a0a0a. Make a selection of 88x1px 1px from the bottom of the document and fill with #ffffff. Create a text layer and put the website's name on it, the font I used was Tahoma, Bold, 11pt, None, #ff7506. Now merge the text layer with the layer 'top' by going Ctrl+E on your keyboard and move and the 'stroke' layer.




Step 3

Now that we have the layers set up in Photoshop we can go to ImageReady by going File > Edit in ImageReady. Make sure you have the layers and animation windows open if you don't have one just go Window > Layers and/or Animation. Duplicate the first frame. On the second frame move the 'top' layer just above the document where you can see. On the second frame apply a tween with the previous frame, 15 frames to add, all layers, all parameters ticked. On the 17th layer apply another tween, with the next frame, 15 frames to add, all layers, all parameters ticked.




Step 4

On the first frame make the delay time 2 seconds, and on the 17th frame make the delay time 1 second.




View my Layers Window