This article dives deeper in the different elements of the image editor in order to get the most out of all its possibilities. We recommend to first read about the added value of this feature and how to set it up.
With our dynamic image editor, you can combine data and image optimization for impactful ads. Effortlessly generate optimized and hyper-relevant, product ads for social multichannel campaigns, directly from your feed, at scale.
Templates
The Image Editor is the part of our tool that lets you edit or create templates. These templates can be applied to specific products in order to boost images and create highly relevant product ads. A template is made up of a Canvas and Objects that are added to this canvas. You will be able to work on both of these elements when editing or creating templates.
At the top of the page, you will find a lot of different options. On the left side (1) you have the option to create 3 different types of objects, namely Text, Image or Shape objects.
On the right side (2) you have the option to zoom in or out of the canvas. With the arrow you can select the different objects and with the hand symbol you can move the canvas around. By clicking on the circled arrows you can either undo, or redo an action. And by clicking through the different items, you will see a preview of your template for every selected product.
Finally, at the top right (3), you can either 'Save' your template, or click on the cog icon to delete or duplicate a template.
Another template setting that can be useful is the 'Usage' tab. Here you can see where the specific template is used.
Canvas settings
Click on 'Settings' on the right side of the Image Editor to arrive at the following screen.
You have control over the size and background color (and opacity) of the canvas (the white square on the left) by adjusting the canvas settings.
The size of the canvas can either be one of the preset sizes, or you can manually fill in the amount of pixels for the height or the width. The preset sizes are included in a drop-down menu, and are based on the recommended or required sizes of different export channels, like Google Ads or Instagram Ads. If none of these options fit your needs, then you can set the size by pixel amounts for height and width.
The background color is a solid color specified by RGB values (a color model) together with the opacity. The color can be selected by either using the Color Picker (option 1 in image below) or by specifying the RGB values using Hexadecimal values (option 2 in image below) The opacity is set in a percentage, where 100% is fully opaque and 0% is fully transparent.
Grid settings
The grid settings include an underlying configurable grid that can be used to align objects on the canvas. To configure the grid, make sure the 'Display grid' setting is enabled. The main feature of the grid is the 'Snap to grid' setting. When enabled, this will make objects stick to the nearest grid-line when an object is moved, which will help you align your different objects. You can change the grid size in pixels of each square cell of the grid, as well as its grid color and opacity.
Object settings
Besides editing the settings of an image template, you can also add objects to your templates. An object is an element that can be added to the template and can be both static (e.g. a shape, a static image or a piece of static text) or dynamic (an image from the item, or the item's title as a text object). Every time a new object is added to the canvas, it will be layered on top of the previous object.
You can make changes to your objects under the 'Objects' tab. Here, the order of the layers can be changed (by clicking and dragging the 3 stripes), as well as the name and visibility of objects. Finally, you can lock your objects from being moved around, and you have the option to delete objects.
Image object
The most important type of object is the Image object. Images can be dynamic or static. When you insert a dynamic Image object, the object will be empty, until you choose to connect an Image field in the dropdown menu. Then, a placeholder image will be placed on the canvas. Important to note is that we dynamically scale the size of the image, to fit within the image box (between the blue lines). This prevents images from accidentally being placed outside the canvas (partially) or covering another object.
If you want to add a static image that remains the same for all items, please follow this Help Center article.
Under the 'Design' tab, you can adjust the following settings:
Layout
The position and size of the Image object, expressed in pixels, which can be manually adjusted.
Image
For dynamic images, you can choose as image field the project field from which the image will be fetched here. You can also set the opacity of the image here, expressed in a percentage.
Shadow
Here you can create a shadow behind your image for which you can specify its color, opacity, offset and blur. If the offset (expressed in pixel values) for the X- and Y-axes, is 0,0, no shadow will be visible. By, for example, increasing the pixel value for the X-axis, the shadow will be visible to the right of the picture.
Stroke
The border of the Image object. You can specify the color, opacity, and width for this border, as well as its style. The styles available are either to have no border, a continuous border, or a dashed border.
Text object
The Text object is an object where you can have both static and dynamic elements for, like a normal text field in Channable.
Layout
The position and size of the Text object, expressed in pixels, which can be manually adjusted.
Value
The text to be displayed in the text object. Static text and Dynamic fields can be mixed, as can be seen in the example above.
Font
The font of the Text object. There is a set list of available fonts together with other settings like color, decoration, alignment, line height, and spacing.
The size of the font can be set directly. You can also select ‘Scale to fit’ to automatically fit the font size to the box of the Text object.
Shadow
Here, you can set the shadow behind the text of the Text object. You can specify its color, opacity, offset, and blur.
If the offset, expressed in pixel values for the X- and Y-axes, is 0,0, no shadow will be visible. By, for example, increasing the pixel value for the X-axis, the shadow will be visible to the right of the text.
Stroke
The border around the letters in the Text object. Here you can set the color, opacity, and width, as well as the style of this border. The styles available are either to have no border, a continuous border, or a dashed border.
Shape object
The Shape objects are purely static shapes, like boxes, arrows, and lines:
Layout
The position and size of the Shape object, is expressed in pixels.
Shape
Here, you can specify the color and opacity of the Shape object.
Shadow
With this setting, you can set the shadow behind the shape object. You can specify its color, opacity, offset, and blur.
If the offset, expressed in pixel values for the X- and Y-axes, is 0,0, no shadow will be visible. By, for example, increasing the pixel value for the X-axis, the shadow will be visible to the right of the shape.
Stroke
The border around the shape. There can either be no border, a continuous line, or a dashed line. You can also specify the color, opacity, and width (in pixels) of the border.