Hearts All A-Glitter!

With this tutorial we'll create two interlocking hearts filled with sparkling glitter. We'll create the hearts using Paint Shop Pro X and the glitter effect using Animation Shop (v.3). Any pre-made, seamless, animated glitter pattern can be used. The image above is one example. More examples are shown below.

Note: Animation Shop was included free with all prior versions of Paint Shop Pro but is not included with PSP X. If you don't have a copy, you can download a demo at Corel.com. You might be able to find an old version of PSP for a good price at a yard sale or on eBay and get Animation Shop along with it!

Before starting this tutorial, you'll need to find and download a pre-made glitter pattern tile of your choice. There are many places on the web where you can find glitter tiles. FlashLites has a nice selection of free glitter pattern tiles.

You'll also need a Preset Shape in the form of a heart. If I remember correctly, no heart shapes are included with PSP X. I have all Preset Shapes for all PSP versions grouped together in my "PSP Library" folder and I can't remember for sure which shapes came with which version. So, just in case it's needed, I've included a heart here for you to download. Download and unzip into your Preset Shapes folder. The file format is .PspShape, which works in PSP versions 8 thru X only.

Step 1. Prepare the Glitter Pattern

When creating an animation, file size is always a factor to consider. Dimensions, number of frames and other things can all effect file size. We want to keep file size as small as possible so the animation will load quickly on our webpage. The hearts we'll be creating are fairly large for an animated image, so try to select a pattern tile that has no more than 2-5 frames in the animation. Any more than that and final file size may be more than desired. The FlashLites website indicates the number of frames for many of their glitter patterns but other websites may not. You may have to open the file in Animation Shop to discover how many frames are used to create some glitter effects.

Open Animation Shop and the glitter pattern tile of your choice.

Make a note of the display time the pattern creator has used for each frame of the animation. Under every frame of the filmstrip it will say something similar to F:1 D:10. That indicates the frame number (F) and the frame speed/display time (D).

If you don't see this information under the frames of the filmstrip, you will need to enable it by editing your 'Preferences'. Click File>Preferences>General Program Preferences. Under the Misc tab, check the box that says 'Display frame count in window under animation'.

Also, under the "Layered Files" tab, make sure you have checked "Keep layers as separate frames".

Step 2. Save Frames as Separate Files

Animation Shop does not play well with PSP X and 'Export Frames to Paint Shop Pro' may not work. The workaround is to save each frame as a separate image and then open in PSP X.

Note: The following paragraph is for users of PSP X. If you are using an older version of PSP, you can choose File>Export Frames>to Paint Shop Pro instead of creating separate files ...or you can just use the following method.

To save each frame of glitter pattern as a separate PSP image:
Select the first frame and then select File>Save Frame As. When you click OK, Animation Shop will add '1' to end of filename (for frame 1).

Select second frame and File>Save Frame As. Animation Shop will add '2' to end of filename this time (for frame 2).

Select third and all other frames to Save until you have a file saved for every frame of the glitter pattern.

Step 3. Create the Heart Shapes

Open Paint Shop Pro.
Open all the frames of your glitter pattern tile and set aside.
Open new image 300x300 with transparent background.
Select an outline color. You can use the Dropper tool to pick a color from the pattern tile or use a contrasting color. Set NONE for the fill color.

Select the Preset Shape tool (Preset Shape on flyout). Select the Heart-1 shape from the Tool Options palette shape list. Tool Options: Anti-alias checked, vector and retain style UNchecked. Line style solid and line width 30.

You can draw whatever size heart you want...just remember, we're creating an animation and don't want to have too large a file size! The heart I'm creating is approximately 150x150 pixels.

Position heart in upper left section of canvas, leaving room for second heart on right. If you want to add a text message at bottom or top, be sure to leave some room for that too!.

Important: Be careful not to move any hearts in the following steps. If alignment is off by just one pixel it will make your animation jumpy!

Step 4. Interlock the Hearts

Use Magic Wand to select colored part of heart (anti-alias yes, feather no). Modify selection to contract by 2. Selections>Modify>Contract

Select Cut to remove center from stroke. You now have a heart outline that has its own outline.

Duplicate layer. Move new layer to right and down, similar to above image. Hold Shift key down and use Magic Wand to add second heart to your selection (select area that was cutout in the previous step). The stroke of both hearts should now be selected.

Zoom in.

Select layer for heart on RIGHT (Copy of raster 1) and, with Eraser tool, erase the lines that cross thru the other heart (crossover closest to top...see above image).

Change layers. Select heart on LEFT (Raster 1) and erase the lines that cross thru the other heart, (crossover closest to bottom).

Zoom out to normal size.

Step 5. Set Up for Glitter Effect, Heart #1

The selections were a great help in keeping our eraser under control! There should be no gaps in the outline of either interlocked heart or when we fill with pattern it will 'bleed' out. We'll need these selections again, so don't de-select.

Merge the 2 heart layers. Layers>Merge Visible. Don't use Merge All or you will lose your transparent background.

Now duplicate this layer as many times as you have glitter patterns files (the files saved in Step 3). Layers>Duplicate. or right click layer button and select Duplicate. If the pattern you have chosen needs 3 frames to create the glitter effect, duplicate the interlocked hearts twice for a total of 3 layers. If your glitter pattern has 5 frames, duplicate the intertwined hearts 4 times for a total of 5 layers.

