Intro Gif

What is a gif?

The principle that Photoshop uses is the same principle used in flip books. Frame by frame by frame...

Open a blank canvas 8x10 300 ppi works!
Window > workspace > Motion
You will see a timeline at the bottom of the page. This timeline will allow us to create pages like in a flip book!

Click on Create Frame Animation. Now you have frame 1.
- This uses a combination of frames and layers.
- The frames will create the SEQUENCE.
- The layers will allow you turn on and off items in your sequence.

5. Go ahead and add a layer, as you would normally.

6. Then select the ellipse tool and create a circle in the top left of the canvas.

7. Go to your timeline and add a frame by selecting the plus icon.

8. Make sure you have Frame 2 select tool, then grab your move tool and MOVE the circle down a little bit towards the lower right corner...

9. Create a new frame, and move the circle down a bit more... REPEAT until your circle is at the bottom right of your canvas.

10. At any point you can press the play button and it will show your your flip book.

At the bottom of each frame is a timer... you can adjust how long you want that frame to hold.
To change ALL timers, select ALL frames and change the timer on one; all the timers will change.

When your circle reaches the bottom of the canvas, press play and VOILA! You've created your first gif.

Let's try something different...

Open a NEW blank canvas 8x10 300 ppi works!
Window > workspace > Motion
You will see a timeline at the bottom of the page.
Add a layer, as you would normally. Create a frame.
Add a circle to the top corner (ellipse tool)
Add a new frame, but this time, place the circle where you want it to end up (the lower right corner).
Next, select both frames and click on the tween button.
A menu will pop up, and ask you how many frames you want to add between the first frame and last. Let's choose 6! Click ok!
Press play!
- What PS has done for you is automatically position the circle between the first and last position, to make it a fluid motion.

One last thing...

Let's add some text:
Go back to your layers and add a normal text layer.
Type the word "ball" and place it somewhere on your canvas.
Select all your frames EXCEPT for the last one, and turn off the eye.
Press play.
- AS you can see, if you want to hide something in a frame, click the eye off!

You can save it as an animated gif (use for web) by...
- file > export > save for web (legacy)
- Up pops a dialogue box:
  - Make sure GIF is selected, otherwise it won't work!
  - Make sure the size is of your gif is web-friendly (600px)
  - You can select how many times you want it to repeat... Once, forever, or choose the number of times.
  - Press play to test it!
- Click Save... give it a title
  - to test it, open your saved gif in a web browser!
Let's say your animation is SO AWESOME you want to put it on Youtube (mp4)...
- File > export >render video
- Frame rate 24 or 30, OK!