Live Animated Clocks
This tutorial is for intermediate to advanced web developers. You must have decent knowledge of your graphics program and be html savvy to some degree to make use of this tutorial outside of making the exact same clock you see here. Each live animated clock is made differently. This tutorial is designed to give you a general idea of how they are made. MADE IN AMERICA WITH PSP 7 :b DOWNLOAD the live clock LITE code from www.dynamicdrive.com You will need this :)
| STEP 1 First you need to open a NEW IMAGE >>> WIDTH= 142 height= 51 RESOLUTION = 72.000 BACKGROUND = TRANSPARENT IMAGE TYPE = 16.7 Million COLORS ( 24 bit ) . |  |
| STEP 2 Decide what color you want your live animated clock to be and choose a darker shade as your foreground color and a medium shade as your background color. I used these colors : Darker : #F983DC Lighter : #FAB8E2 Use your shapes tool and with RETAIN STYLE, ANTIALIAS, and CREATE AS VECTOR UNCHECKED; Draw a rectangle so it looks similar to this. It needs to be at least this wide and high for the clock to fit in it by the time we are done! If you are willing to go a little larger, do so! It will make adding your clock easier :) |   |
| STEP 3 Add a NEW RASTER LAYER. This is the layer you are going to draw your animations on. For this tut I am going to use stars. You can use a teddy bear, a heart, a flower... The animation is what will make this kind of live clock more uniquely yours. Use your shapes tool ( everything UNCHECKED and line width = 1 ) and just add a star on one side and a slightly smaller one on the other side. Use whatever two colors you like, I have used the following: darker color:#A38B2B lighter color:#EACB5E |  |
| STEP 4 Go back to the layer with the rectangle on it. Use your magic wand ( MATCH MODE : RGB VALUE, TOLERANCE 0 , FEATHER 0 ) to select inside the rectangle. Using your RETOUCH TOOL settings as such : SIZE = 21 HARDNESS = 100 OPACITY = 11 STEP = 25 DENSITY = 69 DARKEN RGB Sloppily apply darkness along the inner perimeter of the rectangle. |   |
| STEP 5 Use your RETOUCH TOOL again but this time with these settings : SIZE: 21 HARDNESS: 4 OPACITY: 26 STEP: 22 DENSITY: 61 LIGHTEN RGB Now lighten the center area and smooth it into the darker parts a little bit so it looks blended.. |   |
| STEP 7 No go to the layer with your stars on it. Use your wand tool ( settings same as before ) select inside your stars ( click inside the first , then press SHIFT as you click inside the second ) Now repeat STEP 5 & 6 to add darks and lights. |  |
| STEP 8 Use your wand tool. Set as follows : MATCH MODE to RGB VALUE TOLERANCE 0 FEATHER 0 and make sure SAMPLE MERGED IS CHECKED :) Now click on the area outside of what you have drawn. GO to SELECTIONS >> INVERT then go to IMAGE click on CROP TO SELECTION. |   |
| STEP 9 You can animate this anyway you like. Just save as an animated gif file. For what we have here I am going to save as clock1.psp. Next make sure you are on the star layer and take the selections tool and select one of the stars. Now go into COLORS >> ADJUST >> BRIGHTNESS/CONTRAST.. and settings as such : Brightness: 48 Contrast : 0 Save as clock1a.psp. Now UNDO the birghtness and select around the other star and repeat the brightness. Save as clock1b.psp |   |
| STEP 10 ANIMATING CLICK HERE! | |
~Link Hearts Enchanted~
Links are definitely appreciated! Please feel free to right click to save one of these images to your hard drive and link them back to:
http://www.heartsenchanted.com
Thanks for your support!
