Understanding Aspect Ratios
When two shapes are the same they share aspect ratios even if their size is different. These two triangles have the same aspect ratio.  Circles and squares always share the same aspect ratio. But while a rectangle may always have four sides it isn't always the same shape. These three rectangles have different aspect ratios.  These triangles also have different aspect ratios. 
What is an aspect ratio?
In rectangular objects an aspect ratio is a comparison of the width to the height. Square images have an aspect ratio of 1 (8 inches wide by 8 inches high = 8 divided by 8 = 1). An image that is a rectangle twice as wide as tall has an aspect ratio of 2 (10 inches wide by 5 inches tall = 10 divided by 5 =2). An image that is 10 inches wide and 8 inches high has the same aspect ratio as one that is 5 inches wide and 4 inches high. 10/8 = 1.25 and 5/4=1.25.
Why do I care about aspect ratios?
If you want images that fit the products perfectly you will have to make more than one image of the same design because the image areas are different shapes. If you know what things share aspect ratios you can avoid the work of making more images than you need.
 |
 |
 |
| Just because an image is bigger than called for does not mean it will fit. Applying this rectangular image (2400 x 3600 pixels) to the button (which takes a square image) didn't work well. |
Obviously too big for the button. |
Resizing doesn't help because the shape is wrong. |
Do I need to make a different image for every different aspect ratio?
Not necessarily. An image with a white background is more flexible.
 |
 |
 |
 |
| Even a square image, which has the correct aspect ratio for a round item, can't be necessarily be used for bleed images with non-white backgrounds. |
This square image also doesn't have a bleed area. But it has a white background. |
It goes on oversized. But you can resize it smaller. |
Because the background is white, you can't see the edges of the image. So this one works even though technically it doesn't fit. |
 |
|
|
|
| Even with a white background if the aspect ratio is too far off the product looks unprofessional. |
|
|
|
Keep in mind that even if they share the same aspect ratio, two products can't always share exactly the same image. For example, the rectangular sticker and the oval sticker have the same aspect ratio. But the oval sticker is a different shape. As a result all images created for the oval sticker will properly fit the rectangular one, but the reverse is not always true.
Can I use the same image if the aspect ratios are very close? Do they have to be exactly the same for the image to work.?
If your design is full bleed with a colored background then you should make your image exact. While there may be some bleed products with flexibility (I think there are) I know from experience that for some products being off by a single pixel is enough to make the image not fit. The reason is that the sizing is done by mechanical/software rather than the human eye. The image is sized in increments of, usually, half inches. The system will never increase the size of your image, only decrease it.
If you use a wide enough white border that small errors in centering are not noticeable then you can use the same image of things with slightly different aspect ratios. Creating an irregular, gradient or similar edge from the design into the white border will also help mask small differences in border width etc. Tutor Tanith has put together a bunch of "shops" showing how one image designed for one product will fit on others.
Designs and Products that Rotate
Just when you thought you had the aspect ratio thing all figured out I bring this up. Let's say you have a rectangle that is 2000 pixels wide by 1600 pixels high. Isn't that the same thing as a rectangle that is 1600 pixels wide by 2000 pixels high? Well, it might be. But only if the product and design do not require a particular orientation. 
The aspect ratio is 2000 divided by 1600 or 1.25. Now you turn it on its side. Now it is 1600 pixels wide by 2000 wide. The aspect ratio is 1600 divided by 2000 or .80. The aspect ratios are different because the orientation is different. If you are using text, for example, you can't simply rotate the design. It not only has to fit the product, but it has to fit in the right direction. But if the design has no orientation then a rotated aspect ratio works.  As a practical matter being able to rotate doesn't significantly add to the number of things an image will fit.
Why doesn't my image fit?
When you create a design for a bleed product be sure to size for the bleed area, not the product area. The aspect ratios of the bleed area and the product area are not the same. I know that it seems like they ought to be, but they aren't. We can look at an extreme example to see why.
The greeting card has a bleed area of 5.5 x 7.5 inches. The product area is 5 x 7 inches. That leaves a 1/4 inch margin on all sides. (Just in case you were thinking the margin was half an inch, it isn't. 5.5 inches minus 5 inches = .5 inches half on one side/half on the other = .25 inches on each side) It looks roughly like this:  . But what if the margin was one and a half inches - that would be a three inch difference - if the outside is 5.5 x 7.5 with a one and a half inch margin the inside would be 2.5 x 5.5. And that would look like this:  Although the margins are even, the inside rectangle is taller and skinnier than the outside rectangle. If we exaggerated more and made margins of 2 inches  . The point is that making an image that fits the dimensions of the product and then trying to stretch it to cover the bleed area results in a wrong sized image. So for bleed products, always design for the bleed dimensions. Or at least do that if you have a colored background.
| width |
height |
aspect ratio |
| 5.5 |
7.5 |
.733 |
| 5 |
7 |
..714 |
| 2.5 |
4.5 |
.555 |
| 1.5 |
3.5 |
.428 |
You can try this for yourself. In pixels the greeting card bleed area should be 1100 x 1500 while the card itself is 1000 x 1400. [ 5.5 x 200 = 1000, 7.5 x 200 = 1500; 5 x 200 =1000, 7 x 200 = 1400]. If you create an image that is 1100 pixels by 1500 pixels, choose to keep the same image ratio, then try changing one dimension to match the card area, the other dimension will not match. See a demonstration.
Image Size
|
Tutor Tanith
