ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to Make an Animated Timer

Updated on February 23, 2011

This exercise will require PhotoShop and ImageReady, which came with my copy of PhotoShop back in the Dark Ages. You can use other programs if you wish. ImageReady is an animation program. It doesn't do 3D modeling, but it can do many nice animations.

First, you open a 3-inch by 3-inch window, or whichever size you wish. Next, you fill the background with a dark color. On a new level, fill the area with white. Next, make that level 50% transparent. You do this so you can see the white circles that you will make next. It's important to make the circles the same color as the background, because "cutting" out the circles will be involved, and when that happens, you'll get outlines if they're a different color than the background. Now, get a new layer and make a circle an eighth of an inch from the top with a circular marquee, then fill it with white.

---------- Figure 1 --------------------------------- Figure 2 --------------------------------- Figure 3 ----------
---------- Figure 1 --------------------------------- Figure 2 --------------------------------- Figure 3 ----------
---------- Figure 4 --------------------------------- Figure 5 --------------------------------- Figure 6 ----------
---------- Figure 4 --------------------------------- Figure 5 --------------------------------- Figure 6 ----------

Duplicate that circle and pull it straight down to the bottom of the screen constraining it so it doesn't wander horizontally. Give it the same margin you gave the one on top. You should now have two circles, one at the top, and one at the bottom as in Figure 1. If, in duplicating the circle, you created a new layer, merge the two layers together.

Now, do a "copy layer" and rotate, at 60 degrees. Merge the new circles together in one layer (see Fig. 2). Do another copy layer, rotate 60 degrees, then merge again. You should have six circles in a circle as in Fig. 3. Now, highlight all the circles, do a copy, then do a rotation of 30 degrees, and merge again. Now you have twelve circles. Highlight the circles, and save the selection, in case you need it again. Keep the marquee that defines the 12 circles, and go to the white layer, the one you left at 50% opacity. Turn off the layer with the white circles. With the highlighted circles, do a delete. This gives you a piece of "paper" with 12 holes in it, as in Fig. 4. Now put the opacity to 100% so that the paper is now white. Fig. 5 shows the result. I put a shadow under the white piece of paper to show that it has holes in it.

---------- Figure 7 --------------------------------- Figure 8 --------------------------------- Figure 9 ----------
---------- Figure 7 --------------------------------- Figure 8 --------------------------------- Figure 9 ----------
 --------------- Figure 10 ---------------
--------------- Figure 10 ---------------
 --------------- Figure 11 ---------------
--------------- Figure 11 ---------------

Now it's time to paint over the holes. Make a new layer, and paint a black blob over the top hole, overlapping the hole comfortably. Next, choose a gray shade halfway between the black you painted and white. Paint a blob of that over the hole at the bottom. Choose another shade halfway between those two and paint a blob over the one at the left. See Fig. 6 to show how I did the first four circles. Keep doing this until you have even gradations of shades sitting in a circle on top of your holes (see Fig. 7). Now, move the layer with the paint blobs under the layer with the holes, and you'll have something that looks like Fig. 8. Remove the shading, if you put it in (or leave it in for effect) and it will look like Fig. 9.

Copy the paint blobs layer. Do a rotation of 30 degrees. The blackest circle should now be in the one o'clock position. Copy this new layer, and do another 30-degree rotation. In PhotoShop, after you copy each new layer, you can do a shift/command/T and the layer will rotate the same distance as the last time, thus helping you to move faster.

After you have the twelfth layer of circles (with the blackest circle in the 11 o'clock position), save the file and bring it into ImageReady. In ImageReady, Turn off all the blob-painted layers except the bottom one. In the first animating frame (Fig. 10), give the duration time you wish. I used 0.05 seconds (I snapped a picture of this first frame before I put in the 0.05-second time delay; for this reason, it still shows "0 sec." If you do the timing task first, then this will be automatically copied for the remaining frames that you add. The first frame should show the first layer of blobs, masked by the circled windows in the upper-most visible layer, labeled "Layer 1" in Fig. 11.

Now, create a new frame, using the square icon with the bottom-left corner turned up in Fig. 10. Go to the layers palette and turn off the first, or lowest layer that has the painted blobs, and turn on the one above it. You now have a shift in values in your second frame. For each new frame, turn off the layer with the current blobs, and turn on the one above it, until you reach the top blob-painted layer.

You're finished with the animation. Test it by pushing the arrow shown in Fig. 10. When you're happy with it, save the file as an optimized gif, and you're done. When you open a browser, Just go to "Open File" and open your gif. You can relax while watching your creation, or notice any bugs to work out. When you put this gif into a web page, it will animate automatically. Programming the code to let it work while the computer is doing a task involves another type of computer programming which will not be covered in this hub.

Instead of making circles, you can make pictures, letters, or whatever comes to mind. And you can use colors, instead of shades. In subsequent hubs, I'll do other animations using these same two programs. Until then, enjoy!


    0 of 8192 characters used
    Post Comment

    • SamboRambo profile imageAUTHOR

      Samuel E. Richardson 

      7 years ago from Salt Lake City, Utah

      Tx 4 stopping by

    • stars439 profile image


      7 years ago from Louisiana, The Magnolia and Pelican State.

      Brilliant. GBY.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)