This web-to-print technique takes dynamic imaging to a next level. Learn how to create a design of a person holding a pen, writing on some surface and have the pen positioned according to the length of the text.

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 page size of your template and place it as a bottom layer.
• Input the dummy text and turn it into variable web-to-print field.

In a nutshell, we’re going to take a transparent picture of a hand holding a pen and place it inside a variable web-to-print text field. Then we will PowerClip them inside a transparent container to ensure the hand gets cropped according to the text length and place it on top of a background blank paper image.

Fonts

You’ll need some handwriting font for this web-to-print technique. Download the dearJoe font or any other font you think will do the trick.

Note. Check out our font resources for more free fonts for your web to print designs.

Inside Photoshop

Let’s start by cutting out the background of the image with the hand.

Make sure the image of the hand is big enough to show the whole hand, wrist and part of the lower arm. This way the image will not show its end even if the text is short.

Import the image in Photoshop and activate Photoshop Polygonal Lasso tool (L). Start clicking along the edge of the hand to make a selection.

When you’re done selecting the hand and pen, press Ctrl+Shift+I on the keyboard to invert the selection and hit Delete to remove the background of the image.

Use the layer Blending Options (Right click on the layer / Blending options) to drop a shadow from the hand.

The result should be similar to this.

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

Inside CorelDRAW

Import the background image (blank paper) in your CorelDRAW web-to-print template document and place it under the dummy text frame.

Import the transparent hand image you made in Photoshop and press Ctrl+X to copy it to the clipboard.

Select the dummy text, activate CorelDRAW Text tool (F8) and insert {curly brackets} at the beginning and the end of the text.

Paste the hand image after the closing bracket (Ctrl+V), select it and adjust its size by changing the font size to make it as large as the original image. By doing this, you’re instructing the web-to-print system to always show the hand image at the end of the variable text frame. Learn more about objects and images inside text frames.

Use CorelDRAW Character Formatting docker (Ctrl+T) to adjust the character vertical and horizontal shift and make sure the tip of the pen is exactly over the end of the last letter of the dummy text.

The result should be similar to this.

If a user inputs a longer text, the hand will go over the page size. To make sure the hand is cropped to the page size every time, we’ll place it in a container of the same size as the page.

Move the background shape (rectangular) on top of all objects and assign no fill and no outline to it. Select the dummy text frame and PowerClip it inside the shape.

The result should be similar to this.

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.