A realistic pin button preview technique can be taken one step further. Things like perspective, lighting or other similar details help artificially created illusions for your web-to-print templates to be more believable.

Let’s create a web-to-print pin button preview template with some buttons on top of each other using this image that we found on smashingmagazine.com. The process is the same as creating a basic web-to-print pin button template. All we need to do is copy the glows, shadows and simulate a perspective on the variable web-to-print image.

In Photoshop

Follow the same steps as explained in the web-to-print pin button tutorial to copy the glows and shadows of the original image.

Let’s start by importing the original image in your Photoshop document since we’re going to use it as reference and draw the shapes according to the pin buttons on the original image.

Add the glows as explained in the original pin button tutorial.

Next you need to cut out the parts of the glows that are not needed. Click on the top layer’s thumb icon while holding down Ctrl to make a selection with the layer’s shape.

Select the desired glow layer and hit Delete.

Repeat this step to cut out the left button shape out of the right pin button glow.

The result should be similar to this.

Let’s move on to the shadows, add a background layer, duplicate all ellipse layers and use the layer Blending options to drop a shadow from all of them.

Since we have 3 pin buttons dropping shadows on each other and the background, we’ll need to merge them with the background layer one at a time.

Start by merging the bottom (top right) pin shape with the background.

Delete the cavity using the shapes duplicate to make the selection.

The result should be similar to this.

Note. Repeat this step with the other pin buttons working your way up to the button that is on top of all and has no other buttons dropping shadows on it.

As the last step we need to add the pin buttons inner shadow. Select the background layer and use the Blending options to drop a shadow. For this particular example we used these settings.

The result should be similar to this.

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

Download the Photoshop PSD file we ended up with.

In CorelDRAW

Use CorelDRAW Ellipse tool to draw shapes exactly as the pin buttons shapes. These will be the PowerClip containers.

Import the placeholder images and PowerClip them inside the shapes you drew.

Note. You need to simulate a perspective effect on the bitmaps placeholders that go inside the PowerClip containers.

Move the PowerClip container shapes under the foreground image you created in Photoshop. The Object manager (Window/Dockers/Object Manager) of your web-to-print template should look like this in the end.

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.