

Image generation is a technique of automated or semi-automated images creation. Creating a complete and eye-catching image with API from scratch could be a challenging task.
Great graphic designers usually don't know how to code, so they use visual editors like Photoshop, Sketch or RenderForm to create their drafts and mockup. 
Image generation software uses templates created by graphic designers and API just replaces properties like texts, colors or images to 
meet the final requirements.

## Step 1: Create a template

Add components and design your template in our [Template Editor](/docs/general/template-editor/).

![Online Editor for Image Generation](/blog/simple-online-design-editor.png)

Check every added component on canvas.

### Set image fit
Click on image and on the right side adjust image fit option. Set image fit to `cover` if it can be cropped on sides in order to fill whole space, or use `contain` option if the image must be showed without cropping. 
The contain option is useful when you add logos or brand visuals.

### Adjust text box
By default, RenderForm will scale down your text if it will be bigger than blue rectangle. 
You can set width and height of a text box to make sure your text can freely grow.

![Text alignment](/blog/text-component-alignment.jpg)

### Adjust text alignment 
Click on text and on the right side scroll down to 'Alignment' section. 
You can decide how the text will grow if it will be bigger than used placeholder on draft.  

## Step 2: Automate and scale

Now, you are ready replicate your template with different texts, images and more!
No matter which integration you will choose, the general rule of thumb is that you need to know which component you want to update and what property.
![Layout plus Data equals your image](/blog/image-generation-api.jpg)


General format of change looks as follows: 

`YOUR_COMPONENT_ID.PROPERTY=YOUR_VALUE`

Example:

`myNameComponent.text=This is my name`


Check [list of properties](/docs/general/components/) which you can edit with any integration.


![Example of generated image from Image Generation API](/blog/example-of-generated-image-from-image-generation-api.jpg)



What is Image Generation?


