, ,

One of my last projects at school before the semester ended was making an animation with Photoshop that can be viewed online. We were all instructed to create a bug or any little thing we wanted to animate. I choose to animate a fish swimming around the page. I unfortunately did not save the anime I created at school, so I came home and redid a rough draft. Which you see above CLICK ON THE IMAGE to animate.

This animation was created in Photoshop CS4 using 59 different layers. I believe the animation tool is a new feature in CS4 but not 100% positive. I’ll show the steps I took to achieve this animation if you do not already know so. Be patient it is a long tutorial and my first 😀

Picture 1

The first thing to do is create a new page in Photoshop. These were my settings for the fish anime.

  • Name your animation
  • Make sure your preset is check for “web”
  • Make sure resolution is set to 72 pixels
  • You don’t need to worry about background color just yet, so you can choose a color or keep it transparent, you can change it later.
  • Then click OK to get started.

First things first choose your background color, you can go to your {swatches} panel and choose a color or you can go to the toolbox bar located on the left of the page.

Picture 2

When you have chosen your color dump it on your page by clicking {option/alt and delete} at the same time. Or you can type {G} on the keyboard and click on your art board.

Picture 3

Now you can create an object to animate or you can choose a custom shape from the tool bar. To get the custom shape look on the tool bar, look for the blob looking shape- fifth from the bottom and click on it. Or you can get to it by typing {U} on the keyboard, if the blob does not show hold down the picture of a box and scroll down to the blob {view picture 3}. On the top of your workstation there are more options. {Picture 4}

  • You want to click on the shape box {figure #1}, click on the arrow to view all of your options, if you see something you would like to use you can skip the next few steps.
  • If you do not see something you want to use you then click on the right pointing arrow {figure #2}
  • Scroll down to {ALL- figure #3}
  • The little menu will pop up and you then click {append- figure #4} this will not replace any shapes it will just add to your existing shapes.
  • Click on the shape you would like to use and lets begin.

Picture 4

To get started place your image (I am going to refer to a fish) anywhere on your page, you will get move it later. To create your fish click and drag out, hold down the shift key while you drag to keep it from becoming deformed.  If the fish is not the color you want choose your color from the {swatch panel or the toolbox}. To fill the fish with the color- type {option/alt delete} at the same time on the keyboard.

At the moment your fish shape is a vector image, we need to rasterize it so we can make duplicates of the fish, to do this:

  • Right click in the {shape 1} layer but not on any of the images.
  • Scroll down and click {rasterize layer}
  • Now the fish is on its own transparent layer

Picture 5

You are now ready to make your design. To make duplicates of your fish click {command/control J } at the same time and this will “jump” the layer that is highlighted.

  • To make your fishy swim very fluid on your page you will need to make LOTS of layers, mine took 59 and it still looks spotty.
  • Keep clicking {command/control J } to make duplicates of your fish and move it around your art board.

This is what my fish anime looks like with all the layers showing:

Picture 6

Once you are finished with your design it is now time to animate.

  • First uncheck the “eyeballs” next to your layers except the background. To do this quickly click on the first eyeball, hold it and scroll up or down.
  • Go to the {windows panel} at the very top of your page
  • Scroll down and click on {animation} this will open your animation bar.
  • On the animation bar click on the far right hand corner icon that looks like and arrow pointing down with lines next to it. Under the double arrow icon.
  • Scroll up to {make frames from layers} and this will create a frame from all of your layers
  • If your frames do not have a background color, click on the first frame and shift click the last frame. Go to your layers panel and double click the eyeball located next to your background color.

This is the time for it to come to life. You can now change the time duration that each frame will have. Do this by highlighting all the frames, click at the bottom of any frame and choose your time. Press play to see what it looks like. Keep doing this until you have achieved the speed you want.

When you have it all together and you are now ready to save you can save two ways; 1 of course is to save the psd file and 2- save it as a gif to place on the web.

  • To save as a gif, go to {file- save for web and devises}
  • A menu will pop up, I kept all the settings as they were and clicked save, I saved it on the desktop so I can easily locate it.
  • Now your animation is complete

To test it out, click on the animation, drag it to a web browser and… tada you have a real animation.

Hopefully these long and tedious directions were able to walk you through creating your first animation.

If you have question or I was not clear about a particular section, leave me a comment to I can clarify any points.

Thanks for sharing with me!!