Automate Designs with Bannerbear and n8n đ¨
As a designer and self-proclaimed data nerd, Iâve been involved in proceduralizing creative deliverables for some time. Up until now however, my concepts always had to reconcile with the limitations of InDesign macros or my coding skills. n8n empowers me to apply my basic understanding of data objects and the interwebs to create some pretty slick automations with minimal effort.
When it comes to creativity in a design context, many tasks donât involve a whole lot of creativity â for example, updating a daily quote post graphic. What piques my interest is how do we empower designers to stay creative and leave the grunt work to automation.
In this tutorial, I will teach you how to create your very own procedural graphic banner workflow. Using a styled template, weâll automate modifying image and text layers to generate creative graphics on-demand. In the interest of fun, weâll create some Cocktail Recipe banners. However, this workflow can easily be tweaked to be very useful in marketing, e-commerce, and beyond.
Creating the workflow in five parts
Weâll use n8n integrations for Bannerbear and Rocket.Chat to get this workflow up and running. Rocket.Chat is a scalable and open-source alternative to messaging app Slack, and Bannerbear is a simple REST API that automatically generates variations of graphic templates at scale.
To accomplish this, weâll go through five steps:
- Creating a Cron node
- Creating an HTTP Request node
- Designing a Bannerbear template
- Creating a Bannerbear node
- Creating a Rocket.Chat node
I have also submitted the workflow (the workflow was build using n8n@0.111.0) on n8n.io, in case youâd like to skim through it. Please note that youâll still need to configure a couple of things like your credentials as well as the settings of the Bannerbear and Rocket.Chat node. You can find information on how to set up n8n in the documentation. Alternatively, you can sign-up for n8n.cloud to get access to our hosted service.
1. Cron node: Trigger the workflow every Friday evening
In the Node Editor view, add a new node by clicking on the â+â button on the top right of the Editor UI. Select the Cron node under the Triggers section. Click on the Add Cron Time button, select âEvery Weekâ as the Mode, 18
as the Hour, and Friday
as the Weekday. You can set the cron job to trigger whenever you like.
In my case, itâll trigger at 6 PM, giving me enough time to prepare the cocktail before enjoying it. Unfortunately, the workflow canât make the actual cocktail for you ⌠yet đ
Hereâs a video of me following the steps above.
2. HTTP Request node: Get random cocktail recipe data
Next, letâs add an HTTP Request node. It can be used to query an API so that we can fetch a random cocktail recipe whenever the workflow is triggered.
Weâll use TheCocktailDB to get information about a random cocktail recipe. They offer a free test API key and each Cocktail comes with an image, name and recipe which will be perfect for our use case. Create the HTTP Request node by clicking on the â+â button on the top right of the Editor UI. In the node configuration view, enter the following URL:
https://www.thecocktaildb.com/api/json/v1/1/random.php
When you click on the Execute Node button, youâll see that the node will pull in the details of a random cocktail for you. Hereâs a video of me following the steps mentioned above.
3. Bannerbear app: create a template
First of all, create a free Bannerbear account. Now, create a new Project. I named mine âCocktail Recipesâ. Each project in Bannerbear can house many templates. Create a new template by clicking on the Create a Template button. Next, select âSquare (1000x1000)â as your size format and hit Save.
Now, click on Edit Template to open the template designer â if youâve ever used Photoshop or Sketch, this should look familiar. Itâs a typical layer-based design tool, where you add layers of images, text, and shapes to create your graphic template. CocktailDB provides a square image for each cocktail entry, so letâs use that as a background image for our template. Click the + icon next to New Layer on the left-hand side panel, and select âImage Rectangle (API)â.
Note: Donât select âImageâ as we need the API functionality to be able to modify this image programmatically and use Bannerbearâs fancy auto-resizing logic.
On your canvas, click on the newly added image and resize it to fit the entire canvas. Hereâs a video of me following the steps mentioned above.
With the âImage Rectangleâ still selected, set the Type to fill
. Set AnchorX and AnchorY to center
from the Layer property panel (located on the right-hand side of your canvas). This will ensure that images scale to fit the whole canvas while maintaining their aspect ratio â to avoid it looking âsquishedâ. Lastly, set the layerâs name to cocktail-image
â weâll use this later to access the layer from n8n.
Next, add another new layer and select âText (API)â from the dropdown. Set the layerâs name to title
. Increase the font size to Âą80 as weâll use this layer for our Cocktail name. Feel free to style or position it how you like.
Repeat this step and create another text layer, this time naming it recipe
. In my template, Iâm overlaying the recipe instructions over the Cocktail image. To ensure itâs always legible, for example, when the background image has lots of light colors, you can opt to assign a âBackground colorâ to the text. Hereâs a video of me following the steps mentioned above.
Lastly, I created some overlay graphics in Illustrator to give our banner some visual oomph. This is a great way to incorporate a visual identity into the template and offload the âheavy liftingâ of design into more advanced tools. Download the assets I created or design your own (free templates are available for personal use on vecteezy.com). In the template editor, Add a new layer, select âImageâ then upload your image via the Layer property panel.
Below is a photo reference of our final template in the Bannerbear editor.
4. Bannerbear node: Automate the image design
Before switching back to the n8n editor, click on the Settings / API Key button in Bannerbear and copy the Project API Key. Back in the n8n editor, we will add a Bannerbear node to automate creating variations of our template.
In the Bannerbear node, add a new credential and paste the Project API Key there. Select âCocktail Recipe Templateâ as the Template ID from the dropdown. Now, click on the Add Field button, select âWait for Imageâ and toggle the button to activate it. Since Bannerbear takes a few seconds to generate the image, this option makes sure that the node waits until the image has been created and passes the image URL in the result.
Now, under the Modifications section, click on the Add Modification button. First of all, letâs specify the background image by selecting the cocktail-image layer. Since the Image URL is a dynamic piece of information, click on the Add Expression button by clicking on the gears icon. In the Variable Selector, choose the following variable:
Current Node > Input Data > JSON > drinks > [Item: 0] > strDrinkThumb
Add another modification, select the title layer and in the Text field, select the following from the Variable Selector:
Current Node > Input Data > JSON > drinks > [Item: 0] > strDrink
Finally, add another modification, select the recipe layer and in the Text field, select the following from the Variable Selector:
Current Node > Input Data > JSON > drinks > [Item: 0] > strInstructions
Now, click on the Execute Node button, youâll see that the node will output the prepared imageâs URL as well. Hereâs a video of me following the steps mentioned above.
5. Rocket.Chat node: Post the image in a channel
Input Data > JSON > image_urlâ]]],[1,âpâ,[[0,[],0,âDonât forget to activate the workflow by toggling the activate button on the top right. Hereâs a video of me following the steps mentioned above.â]]]]}â>
Add a Rocket.Chat node by clicking on the â+â button on the top right and selecting the Rocketchat node. In the Node Editor, enter your Rocket.Chat credentials. Hereâs some detailed information on how to create an User ID and Auth Key for the credentials. While creating your personal access tokens, donât forget to select âIgnore (Two Factor Authentication)â before clicking on the Add button.
Next, we need to enter the Channel. I entered general
, feel free to enter a channel of your choosing. Now, we can send a picture of the delicious cocktail by clicking on Add Attachment under Attachments. Click on Add Attachment Item and select âImage URLâ. To fill the Image URL field, select the Add Expression option. Once you have the editor open, select the following in the Variable Selector:
Current Node > Input Data > JSON > image_url
Donât forget to activate the workflow by toggling the activate button on the top right. Hereâs a video of me following the steps mentioned above.
Next Steps
You can apply the steps in this walkthrough to build far more powerful use cases than our fun Cocktail Recipe banners. Especially for marketing, e-commerce, and content calendar needs. Below Iâve listed some ways in which this workflow could be expanded â feel free to try these out and drop a comment if youâd like for us to cover them:
- You could design different versions of the banner template, each optimized for their intended delivery channel â like an Instagram Story (9:16) or a Facebook post (1.91:1) and attach them to a new card in a Trello board.
- Use IF node in n8n to pass a predefined image to a Bannerbear template. In our Cocktail banner, this could be used to add the correct drinkware icon depending on the glass type of the cocktail (like âHighballâ or âCollinsâ).
- Create a Bannerbear template for a mockup of your SaaS solution and generate variations with your leadsâ name, photo and company logo.
Conclusion
Weâve created a nifty proof of concept to demonstrate procedurally modifying graphics. A similar setup using the Sketch command-line tool is also possible. But from my experience, this is a much longer process that requires a lot more lines of code.
The biggest takeaway for designers and programmers alike is how simple yet potentially powerful the actual mechanics of this whole workflow are. I am really curious to see what kinds of workflows you cook up with Bannerbear and n8n. What types of use cases do you think would be most valuable? Drop a comment below â I love to discuss use case ideas or get feedback on what youâd like to see next.
In case youâve run into an issue while following the tutorial, feel free to reach out to me on LinkedIn or ask for help on our forum đ