Pin buttons on top of each other

27/12/2009

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.

Bookworm buttons

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.

Photoshop pin button shapes

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.
Photoshop pin button glow

Add the glows as explained in the original pin button tutorial.
Photoshop delete pin button glow

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.

Web-to-print pin buttons glows

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

The result should be similar to this.

Web-to-print pin buttons shadow

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.

Photoshop merge layers

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

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

Web-to-print bottom badge shadow

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.

Photoshop drop shadow settings

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.

Web-to-print foreground image

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

Web-to-print PowerClip shapes

Use CorelDRAW Ellipse tool to draw shapes exactly as the pin buttons shapes. These will be the PowerClip containers.
Web-to-print place inside container

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.

Web-to-print object manager

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.
Web-to-print pin buttons piled up

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.

See also: