Super easy animation with photoshop and javascript: part 1


First, you need a few images .

snake snake2 snake3 snake4

 

Second, open Photoshop and from the FILE menu pick SCRIPTS and the LOAD FILES INTO STACK. Select your files and then click OK

screen-shot-2016-11-23-at-9-28-07-pm

The timeline window is probably already open at the bottom of your Photoshop window. If you don’t see it, go to the WINDOW menu and click on TIMELINE.  See that little box that says CREATE ANIMATION well, you could see it if the image was bigger. Anyway, click that.

screen-shot-2016-11-23-at-9-36-18-pm

From the SELECT menu (at the top of your screen) pick SELECT ALL LAYERS.

Omenu on rightn the far right of the timeline screen you’ll see a few lines and an arrow. You would totally miss it if you weren’t looking for it. Click on the arrow next to it and a menu will pop up.

From that menu, select CREATE NEW LAYER FOR EACH FRAME.

Next, from the same menu, select MAKE FRAMES FROM LAYERS

screen-shot-2016-11-23-at-10-16-49-pm

Now, you should see all of your images in the timeline window. I had four images so there are my four frames. Almost done!

screen-shot-2016-11-23-at-10-22-48-pmAt the bottom is the number of times you want it to loop. By default, it’s set to 1. Pull that down and select FOREVER.

Under each frame is the delay between images. The shorter you make that, the faster the gif. I selected .2 seconds.

Go back to the FILE menu and select SAVE FOR WEB. (In the latest version of Photoshop this is found under the FILE menu under EXPORT and then SAVE FOR WEB)

Now you have your gif. Now, to move it across the screen, see tomorrow’s post.

snake

 

 

Buy Fish Lake, the game that uses my little snake friend. Under $10 for both Mac and Windows

Fish Lake screen shot

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.