How to Create Animated Graphs
If you have ever looked at company websites, you've probably noticed that many of them like to add animated graphs related to things like corporate sales, profits and customer satisfaction. If you would like to create something like this for your website, you can use Photoshop to help you do it. This tutorial works for CS3 or later versions.
Other People Are Reading
Instructions
-
-
1
Open Adobe Photoshop. Go to "File" and click "New." In the dialogue box that opens, make the size whatever you want for your animated graph. Since it will be going on the Internet, leave the resolution at 72.
-
2
Use the text tool to add labels, like dates and quantities, to the side and bottom. Then "Merge" the text layers together.
-
-
3
Change the "Foreground" color to red. Go to the toolbar and click on the rectangular shape tool. Use the tool to draw one bar of a bar graph. Make it almost the full height of the canvas and align it with the first date. Change the color to blue. To the right create another bar of the same size under the second date. Continue doing this until you have a bar for each date, changing the color each time. Then drag the "Text" layer to the top.
-
4
Select "Window" and click "Animation." A timeline will appear at the bottom. Select the first frame. Hold down the shift key and drag each of the bars down to the bottom. Click on the little "Duplicate" icon. This will make a copy of the frame.
-
5
Select the second frame. Make sure you are on the first shape layer. Hold down the shift key and drag the bar up one quarter. Then click the "Tweening" icon. In the dialogue box that opens, make the "Frames to Add" 10. Click on frame 12.
-
6
Click "Duplicate" again. This time drag up the second bar up 50 percent. Then click "Tweening" again. Continue in this way until all the bars are raised.
-
7
Select "File" and click "Save for Web or Devices." Select "GIF" from the file types and click "Save." Name your file and click "Save" again.
-
1
References
Resources
- Photo Credit Dan Ketchum
