Gramener

Create comics in Google Sheets using Comicgen

By Richie Lionell

* Last updated on 29 May 2021

Google Sheets is a very convenient tool. You could have the data, do the calculations, collaborate with others and present your report all from within the same workbook. Having said that, irrespective of the platform, business reports can be boring most of the time. Comics are an engaging & impactful communication format that can bring life to mundane reports. Thanks to the latest version of Comicgen you will now be able to create automated data comic reports in Google Sheets.

Here are a couple of interesting examples. In this example we get the input from the user and communicate a message through the comic character.

Figure 1 - Get an input from the user

Another interesting way to use Comicgen in Google Sheets is to display live survey results. This can be tried in training sessions or workshops where participants answer survey questions through a Google form and the insights from the survey are displayed live in comic format on a Google sheet where the survey data is being collected.

Figure 2 -Live survey report in comic format

You can also create full fledged data comic stories using Google Sheets & Comicgen.

Here's a short guide on how you can create comics using Comicgen and Google Sheets.

Step 1: Visit gramener.com/comicgen/v1/ and check out the different character options and features available. Let's create a character using the Aavatar option. You can change these attributes and create a character that best suits your need - name, gender, character, facestyle, emotion, attire, pose, face (skintone), shirt (color), pant (trouser color) and mirror. Apart from this you will also be able to change the width, height, x & y positions, & scale.

Figure 3 -Pick your character options

Step 2: Once you have decided on the character you want to use, copy the URL needed to render the image by right clicking on the PNG button. Open a Google Sheet document and paste the link in a cell.

Figure 4 - Copy the URL

Step 3: Use the image() function to add the comicgen character into any cell in the Google Sheet workbook.

Figure 5 - Using the image function

Step 4: By controlling the dimension attributes you will be able to render a full pose, bust or just the face. Like I mentioned earlier, the dimensions of the comicgen character can be controlled by tweaking the x, y, width, height & scale attributes. Though they are not part of the default url you have copied, you'd still be able to add them to the url parameters. We can do that by means of a simple string concatenation (similar to Excel).

Figure 6 - Change attribute values

The URL gets constructed in cell M2 using the formula;

="https://gramener.com/comicgen/v1/comic?name=aavatar&gender="&B2&"&character="&C2&"&facestyle="&D2&"&emotion="&E2&"&attire="&F2&"&pose="&G2&"&face=%23eeddc5&shirt=%23ffcc66&pant=%233a4e5c&mirror=&x="&J2&"&y="&K2&"&scale="&L2&"&width="&H2&"&height="&I2&"&ext=png"

Figure 7 - Creating a dynamic URL

The image() function is used in cell E3 to render the comicgen character;

=image(M2)

You will be able to add more comicgen characters to the sheet using the same technique.

Figure 8 - Render multiple comicgen characters

Step 5: Now let's add comicgen speech bubbles to our sheet. To do this we just need to repeat steps 1 to 4.

Figure 9 - Add a comicgen speech bubble

You will be able to change the font-family, font-size, font-weight, alignment, padding & line-height of the text. You will also be able to control the direction of the speech bubble pointer using the pointerx and pointery attributes. To give the speech bubble a sketchy look, play around with the rough attribute.

Figure 10 - Changing the direction of the speech bubble pointer

The speech bubble is inserted in cell C6 (see figure below) using the image() function. The URL is created in cell M5.

="https://gramener.com/comicgen/v1/comic?name=speechbubble&text="&F8&"&width="&B5&"&height="&C5&"&align=center&font-family=Architects+Daughter&font-size="&D5&"&font-weight=normal&pointerx="&F5&"&pointery="&G5&"&padding="&E5&"&fill=%23ffffff&line-height=1&x="&H5&"&y="&I5&"&scale="&J5&"&rough="&K5&"&mirror=&ext=png"

Also remember that it is the encoded version (Cell F8) of the text (Cell F7) that needs to be passed in the URL parameter. To encode the text in cell F7, in cell F8 use the encodeurl() function.

=encodeurl(F7)

Figure 11 - Encode the speech bubble text
Examples of Data Comic Strips in Google Sheets

Using the techniques shared so far, you'll be able to create exciting data comic strips in Google Sheets. Here are a few examples.

The data comic strip below has 4 panels. 2 panels are used to narrate the insights while the other 2 have supporting charts.

Figure 12 - 4 panel data comic strip

In the example below the comic narration helps the reader understand the table better. The character and the speech bubble are placed in proximity to the row that is being explained. Imagine the kind of insights you could deliver to your audience from a dynamic data table.

Figure 13 - Table with comics

You can also bring interactivity to your data comic strips by using drop-downs. Drop-downs are available by default in Google Sheets through the data validation option.

Figure 14 - Interactive data comic strip

Now you are all set to create data comic stories & reports using Google Sheets & Comicgen. For practise try creating data comic stories from any of the #ComicgenFriday challenges using comicgen & Google sheets. Also do try comics at work and bring life to your reports.

Here's a Google Sheet document for reference;

Visit gramener.com/datacomics/ for more data comics inspiration.

For workshops & other enquiries write to us at comicgen@gramener.com