How to calculate the Ratio correctly?

• What is the Ratio?
• How to calculate the Ratio correctly?
• Formulas for Ratio calculation.
• How to calculate the ratio for a t-shirt (example).

What is the Ratio?

The ratio is a way of showing the relative sizes of two or more values. In HTML5 Product Designer add-on the Ratio - is used to specify the relation between the real size of the product and the product size on the screen. The correct size of an image which you will get for printing depends on your correct ratio calculation.

In brief, Ratio shows the number of the units of length in pixel for a current product. So, please, be very careful reading this part of the user guide.

How to calculate the Ratio correctly?

Before to calculate the Ratio, you should know:

1. The real dimensions of your product - width and height in inches or millimeters. Define the unit of length, which is the most comfortable for you and specify it in the General options of Product designer (Add-ons -> Manage add-ons -> HTML5 Product Designer add-on -> Edit).

2. Digital dimensions of your product image - width and height in pixels (As a rule, you can view these dimensions in any photo editor).

Please note! For correct ratio calculation, your real product and the image of this product should resemble each other. It means that the image should be a smaller copy (photo) of a real product.

Formulas for ratio calculation:

Real product width (inch or mm) divided by (/) digital product width (px) equals (=) "width" Ratio

And

Real product height (inch or mm) divided by (/) digital product height (px) equals (=) "height" Ratio

Compare "width" and "height" Ratio and take a bigger number, it will be the final Ratio.

In abbreviated form:

inch or mm / px = Ratio

Note! It is possible to use only five digits after the decimal point for Ratio in Product designer that is why all final calculations which you will see after adding a canvas will have a little inaccuracy.

How to calculate the ratio for a t-shirt (example).

For example, you sell custom t-shirts.

Take a real t-shirt where you will print design and measure it. See the picture on the right how to take measures.

Our example t-shirt has the following real sizes:

T-shirt width = 470 mm (18.5 inch)

T-shirt height = 660 mm (26 inch)

Note! Since t-shirts have different sizes "S", "M", "L", etc., and if you have one product for personalization with the "Size" option to choose, it is better to take the biggest T-shirt as an etalon to measure the real dimensions. In that case, it won't be a problem for us to adapt a printable image for smaller t-shirts. Or you can make separate products for every t-shirt size.  

We've made a t-shirt image in a photo editor tool (we have used Adobe Photoshop), outline the essential area with a rectangular tool and got the necessary dimensions (they are shown automatically in a photo editor). 

Our example t-shirt digital dimensions are

T-shirt width = 252 px

T-shirt height = 460 px

Now, let's calculate the Ratio. Our default unit of length is millimeter.

470 mm / 252 px  = 1.86507 ("width" Ratio)

660 mm/ 460 px = 1.43478 ("height" Ratio)

We see that "width" Ratio and "height" Ratio are a little different, it's a normal thing and it's always better to use a bigger number. Thus, the Ratio for our T-shirt is 1.86507.

Note!In HTML5 Product Designer add-on settings (editing product page -> "HTML5 Product Designer" tab -> 'Settings" link), there are such parameters as "Product side width (px)" and "Product side height (px)". These parameters can be bigger or smaller than real digital dimensions of a product. "Product side width (px)" and "Product side height (px)" define the width and height of the Product area in Product designer. Please, don't confuse them with real digital dimensions of a product. See below:

Conclusion

The formulas that mentioned in this article work excellent not only for t-shirt ratio calculation but for any other products like bags, pillows, shoes and etc. You can get the exact Ratio for such small products like smartphone cases, mugs as usually its digital dimensions and real dimensions coincide.

P.S. If you did not find the necessary information, please, check other sections:

This instruction refers to our CS-Cart module Product Designer maker.