April 6, 2012 at 13:28Basics of setting up disproportional scaling algorithms in Web-to-Print
In one of our previous publications, we talked about how, based on our Web-to-Print module, you can configure flexible scaling of print layouts through the web interface - so that customers themselves can automatically re-layout the layouts to the sizes they need without resorting to the services of a designer.
That article shows how this function looks from the user's point of view - how it can literally in three clicks change the proportions of the layout and get files ready for printing. Today, I present to your attention the flip side of the coin - due to which all this ease is achieved and how the algorithms are configured for automatic layout rewriting.
Algorithms for the proportional increase in layouts, as in the previous article, I immediately discard, because everything is elementary there - just the sizes of all elements change in proportion to the increase in the layout. All the “salt” is in disproportionate scaling, when, for example, a narrow horizontal layout for a banner, then an elongated vertical for some roll-up, and so on will be made from the A1 poster.
So that the user can safely do such resizes, you must first configure the appropriate layout template. Usually, this setting is assigned to the same designer who developed the template itself. First, he sets the “boundaries of the rational” - that is, to what extent it is possible to change the proportions of the layout. Then, based on these settings, it sets the algorithms for changing the size and position of each layout element on the page.
Let's start by repositioning the elements on the page. Alignment matrices are used to configure it. There are two options for such matrices - 3x3 and 4x4:
Alignment determines how the position of the block changes when the document is enlarged. You can “attach” a block to one of the sides or corners of the layout using cursors, and then, when the document is resized, the space between the block and the required angle will not change. In most cases, a 3x3 block of cursors will suffice, but for layouts with a large number of elements or with specific corporate style requirements, binding blocks to sides and corners may not be enough, and additional points will be needed.
In fact, with the help of this simple tool, the general structure of the layout and the relative position of all blocks are maintained. It is the turn of the second stage.
Next to the alignment matrix, there are two fields with which you can adjust the resizing of the blocks.
Depending on the alignment field used (3x3 or 4x4), you can choose how much the block will increase if the document is resized. These changes are set as a percentage of changes in the height and width of the layout.
That is, for example, if you should have a company logo in the lower right corner of the page, and its size does not depend on the proportions of the page, then zero values of both parameters are set for it.
And, for example, for the frame that runs along the edges of the page, on the contrary, you will need to set the size adjustment to 100% both horizontally and vertically, and it will change after the canvas is resized.
A mockup may include an element such as a color bar that serves as a backdrop for something - for example, a logo. And, let's say, it should always be the same in height, but in width should follow changes in the canvas. To do this, set 0% for vertical changes and 100% for horizontal.
Blocks containing raster images can also be enlarged without distorting the image, but for this it is necessary to provide that the image used in the layout has a “margin” in size. That is, if you plan to increase the layout, you need to use a high-resolution raster in the source. If this is not the case, then it is better to immediately limit the degree of increase in the size of the layout.
Thus, operating with just two parameters, the system can configure scaling algorithms for most layouts.
That article shows how this function looks from the user's point of view - how it can literally in three clicks change the proportions of the layout and get files ready for printing. Today, I present to your attention the flip side of the coin - due to which all this ease is achieved and how the algorithms are configured for automatic layout rewriting.
Algorithms for the proportional increase in layouts, as in the previous article, I immediately discard, because everything is elementary there - just the sizes of all elements change in proportion to the increase in the layout. All the “salt” is in disproportionate scaling, when, for example, a narrow horizontal layout for a banner, then an elongated vertical for some roll-up, and so on will be made from the A1 poster.
So that the user can safely do such resizes, you must first configure the appropriate layout template. Usually, this setting is assigned to the same designer who developed the template itself. First, he sets the “boundaries of the rational” - that is, to what extent it is possible to change the proportions of the layout. Then, based on these settings, it sets the algorithms for changing the size and position of each layout element on the page.
Alignment
Let's start by repositioning the elements on the page. Alignment matrices are used to configure it. There are two options for such matrices - 3x3 and 4x4:
Alignment determines how the position of the block changes when the document is enlarged. You can “attach” a block to one of the sides or corners of the layout using cursors, and then, when the document is resized, the space between the block and the required angle will not change. In most cases, a 3x3 block of cursors will suffice, but for layouts with a large number of elements or with specific corporate style requirements, binding blocks to sides and corners may not be enough, and additional points will be needed.
In fact, with the help of this simple tool, the general structure of the layout and the relative position of all blocks are maintained. It is the turn of the second stage.
Size adjustment
Next to the alignment matrix, there are two fields with which you can adjust the resizing of the blocks.
Depending on the alignment field used (3x3 or 4x4), you can choose how much the block will increase if the document is resized. These changes are set as a percentage of changes in the height and width of the layout.
That is, for example, if you should have a company logo in the lower right corner of the page, and its size does not depend on the proportions of the page, then zero values of both parameters are set for it.
And, for example, for the frame that runs along the edges of the page, on the contrary, you will need to set the size adjustment to 100% both horizontally and vertically, and it will change after the canvas is resized.
A mockup may include an element such as a color bar that serves as a backdrop for something - for example, a logo. And, let's say, it should always be the same in height, but in width should follow changes in the canvas. To do this, set 0% for vertical changes and 100% for horizontal.
Blocks containing raster images can also be enlarged without distorting the image, but for this it is necessary to provide that the image used in the layout has a “margin” in size. That is, if you plan to increase the layout, you need to use a high-resolution raster in the source. If this is not the case, then it is better to immediately limit the degree of increase in the size of the layout.
Thus, operating with just two parameters, the system can configure scaling algorithms for most layouts.