Some web-to-print products look very different from what a web-to-print template looks like on the screen. This web-to-print help post explains how you can create a preview template of a badge or a button so that users can get a realistic view of the final product.

In a nutshell, we do most of the work in Photoshop and create a semi-transparent overlay image with all the glows and shadows. We need to overlay the image on top of a circular PowerClip container that holds a variable web-to-print image field.

Inside Photoshop

Create a new Photoshop document with the same size as the page size of your CorelDRAW preview template document. Import a background image that will be the surface on which you want the badge to show (ex. a cloth texture).

Glows

Lets start by creating the glows (light reflections) of the pin button. We make two and place them on opposite sides of each other.

Use Photoshop Ellipse tool (U) to draw a circle that will be the pin button and rasterize it (Right click on the layer/Rasterize Layer).

Duplicate the pin button shape layer (Ctrl+J), right click on the layer and select Blending options.

In the blending options pop-up window, open the Color overlay tab and assign a white color overlay. Duplicate this layer as well (Ctrl+J).

We now have two identical white ellipse layers sitting on top of the original (red) one. Since we’re going to create one glow at a time, you need to disable the visibility of one white ellipse for now (click the eye icon in front of one layer).

Next we need to resize the glow shape. Select the visible layer, press Ctrl+T to activate the Free transform tool and drag a corner node to resize.

Note. Hold down Shift while dragging to ensure proportional resizing.

The result should be similar to this.

Now lets add some fade-out transparency to the glow. With the layer selected, press Q to activate the Edit in Quick Mask Mode option and activate Photoshop’s Gradient tool (G) with a simple linear black-to-white fill.

Drag a gradient from the top-right side of the ellipse towards the middle.

You should see something similar to this.

Press Q again to exit Quick Mask mode. You should see a selection formed on the opposite side, press Delete to remove that part of the layer.

The result should be similar to this.

Let’s make the glow a bit more blurry. Go to Filter/Blur/Blur.

Note. Press Ctrl+F a number of times to repeat the last (Blur) filter ’till you’re satisfied with the glow’s appearance.

Let’s move on to the smaller glow on the opposite side of the pin button. Enable the layer’s visibility and click on the layer’s thumb icon while holding down Ctrl to make a selection with the layer’s shape.

Activate Photoshop’s Rectangular Marquee tool (M) and use the keyboard arrows to move the selection up and to the right a bit.

Press Delete, resize the shape just a tiny bit and move it up and to the right like you did when making the selection.

The result should be similar to this.

Note. We don’t need the fade-out transparency for this glow so you can just skip to the Blur filter (press Ctrl+F multiple times to repeat the blur).

The result should be similar to this.

Shadows

It’s time to add a few shadows to make the pin button preview look more realistic. We’re going to need two shadows, an outer and inner one. Duplicate the red ellipse layer, right click on the new layer and select Blending options.

In the drop shadow tab, add a shadow to the layer, you can use these settings as reference.

The result should be similar to this.

Select the background (cloth) layer and the one you just added a drop shadow effect to and merge them (Ctrl+E).

Next, we’re going to to delete the center part since we need the pin button shape to be transparent if we want the user uploaded images to be visible. We can make a selection just like we did earlier. Click on the thumb icon in front of the red ellipse layer while holding down Ctrl to make a selection with the layer’s shape and press Delete.

Note. Turn the visibility of the original red ellipse layer Off/On to make sure you’ve deleted the center part.

On to the inner shadow. Select the background layer and add a small Drop shadow through the layer’s Blending options just like you did for the outer shadow.

The result should be similar to this.

Delete the red ellipse layer since we don’t need it any more and save the image in a format that retains transparency (.PNG, TIFF etc.).

Download the FREE Photoshop .PSD file we ended up with.

Inside CorelDRAW

Import the image you just created in Photoshop to your CorelDRAW web-to-print template document.

Use CorelDRAW’s Ellipse tool (F7) to draw an ellipse that covers the cavity in the background image.

Import a dummy image, turn it into a variable web-to-print image field and PowerClip it inside the ellipse (Effects/PowerClip/Place Inside Container).

Move the background image on top of all objects.

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.

Download the FREE CorelDRAW template file.

Bookmark it!