Image Areas | Strategies for dealing with angled image areas
Overview
The purpose of this article is to recommend some approaches that can be used when a rotated or angled image area is required as part of a design on a product.
But wait, isn't there already an article on this???
Not exactly, the article above refers to the rotation setting on an image area and this simply applies a default rotation to the uploaded image (or an image picked from a gallery). This is not the same as mimicking the rotation of an image area itself...
Example Scenario
Here’s a simple design featuring three rotated polaroid photos which could be applied to a product:
There are two methods which can be used to tackle scenarios like this and in some instances (eg: if you have overlapping image areas) you may need to use both.
The methods are:
1. Using a Placeholder image as an overlay
2. Using Image Area Masks
Method 1: Using a Placeholder image as an overlay
Using this method generally does not require the use of image area masks, they would only be required if you had overlapping image areas.
In that situation the masks do not need to be accurate, they just need to clip the excess area of the overlapping image area behind where the placeholder sits.
This is probably the easiest method and it should always be attempted first.
An additional image area is added to the product with User input and transformation controls disabled. This image area will be used to display a Placeholder that sits above the other image areas and features cut-outs to reveal the user-uploaded or selected images in their correct location.
Example Steps
1. Three image areas are created for the photo uploads ensuring that they are tightly cropped around the apertures required. This will ensure that the user needs to do minimal resizing and re-positioning to any image uploaded in the app
The image below shows an example image area in pink for one of the polaroids
2. A default rotation is added to each of these three image areas so that they match the approximate rotation of the polaroid in the preview image. This means that the user uploaded images will be perpendicular to the polaroid edges and mean that they read correctly in the context of the design as below:
3. Once the three upload areas are configured, an additional image area is created that conforms to the entire print area (in our example the print area covers the whole canvas)
4. The design is edited in Photoshop or a similar program to create a placeholder image with the black areas of the polaroids masked as cut-outs to a transparent background as so:
Note that the placeholder image resolution should match the dpi of your print area
5. The placeholder file is uploaded to the additional image area
6. The following settings are modified on the placeholder image area:
- User input disabled
- Transformation controls disabled
- Z Index set to a higher number than the other image areas so that it sits on top of them
- Use placeholder in artwork enabled to include the placeholder layer in the output file
7. The product should be print tested to check it both functions in the app correctly and also outputs the print file as expected
Method 2: Using Image Area Masks
The alternative method is to set a mask on each individual image area that conforms to the shape required.
Note that an Aspect mask is insufficient in this case as it is a general mask applied to everything on the canvas and as such would not prevent overlapping image areas in the preview, nor would it have any effect on the print output.
Example Steps
1. As with the previous method, the first step is to create the three image areas for the photo uploads and ensure that they are tightly cropped around the black area of each polaroid.
2. Next, a mask is created for each image area in Photoshop or a similar program. The mask should conform to the shape of the black area of the polaroid. As you may remember from the article on image area masks https://support.custom-gateway.com/portal/kb/articles/image-areas-mask it is important that the image saved for the mask should be:
a) relative to the size of the image area (This is extremely important)
b) at the same print resolution as the print area (eg: 300dpi)
c) have a transparent background as below:
3. The process of creating the masks is then repeated for the other two polaroids
4. Once all the masks are ready they are added to the corresponding image area
5. As with Method 1 a default default rotation should be added to each of the three image areas so that user-uploaded images will approximately match the rotation of the polaroid in the design
6. (Optional) One aesthetic adjustment worth making this case would be to remove the black areas from the Preview image and instead add a black image as a placeholder on each image area (that the user will then replace with their own image). This will prevent aliasing visible at the edges where the uploaded image is overlaid on top of the black area in the preview beneath it.
6. 'Use placeholder in artwork' should be disabled or validation set on the image areas to force user input
7. The product should be print tested to check it both functions in the app correctly and also outputs the print file as expected
Related Articles
Text Areas | Basic > Default Rotation
Top Tip: Watch on full screen for best quality / viewing experience! By default any rotation specified on a text area will be carried through to the print output. To disable this behaviour (and allow for preview-only rotation) simply make sure that ...Image Areas | Basic > Using Rotation
Top Tip: Watch on full screen for best quality / viewing experience!Image Areas | Options > Fit Mode
Please note that Fit Modes have been updated and as of 2022 there are 3 additional types which are detailed below - These types are Relative, Relative Contain and Tile. Top Tip: Watch on full screen for best quality / viewing experience! Please note ...Image Areas | What is an image area?
This video is a lesson taken from our Gateway Academy course Mastering Product Creation (Level 1). For more information or to enroll on available courses go to: https://academy.custom-gateway.com/Image Areas | Multiple image areas / collage layout