Credit card text

14/12/2009

Learn how to make a dynamic imaging template that looks like a credit card and the user can change the embossed text on the card. It’s a useful technique for web-to-print as well.

Web-to-print credit card text

Before you start

Web-to-print 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 texts and turn them into variable web-to-print fields.
Web-to-print OCR10 font sample

The font used on credit cards is digital looking one, we used a free version of the original OCR-A font called OCRA10 font. Looks the same and does the trick.

In a nutshell, we’re going to Bevel the text fields to make it look as if it was embossed on the card.

Background

The real credit card size is 85.60 × 53.98 mm, this is the global standard. Since we’re making a dynamic imaging template that is more like a preview credit card rather than the real thing, we just need to keep the same proportions. We went with a 600 x 378px page size.

Web-to-print rounded corners

First we need to curve the corners of the background rectangular shape. With the shape selected, enter the desired value in the corner roundness section of the top Rectangle tool properties bar.

Note. Activate the lock icon to round all corners simultaneously.

Web-to-print credit card background

You can use this shape as a PowerClip container for all the background shapes/images that fit your design.

Embossed text

The most important thing in this technique is the variable text. To make it look embossed like it is on real credit cards, we need to add a bevel to it.

CorelDRAW bevel settings

Select the dummy text frame and open CorelDRAW Bevel docker (Window/Dockers/Bevel).

Assign a Soft Edge style bevel to all text frames. Use these settings as reference.

Web-to-print embossed text

The result should be similar to this.

Field editor

Web-to-print field editor

Use the the web-to-print Field Editor on the site to set a few rules for the text fields such as:

  • Use only UPPER case characters (just like on real credit cards)
  • Limit the maximum number of characters to make sure they don’t go outside the page.

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: