This is a neat “illusion” technique that you can use to simulate a raindrop covered window in front of a variable image in your web-to-print or dynamic imaging templates.

This technique requires the help of both Photoshop and CorelDRAW. In a nutshell, we will draw raindrop shapes in CorelDRAW, use them for creating the water glows and shadows through Photoshop and PowerClip a slightly misaligned copy of the variable background image inside them to simulate the optical distortion effect visible in regular water drops.

Before you start

• Add a page frame (Layout/Page Setup/Add Page Frame). This will create a rectangular shape with the exact same size as the paper size of your template and place it as a bottom layer.
• PowerClip an image inside the background shape and turn it into a variable web-to-print image field.

Raindrop shapes

Start by drawing the water drop shapes in CorelDRAW. You can draw them using CorelDRAW Polyline tool and some raindrop window photo for reference.  This might take some time unless you have a descent photo that you can simply trace.

The result should be similar to this.

Note. Weld all of the shapes into a single curve and export it as a transparent image (ex. PNG). We will later use the exported image to create the glows and shadows of the raindrops with Photoshop.

PowerClip a copy of the image placeholder inside the raindrop shapes curve.

Go inside the PowerClip (Right click/ Edit Contents) and move the image placeholder towards the bottom-left corner.

The PowerClip’d placeholder should appear misaligned similar to this. The misaligned dummy image creates an optical illusion in your web-to-print template, simulating a water effect.

Raindrop glows and shadows

Next we need to create a foreground layer of transparent raindrop glows and shadows that will go on top of all other objects in our web-to-print template document. This will make the illusion even more realistic.

Shadow

Open the exported semi-transparent image of the raindrop shapes in Photoshop and create a background layer using Photoshop Rectangle tool.

Note. Rasterize the background layer after creating it (Right click / Rasterize layer).

Duplicate both layers so that you end up with two copies of the raindrop shapes and two copies of the background. Deactivate the visibility of one pair for now.

Select the raindrop shapes layer and add a very small drop shadow (Right click on the layer/ Blending options). We used these drop shadow settings.

Note. Deactivate the visibility of the raindrop shapes.

Glow

The next step is to cut out the shapes from the background layer since we need a negative of the shapes in order to create the water glow for our web-to-print raindrops.

Hold Ctrl and click on the thumb of the raindrop shapes layer.

You should see a selection formed around the raindrop shapes. Select the background layer and hit Delete. This will cut out the raindrop shapes from the background resulting in a negative version of the shapes.

Note. Duplicate the layer (Ctrl + J) and disable the visibility of one copy. We’ll use that later.

Add a small (white) drop shadow with a Normal blending mode to the negative. We used these drop shadow settings.

Delete unnecessary parts

Now it’s time to delete everything else apart from the drop shadow and glow we just assigned. Since the layers them selves are the source of the shadow and glow, we can’t simply delete them ’cause that would delete the shadow/glow as well. Therefore, we’re gonna do a simple trick.

Draw any kind of shape outside the document border.

Select the new shape and the raindrop layer with the drop shadow assigned to it and merge them (Right click / Merge layers).

We now have a new layer that has both the raindrop shapes and their shadows welded into a single object.

Note. Repeat this step to create a layer of the negative raindrops layer and its shadow.

Remember those duplicate layers of the raindrop shapes and the negative raindrop shapes we made earlier? This is when they come into play.

Assign a small (1px) outer stroke to them (Right click on the layer/ Blending options/ Stroke).

Use the same method as explained above to weld the layers with their stroke (outline) into a single object.

Select the raindrop shapes layer and click on the outlined raindrop layer thumb while holding down Ctrl. You should see a selection formed around the raindrop shapes. Hit Delete. This will cut out the raindrop shapes themselves leaving the shadow only.

Repeat this step with the other (negative) layer as well to get the glows.

The result should be a transparent image that only has glows and shadows in it. Since they are almost invisible, we added a red background for preview purposes.

We’re done creating the foreground image for our web-to-print raindrop template.

Save the image in a format that retains transparency (ex. PNG, TIFF etc.)

Inside CorelDRAW

Now that we have the foreground image, import it into your CorelDRAW web-to-print template document and place it on top of all layers.

Note. Center it by pressing P on the keyboard.

Without the foreground	With the foreground

All done!

Our web-to-print software can handle this effect easily! Upload the template into your catalog and test it. This is a dynamic imaging template but the technique can be applied to web-to-print templates as well.

Download the FREE CorelDRAW template file.