Friday, September 19, 2014

Do Animation Using Photoshop

Animation is used more and more these days in a variety of venues. One of the most popular uses for animation is in the creation of animated graphics, banners or logos to go on websites. You might have thought that to create this kind of animation you would need specialized software and the training of a professional graphics artist, or alternatively, you would need to hire one to do it for you. But if you have access to Photoshop Extended, you can quickly create and save out you own animated graphics.


Instructions


1. Sketch your ideas for your animated graphic out on paper before you start working in Photoshop. Create a storyboard of the animation. This will save you time and trouble later.


2. Load any images (such as photos) that you want to make a part of your animation onto your computer. Save them all to the same folder on your desktop.


3. Open Photoshop. Select "File" and click "New." In the dialog that opens, make the size of the document in pixels what you want for the animation. Click on "Transparency" for the background. Name the document "yourname 1" and click "OK."


4. Select "File" and click "Open." Browse to the image or images that you want to use in your animation and open them. Use the "Copy" and "Paste" function under "Edit" to paste these images into the "yourname 1" document. Each will appear on its own layer.


5. Use the "Shape" or "Pen" tools set to "Fill" to create any graphics shapes that you want to animate. Use the "New Layer" icon to place each element on its own layer.


6. Add any text that you want to animate by using the "Text" tool. This will automatically be placed on a separate layer.


7. Select "Windows" from the menu and click "Animation." This will open an animation timeline at the bottom of the screen.


8. Select the single frame in the timeline and click on the "Duplicate" icon underneath. Now move the contents of the second layer to where you want them in the first frame. Repeat this to move all the other items on other layers to where you want them in the first frame.


9. Select the second frame and move the items in all the layers where you want them in the last frame of the animation (based on your storyboard. Click on the "Tweening" icon and add all the frames you want between the first and last frames. Photoshop will automatically create all the motion in the intervening frames.


10. Select "File" and click "Save for Web or Devices." Select GIF as the file type, click on "Animate" and set the "Duration" for the frames. Click "Save" to save the animation.