Make the bottom layer active. Both hearts should still be selected (if not, use Magic Wand to select again). Increase size of selection by one. Selections>Modify>Expand>1. You should be able to fill one heart without effecting the other. If this isn't working for you, Undo and change 'Match Mode' on Tool Options palette to 'All Opaque' or 'Opaque'.

• Flood fill left heart/layer 1 with pattern tile #1.
• Flood fill left heart/layer 2 with pattern tile #2.
• Flood fill left heart/layer 3 with pattern tile #3.
• If your glitter has more than 3 pattern tiles, continue filling each of the remaining layers with the remaining tiles.

Step 6. Set Up for Glitter Effect, Heart #2

On each layer, the heart on left side should now be completely filled with a pattern. We could do the heart on the right in exactly the same way, but it might be more interesting if the glitter effect was slightly different on the 2nd heart. So let's select the pattern tiles in a different order.

Select the bottom layer. You can mix the order up, use tiles in a backwards sequence, or do this:

• Flood fill layer 1 with the pattern tile #2
• Fill layer 2 with pattern #3
• Fill layer 3 with pattern #4.
• Continue with all layers. Ending by filling the LAST layer with pattern tile #1.

Deselect. Selections>Select None.

You can add a text message to your image now or do it later in Animation Shop. If you add a greeting, be sure text on each layer is precisely aligned with other layers or your message will 'bounce'!

Before saving, make sure ALL layers are visible and there's no active selections. File>Save.

In the Save As dialog box, set File Type as 'PSP Animation Shop'. The .pspimage format used by PSP X will not work in Animation Shop. We must use the old .psp format.

Step 7. Animate Glitter Effect

Close PSP and open your image in Animation Shop.

Note: Older versions of PSP can use File>Export to Animation Shop. That command does not exist in PSP X.

If you checked 'Keep layers as separate frames' in Step 1, your PSP image layers are now individual frames in a filmstrip.

First we need to change display time to match the display time used in original ....you wrote that down in step 2, right? ;-) Click Edit>Select All to select all frames and then click Animation>Frame Properties. In the dialog box, change display time to the same number used in original glitter pattern tile.

Preview the glitter effect by selecting View>Animation (or the 'filmstrip' preview button on the toolbar).

Close preview window. Change the display time again if you're not satisfied with effect. Experiment!

Step 8. Add Text

Do you want to add some text now? If not, jump to next step. If you do...use the Text tool (the A) ...it will add non-animated text one frame at a time.

If you want to place same text in every frame (looks best), turn the Onionskin tool on. This will assist in lining text up from frame to frame. The Onionskin tool is the yellow button on the toolbar that is under the main text menu. When enabled, a 'ghost' overlay of the contents of adjacent frame will appear in each frame. This will not show in final image....it is only an alignment guide. Double-click the button to change its settings.

With Text tool, click in the first frame where text will be placed. Using left click, the text color will be whatever color is selected in the foreground/stroke box. Right click to use background color.

When you click in an image frame, the Add Text dialog will appear to enter text, select font, font size, style and alignment. When you click OK in the dialog box, the text will become attached to your mouse pointer. Position the text exactly where you want it and click to 'detach' text. When doing 2nd and 3rd frames, position text to align with the onionskin overlay. If you don't get it right on first try, you can UNDO and try again.

Step 9. Crop, Optimize and Save

To help keep final file size smaller ....let's crop the canvas size to the smallest possible dimensions.

Select Crop button from toolbar (it's next to the Mover tool). Three new buttons appear above the Tools bar when Crop is enabled. Select the Options button. In the popup dialog box, select 'Surround the Opaque Area'. Click OK. A crop box now appears in each frame. Look at its placement in each frame to make sure this is what you want. Select the large Crop button next to the Options button to apply (or Clear...if you need to try again!).

Select the Save button. The GIF Optimizer dialog box will appear...Animation Quality vs. Output Quality. Moving the 'Better Image Quality' slider down will reduce the file size by reducing image quality. We should be OK to keep the slider all the way to top for this animation. Click the 'Customize' button in this dialog and review all the settings for colors, optimizations and transparency. Click OK and Next until completed! You can UNDO the optimization if the final result is not to your liking. Try again with different settings.

Use this same glitter technique to make yourself a blinkie!

Hope you enjoyed making these glitter hearts! .....Kate

Content and images* are the exclusive property of ArizonaKate.com. This tutorial may not be copied, sold or distributed in any format, including sending by email or posting in forums, without first obtaining permission from Arizona Kate.

Graphics Groups may link to tutorials, but may not copy. Please take the time to read Terms of Use and FAQ. A limited license is herein granted for personal use only. If you are interested in a license to reproduce tutorials or images, please contact Arizona Kate.

*Copyright Exclusions: Fonts and dingbats will sometimes be used to create tutorial images and I do not claim copyright for these. Banners and logos linking to other sites are property of the respective website. Scripts have been used with permission as noted in source. Many 'Arizona Kate' character images created from commercial clip art or photos and from dingbats.