Clip Art is traditionally comprised of small images drawn in a stylized, often cartoon-like manner. Usually they are line-drawings with only a few colors used for fill. The images are frequently used as decorative embellishments or accent illustrations for printed advertisements, notices, flyers and short articles. With the advent of computer-generated electronic media, clip art has been adapted to function as the basis for short animated sequences.
Open a new document in Photoshop. The document size can be set at 3 inches square or smaller, at a resolution of 96 pixels per inch. In this example the size is only 0.64 inches high by 0.5 inches wide.
Open the Layers panel and either draw your clip art image or place an image on the first layer. The image should be on a transparent background. Save your document in the .psd (Photoshop file) format.
Draw a series of ten successive images that follow the sequence of animation that you wish to portray. In this example, a flag, rippling as it waves in the breeze, is drawn layer by layer to complete a sequence. The ten layers will each become a frame in the animation, functioning much like the frames of a cartoon film, each layer depicting a step in the sequence of motion.
Select the built-in animation feature in Photoshop by clicking on "Window" in the menu bar at top, then "Animation". The Animation "Timeline" view appears by default, but you will need to switch to the "Frames" view by clicking on the small options icon in the lower-right corner of the Timeline bar and selecting "Frames". When the Frames view is displayed, proceed to the next step.
Look at the Frames view, which appears as an elongated bar with a single small image, in a frame. A thumbnail image of the last layer you created is visible in the first frame. In the layers panel, click on the eye icons to turn off the visibility of each of the layers except the first layer, which you want to remain visible in the first animation frame.
Set the duration of your first frame to 0.15 seconds by clicking on the numbers directly below the thumbnail image of the frame. A panel will appear with pre-set options. Select the "Other" option and type in 0.15 seconds.
Duplicate the first frame by clicking on the small icon of a turning page on the bar below the frames display area. Then turn off the visibility of the first layer of your Photoshop file and turn on the visibility of the second layer of the Photoshop file. Notice that the time duration of the frame is copied automatically as well. Continue duplicating frames and turning on the layer visibility for each of the corresponding layers to each frame in the sequence until you have a frame for each of the ten layers. Ensure that there is only one layer with the visibility turned on per frame.
Set the display frequency or "looping" of your animation to "Forever" by clicking on the setting in the lower left corner of the Animation Strip that reads "Once" in the default mode. Clicking on "Once" will display a drop-down menu. Click on the "Forever" setting. This selection will continuously play your animation in a loop, restarting it after every run. The looping will run as long as the page with your animation is open.
Test your animation by clicking on the small arrow icon in the middle of the bar below the animation strip. Click on the square icon to stop at any time. If your animation is running properly, it is time to save it as an animated GIF file. Click on "File" from the menu bar at top, then "Save For Web and Devices". A panel will appear with various options and settings. Select GIF file from the option box in the middle of the right side. Use the default settings, which work fine for most purposes. Then save the file to a folder or location of your choice. Your animation is ready to roll.
.gif)
