Animated Valentine Postcard


Ro Consoli

Valentines Animation Electronic postcards - to be attached to E-mails - are becoming more and more used on the web, and animations can make your message more lively. On the other hand, as the nicest persons have not always the fastest modens, file size must be considered carefully, so that your card will really bring only pleasure and happines.
This image has:
  • 207 x 254 pixel
  • 7.2 bytes size
  • is composed of two 16 color frames
  • you ‘ll need: just a little, little bit drawing skill
  • a scanner (best) or a mouse pen
  • Filter Factory - Gallery B download free
  • any image animation software (choose at Tucows for instance, if you haven’t any)
First a word about that so often heard, even among people working with graphics, “I-have-no-drawing-skill ! “ Couldn’t you be underestimating yourself ? Granted, let’s admit that Leonardo da Vinci’s “Last Supper” would look - say - different if you and me had been the artists ! But no one is demanding Master Pieces - only simple, plain, little drawings, similar to those you did as kid in school before someone told you that your works were’nt good enough. Wouldn’t you give yourself another chance ? Let’s begin:
Da Vinci
heart 1 A . DRAWINGS
A.1. Working with a scanner
Take a piece of white cardboard - that one used for smooth business cards is fine - about 10 x 10 cm size (1 cm = 0.4 inch) and with a pencil make 2 soft crossing lines - I used ink for the image at left , just to improve visibility, your drawing should be much softer.
Mark points A, B, C and D and than draw the heart, about 5 x 5 cm size - softly, you’ll erase the pecil strokes later. Next, mark a line - E - you ‘ll use it to place the eyes simetrically (or not, if you wish so) and mark points F and G for nose and mouth. Now draw eyes nose and mouth so that it resembles the image on left - it needs not to be exactly alike ! Take some black ink - I use Indian Ink - trace the contours, and after drying remove the pencil lines with the rubber. heart 2
heart 3 Now put your drawing against your room’s window glass and place on it a second and similar cardboard piece, so that you can see your drawing through it ( an expensive slide viewer will do the same); use your pencil to trace the contour, left eye and nose following your former lines and mark supperficially the rigth eye and mouth. Back to your desk, draw the rigth eye, cheeck and mouth (see sample).
A 1.1. SCANNING AND SAVING OF THE RAW IMAGES
Scan your images, each at a time.The best method for editing the images may vary accordingly to your scanner but usually you’ll get better results if, at the beginning ,you make bigger (size and colors) images. I prefer scanning with 16 million colors; next I resize to 250 x 256 pixel - in this particular case - set width to 250 and click in the heigth field for the automatic value: DON’T ALTER PROPORTIONS. Next I saved each image as *.tif.
A .2. Working without scanner
If you have a mouse- pen or some similar pointing device, you can draw the first image directly on the screen, using white background and pen tool with black foreground. The bigger your image, the easier editing will be. Afterward resize and decrease colors and save as above. For the second image, select your first one (select all ) - edit - copy - edit - paste as a new image - alter details accordingly and save as before.If you have no scanner, no pointing pen but a very firm hand (still the best of the three), you may try it with an ordinary mouse - it’ll be a challenge - but it can be done !
A .1.2. EDITING THE TWO HEART IMAGES
Repeat the following with each image:
1.select all dark lines (hold shift to add selections) with the magic wand, increasing tolerance if necessary
2. foreground color = black - Flood fill - solid color - solid color - no texture - apply to all selected areas
3. DESSELECT
4. decrease colors to 2 (black & white)
5.edit any remaining imperfections with the pen tool
6. now, just for safety, let’s save here as something.gif
heart 4
heart 5 7. increase to 16 million colors again
8. select (magic wand) the inside of the heart
9. make foreground color light red ( red = 255; green = 83; blue = 83) - flood fill - solid color - no texture - apply
10. change foreground to bright red (red = 255; green = 0; blue = 0)
11. airbrush - size 15 - round - oppacity = 40 - apply lightly on the cheecks as indicated
12. repeat with white foreground to give the cheeks their final gloss. (remember, any mistake can be erased with edit - undo) DESELECT
Now everything looks nice ,except file size. Let’s look to this: again, for smoother result decrease colors first to 256 and then to 16 - resize another time to 200 x 205 pixel (don’t alter proportion) and save images as heart1.gif and heart2.gif.
B. ANIMATION FRAMES
In this animation two frames are shown alternately. Let’s construct the first one, containing the text.
B.1. FRAME 1
1. Open a new image, 16 million colors, 250 x 300 pixel, backgroud white
2. open heart2.gif - select background - invert selection - edit - copy - edit - paste as a new selection, in the center of this image - minimize (or save) till # 6
B.1.2. Happy
1.Open a new image, 16 million colors, 100 x 100 pixel, backgroud white
2. foreground color light green (red = 0; green = 255; blue=0)
3. Press text button - font Don Casual BT (any other medium size font will do) - bold - size = 28 - floating - type Happy - place text in the center of the image
4. Image - special effects - cutout -oppacity = 255; blur = 0; shadow = black; offset 1/1. Repeat with offset = -1/-1. DESELECT
happy 1
happy 2 5. Filter factory - Gallery B - fluttering flag - values of controls = 35, 255, 255,160, 17, 0. (if you want to use it in further images, save it now)
6.Select background - invert selection - edit - copy - edit - paste as a new selection on the top of the former image, text button remaining pressed.
7. Image - rotate - 5 degrees left - adjust position (see bellow)
8. normal filters -sharpen 1 x - DESELECT
valentines B.1.3. Valentines !
The same as Happy , only use a new 200 x 100 pixel image and set fluttering flag controls to: 203, 255, 255, 255, 26, 0. Paste at the bottom of the image. DESELECT
B.1.4. SAVING
- Make a close rectangular selection around the three components (207 x 254 pixel in this sample). Edit - copy - edit - paste as a new image. Decrease color number again, first to 256 then to 16 and save as frame1.gif.
frame 1
frame 2 B.2. FRAME 2
1. with frame1.gif still open - edit - copy - edit - paste as a new image
2. open heart1.gif - select background - invert selection - edit copy - activate former image - edit paste as a new selection - place it exactly on the other heart (text button should remain pressed all the time)
3. correct small discrepancies with the pen tool
4. erase text using pen tool size 3, foreground white
5. decrease color number as before and save as frame2.gif
C. ANIMATION
Any animation software will work for this simple 2 frames animation.There are plenty of shareware to be tested. An interval of 1 second between frames was used in this sample.
animation D. FINAL TIP

Make this postcard special by adding the special name of that very special person to it !





Sponsored in part
by

Digital Daze