A Step Towards Automated Layouts - Smart Overlay

posted in tech

We have completed our prototype, which automatically finds suitable regions to add content to product images. Since this content is placed on top of the existing image, we call this function Smart Overlay.

We are totally excited about the possibilities that now open up.

How It Works

First, our neural network identifies the regions in the image that must not be obscured and marks them as occupied. These regions represent the main subjects of the image. We then determine the largest, contiguous, rectangular area without overlapping the occupied regions. Any content can now be added to this area, such as logos, product descriptions, prices etc.

Automated Layout for Automated Marketing

Smart Overlay can be used in a completely automated workflow or as assistance system, which speeds up the creation of marketing material tremendously. So let's have a look of what's possible once we have identified the Smart Overlay area.

Assistance System for Layout Tools

Automatic positioning of text fields or images in layout tools like InDesign or Canva would be a huge accelerator. The user can still adjust the position and size, if needed. Corporate design rules like margins, alignment, proportions can be applied as well. The Smart Overlay area is just the container.

Insert product data and apply corporate design guidelines

If a DAM (Digital Asset Management) or PIM (Product Information Management) system is connected, the data associated to the loaded product image can be retrieved and positioned automatically. The user then just fine tunes the proposed layout.

Multi Channel Publishing

Different social media channels require different sizes and aspect ratios when posting images. Some platforms are optimized for landscape, some for square and other for portrait formats. There are different image sizes for posts, feeds, stories, ads, header and profile. And they seem to change constantly.

Editing images with additional content manually for all those possible formats is not feasible. Therefore, image content may be hidden when it is displayed. This problem can be avoided when the content is automatically added to the image after cropping. This ensures your content is always visible.

Content-aware HTML Overlays in Websites

Instead of overwriting the image pixels, it may be better to use HTML as a layer above the image, when used in a web shop or blog. The content is then styled based on the defined CSS and can be easily changed.

Insert text with background without covering the main motif

We already have our sights set on the next expansion stages, but we cannot report on them yet. If you are interested in how to integrate Smart Overlays for an automated workflow, let's have a chat.


Get our latest blog posts and updates straight to your inbox.

Read more about tech