Photoshop Special Effects: Making Animated Icons

Increasing traffic to your website depends on one thing: making its design and content something that people would want to see and come back to. One way to create an interesting website design is to have a bit of animation. Here’s how to do it:

Benefits of using animated icons for your website

The trouble with static images that people often use on their websites and blogs is that they hardly merit attention. Even if they do, holding that attention is too much of a challenge, especially with so many professionally designed and maintained sites on the web. Animation makes for catchier designs, allowing your site to come alive. The best thing about it is that it’s bound to keep your visitors’ attention. It’s also more likely to increase interaction on your site.

How to make animated icons through Photoshop

For beginners, a good trick to start with is using Graphic Interchange Format, the most commonly used format for web graphics. To make animated GIF using Photoshop, you need to build your layer—a file consisting of a series of frames that you want to animate. Activate the animation toolbar on your Photoshop and import your first frame. Disable the visibility on frames that you don’t want displayed at the start of your animation. Upload the frames into the animation bar one at a time, activating the visibility of the frames according to your preference. Once the frames are ready, click on the upper right-hand corner of the animation palette and select “Tween” from the menu. Select your parameters and set the timing for the motion of your frames. You can do this one by one or simultaneously. If you want to set the same duration for all frames, simply hold down the Shift key and highlight the frames, then set the delay (e.g., 1 sec.). Lastly, export your GIF by choosing “Save for Web.”

Sometimes, websites with good content don’t get as much traffic because of a boring design. Using Photoshop, get creative and animate your site to make it more interesting.

This entry was posted on Wednesday, February 3rd, 2010 at 3:15 pm and is filed under Photoshop Elements. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.