[Make.com](https://www.make.com/) (formerly Integromat) is a popular automation platform that can improve your workflows by automatizing them. One central hub that connects all apps helps in controlling all workflows and makes the automation simple and intuitive. 

Make offers many [apps that you can easily integrate](https://www.make.com/en/integrations) in your workflow automation, like Google apps, Facebook, Mailchimp, Shopify, Etsy, Buffer, Tally and much, much more. RenderForm is one of them, so you can use it in Make workflow to automatize your email or marketing campaigns with automatic, personalized images that will stand out!

## Image automation with Make

You can use Make to automatize your workflow and connect multiple apps into one process. There are three simple steps to generate automated images: add trigger event, then create an image template in RenderForm, and set up automation in Make.com. Ready to try it?

### Trigger event - Tally form

Here, you can create any **event that will trigger the action of generating an image**. It can be a new sign-up to your app, new product in your store, a change in your Airtable spreadsheet, new scheduled meeting in your Calendly calendar or submitted form on Google or Tally. Anything you can imagine and think of that you use in your workflow.

![Create trigger event with Tally](/blog/make-trigger-action-l.jpeg)

I created a workflow that starts from **trigger which is form submission on Tally**.

**What is the idea?** I created a simple Tally form, where I fill all data I need to create a hotel offer for my client. In the form, I enter hotel details, trip dates, price, etc.; so everything I want to send in the offer. 

![Tally form](/blog/make-tally-form.jpeg)

Next, when I submit the form, I would like to email the client and include personalized images of hotels from my offer. The automatic images will be generated using RenderForm template.

### Create image template

Now, **create your image template in RenderForm editor**. One element in your image template is one component that can be editable via Make automation. 

I created different **components** like `price`, `title` or `availability`, and I will be replacing those elements automatically when there is a new form submitted on Tally.

![Create image template in RenderForm](/blog/make-renderform-template-l.jpeg)

For example, using my Tally's form I will be replacing the title (hotel name), hotel image and price elements.

### Action - generate image

The last step of the configuration is to **set up RenderForm module** in Make and **map the elements between Tally form and RenderForm template**.

Search for RenderForm integration in “Make” and click on Add button to connect it with your RenderForm account. You will find your API key in your [account section](https://renderform.io/console/api-keys/) in RenderForm.

![Add RenderForm event in Make](/blog/make-renderform-apikey.jpeg)

Then, we need to **configure the actual image generation**. First, select the template you want to use for this automation. In my case, it's “Hotel card” from the previous step. Next, in *Changes*, we will insert responses from Tally form into RenderForm template.

- **Component ID** - it is the component name in your RenderForm template
- **Property** - type of component, it can be for example, text or img for images
- **Value** - here you select the form element from Tally

![Set up RenderForm image generation](/blog/make-renderform-setup-l.jpeg)

In the example above, I created different items for each element I wish to replace. So, for `price` component from RenderForm image template, which is of type `text`, I assign a field from Tally form which appears as `1. Fields: Price`. Whatever price (or other text) I enter into that field in Tally form, it will replace the default *price* component in my template. 

### Run automation to generate image

Now, the automation is ready. **When I submit the form, RenderForm will generate the image** basing on the information from Tally. You can see that the image has different title, price, image and dates from the original template. 

![Image generated automatically](/blog/make-renderform-image.jpg)

**Imagine creating multiple images like that, using a simple form!**

I can download the image or send it directly to the client through the automation in Make.com, by adding the next step to the workflow. Sounds simple, doesn't it? 

## Use cases for automated image generation

Automatic image generation works great in personalized marketing campaigns and helps in creating multiple images with different content, basing on templates. What are the use cases for automated image generation?

- generating multiple images with dynamic content that you can easily download or use on your website
- [personalized images for email campaigns](/blog/posts/personalized-emails-mailchimp/)
- image hosting for your automated images
- blog post covers – if you struggle with keeping your blog post covers nice and clean, and most of all coherent, using RenderForm can help significantly. Simply create a template in the editor and [generate all images automatically with a simple Excel list](blog/posts/how-to-create-many-images-from-spreadsheet/) of your blog posts. 

**Try RenderForm for free** and check how it can help you improve your image generation with automation options and simple image editor! 


Image Generation with Make.com


Integromat is a platform for creating connections between different applications in no-code style, where achieving 
a business goal is the top priority. Integromat offers a free plan, so it makes it a great option for testing its capabilities.
[Integromat application library](https://www.integromat.com/en/integrations/) is growing every day, you will find there all popular application like Google Drive apps, Facebook Ads, Shopify, Telegram, Instagram, e-mail connectors, and more, much, much more!

Let's create a simple scenario! We will create an Integromat flow where we will watch on new customers in Shopify, then we will generate a personalized image using the customer name and e-mail them with our auto-generated, personalized image.

Whole scenario looks like this, we created 4 modules: 

- Shopify - watch new customers
- RenderForm - generate an image with customer name
- HTTP - download the image
- E-mail - send the e-mail

![Shopify: Send email to a new customer](/docs/integromat/example-scenario-personalized-customer-image-with-shopify.png)

In RenderForm, I created a simple image with 4 components. The most important one is the text component with 'Hey Joanna!' greeting. It has 'greeting' ID, which we will use in the following steps.

![RenderForm: example image template](/docs/integromat/example-thanks-for-order.png)

Next, in RenderForm Integromat module I configured a new connection using API Key. The API key can be found in your RenderForm account in your [account section](/console/api-keys/).
I selected my template and added Changes to replace 'Hey Joanna' text with a greeting with customer name. 

![Integromat: image generation module](/docs/integromat/bannerly-module-configuration.png)

The HTTP module will download the generated image with customer name. This step is required by the e-mail module.

![Integromat: download image from URL](/docs/integromat/integromat-http-module-get-a-file.png)

I configured e-mail module with my e-mail mailbox, you can put there an e-mail subject line and e-mail message. In the last field, I added an attachment with the image which I downloaded in the previous step.

![Integromat: add image attachment](/docs/integromat/e-mail-add-attachment.png)

We are done! Now, every time you get a new customer in your Shopify store, they will receive a personalized e-mail message. This will definitely make your store much more unique than others. You can use RenderForm to create much more sophisticated marketing campaigns. For example, you could generate a QR code with promo link or create a template with most popular items in your shop and send it to your customers. Possibilities are unlimited! 

Have fun with our image generation tool and if you experience any problem or need help with automatizing your workflow, we are here to help.

## Resources

- [List of component properties](/docs/general/components/)
- [Make.com (Integromat)](https://make.com)


Zapier

Make.com

Mailchimp

Airtable

Google Sheets

Excel/CSV file

REST API

HTML to Image

Make

What is Image Generation?

Image Generation with Make.com

Image Generation with Integromat