---{Photoshop Animation - Starting Off...}---

Welcome! On this website, you will sucessfully learn how to create animation .gif files, using Photoshop. To begin, you must already have Adobe Photoshop installed. If not, click → Here ← to be redirected to the Adobe Photoshop CS5 Trial download page. After you've made sure that you actually do have Photoshop, you may proceed to 'Step I'.

Step I - Let Us Begin!

Since you have confirmed your possession of Photoshop, we are now able to begin! Firstly, you must open Photoshop... The splash screen should appear on your monitor as the one below (as Photoshop loads...), or differently depending on the version that you are using.

So now, your screen should probably look a little like this. It may vary depending on the version that you're using. Now that we have Photoshop open, you can move onto Step II

Step II

To create a new file, Go to File>New... (Ctrl+N) Set your image preferences (size, resolution, etc...) to your liking.

Step III

To create an animation in Photoshop, you are required to have multiple layers, for the sake of simplicity in this tutorial, we will be using the minimum requirement; 2 (not including the background layer).

Step IV

Next, put your first design on Layer 1, and your second design on Layer 2. You can take advantage of the background layer, and use it as well. This is done below in white, making it difficult to see on the layer tab, but I assure you; the expressions are there. In this image, there is a different expression on Layer 1, and on Layer 2. The background layer is used for the head (outline of face), and the hair. This layer is the first expression (Layer 1).

This is the second expression (Layer 2).

Step V

Although mine is already present, your Animation Window probably isn't. To open the Animation Window, you must go to Window>Animation. The Animation Bar should now be present at the bottom of the page.

Step VI

This is probably the most tricky part of Animation. For your first frame, you must turn your desired layer on (Layer 1, usually), and turn ALL the other layers off, if you do not wish for them to appear in the first frame.

Step VII

Next, you must duplicate the first frame by clicking on the button at the bottom, on the LEFT of the garbage bin. It resembles the "New Layer" button, except this button is on the Animation Window.

Step VIII

After you have created the duplication, you will now see two frames at the bottom. On Frame 1, only turn Layer 1 on, and your background (Expression 1). On Frame 2, only turn Layer 2 on, and your background (Expression 2). The background is only required if you did something similiar to what I did, by using it as your base (face outline). Otherwise, you don't really need it, if there is no image on it.

Step IX

Now, you can set your preferences of how many seconds apart you would like your frames to be. Adobe Photoshop comes preset at a rate of 1 second per frame. If this is too fast or too slow for you, click the part where it says "1 sec." at the bottom of each frame, and a little menu will appear. You may choose one of the preset second settings, or you may click "Other..." and set your own.

Step X

Since you have now finished the Animation process, you may now save your file! ^ ^ To save an animation file, you MUST do the following: Go to File>Save for Web & Devices... (Alt + Shift + Ctrl + S)

Step XI

A huge screen will pop up, if you want to make the file size smaller, delete some of the colours. Otherwise, you can just click the button at the bottom that says "Save", which is on the left of Cancel and Done, in the right hand corner.

Step XII

Now, you can name your saved file, but you MUST keep it as a ".gif" file, or the Animation WILL NOT work. After you have placed it in your desired folder, you can continue to press "Save", which is located above the Cancel button.

Step XIII

To view if your Animation has turned out the way you wanted, you can open a browser, and drage the file into the address bar. If it has not turned out correctly, look through the steps again, and be sure that you didn't forget to do anything. ^ ^

Go to the Examples Page to see the finished product!