Animation w/Adobe Photoshop - Image Ready

(Basic,simple)


There are several different ways to employ and make animations happen w/PS and Image Ready. I am going to try to explain just one of those ways to accomplish this w/the hope that you will be encouraged by getting in on the ground floor here and then try to do diff things for yourself w/this knowledge.

First go to your desktop, right click on an empty space there and scroll down to New > folder and give this folder a name. Lets call it sig.

Then you will need to open (left click on) these 2 images that I have posted here, right click on them and "save image as" to your hdd by right clicking > save as > and navigate to the folder you just created > save.The 2 images are included below. Name them 1 and 2 respectively.

 2699.jpg ( 43.52k ) Number of downloads: 208
 2700.jpg ( 43.78k ) Number of downloads: 163


Now open Image Ready. Click on File > Import > Folder as Frames. Navigate to and highlight this folder on the desktop we just created called sig, and click ok .Now one of the images that we inserted into this folder will appear at the top of the work area, and both of the images will appear in the animation palette at the bottom left of the work area.

The image on the left (#1) should be highlighted. If its not go ahead and highlight it. Whichever image in the animation palette is highlighted that is the one that will appear at the top of your work area.

With that image highlighted there is a tiny arrow (>) towards the top right hand side of the animation palette just beneath the x. Click on that tiny arrow and a menu will pop up. Scroll up the menu and choose Tween. Choose Tween With Next Frame from the drop down box. Choose 5 as the Frames to Add. Click ok.

Next highlight the last frame (#7) and click on that arrow again. Scroll up the menu and select Tween again. Choose Tween with First Frame. Select Frames to add 5,again. Click ok.

Now click on the play button to view the animation(the middle button at the bottom of the animation pallette). You can click on each frame where it says 0 seconds to change the time that each frame is displayed during the animation. Have fun.

If you want to use this on the web you may want to save this to a gif image. Click on File > Save Optimized As. Choose a name and "Images only *.gif". Click on Save.

Now when you exit Image Ready you will be given the option to save the animation to PSD if you want to.Click ok if you do or no if you dont. The PSD images are much better for editing.

Your finished product may look something like this (note, you must click on the image to see the animation):


Tutorial by Jan @ G&S.com

Wow that Bold Blue text doesnt work well with this background at all does it?

Great tute there jan!

There is another way to add tweens (i'm sure you are aware) in the animation palette, on the bottom, there is a button that looks like a bouncing ball. You can also press that to add tween frames.

And no, the bold blue doesn't work well, I find that the orange or yellow work better!