Analog counter

12/11/2008

Tips and tricks on how to create a analog roll counter for your web-to-print template.

Web-to-print analog counter

Before you start

Web-to-print counter elementsUse the Rectangle tool to draw

  • The outer shape of the counter,
  • The base cylinder that will hold the counter rings and
  • As many rings as you want your counter to contain.

Note. The space between each ring must be the same.

Input the dummy numbers and turn them into a variable web-to-print field.

Gradients

The look that we are trying to achieve with the counter elements are metal or plastic cylinders. You’re free to try your own techniques but here’s an idea.

Web-to-print object properties/

/

Select the base cylinder, open the Object Properties docker (Window/Dockers/Properties) and assign a shiny metallic fountain fill to it.

/

/

/

/

Web-to-print counter rings fountain fill/

/

Select the rings on top of the base cylinder and assign a fountain fill to them as well, something that might resemble an unpolished black metal or plastic.

/

Web-to-print numbers fountain fill/

/

Select the dummy numbers text frame and assign a fountain fill so that the numbers appear highlighted at the center of the ring.

Character spacing

Since the counter rings in the back are static, you need to adjust the space between the numbers so that each number is in the middle of each ring.

Web-to-print paragraph formatting/

Open the Paragraph Formatting docker (Window/Dockers/Paragraph Formatting) and adjust the Character spacing value under the Spacing tab till the numbers appear exactly centered on each ring.

Note.
To avoid headaches, use fonts that have all the numbers in the same width. Ex. If you use fonts with different number widths, tight width numbers such as “1” will missalign the rest of the numbers and they will not be centered on each ring.
The same goes for letters, most fonts that even have the same number widths, have different character widths and the letter “W” is much wider then the letter “I”.

Text on a path

To get a more realistic look, the numbers should be slightly missaligned verticaly. This can be achieved by placing the text frame, that contains the numbers, on a curved path.

UPDATE: You can use the method explained below, but you can achieve the same result more easily by using Character formatting matching instead of fitting text on a path.

Web-to-print polyline tool/

Use the Polyline tool to draw a line from the first counter ring to the last.

/

/

Web-to-print add nodes/

/

Add nodes between the counter rings.

/

Web-to-print drag nodes verticaly/

/

Drag the parts of the line that go over the ring verticaly.

/

/

Web-to-print fit text to path/

/

Select the text frame, go to Text/Fit Text To Path and click on the curve.

/

Web-to-print analog counter final result/

The result should be something similar to this.

All done!

Our web-to-print software can handle this effect easily! Upload the template into your catalog and test it.

Web-to-print analog counter

/

Try this web-to-print template.

Download the FREE CorelDRAW template file.

/

See also: