← Back to The Journey ← Back to The Game

Designing the Card Back

I tried a few different generative AI tools to assist with the Tennis Solitaire card back design. There was a bit of frustration, but ultimately landed on a design that works with the overall look of the game.

For the card back, I wanted to go with something tennis-themed, but a bit abstract. My first attempt was this image:

Original card back design

It was a pretty simple workflow to make this first design. I started with Adobe Firefly, using the prompt in the screenshot below. I chose that hand drawn style reference and used a stock photo for composition.

Adobe Firefly prompt interface

From there I hopped over to Canva. It took a few minutes to figure out the right aspect ratio for the project and play with rounded edges and border weight. Once that was set, I downloaded the image as a png with transparent background and stuck it in the game.

Canva design interface

I used this as a placeholder for the first few weeks, and thought I might stick with it, but as the game got built out with more pictogram-style imagery, the original design didn't work anymore.

Ultimately, I felt like a better design for the card would look more like traditional playing cards, with a geometric design covering most of the card back.

At this point, I had already mostly abandoned Firefly in favor of Nano Banana (Google Gemini) for image generation. I really struggled to get decent pictogram style tennis imagery out of Firefly to use as the basis for the foundation pile images. With some trial and error and quite a bit of correction, Gemini produced much better results.

I thought the card back design would be straightforward, but actually it was quite frustrating. Oddly, Gemini really struggled to produce designs at exactly 700x980 aspect ratio, even when explicitly instructed to do so. I got a bunch of interesting designs that fit with the look and feel of the site, but they were all even squares, so not really useful for the card back design.

Here's a fun exchange I had with Gemini at the end of a particularly frustrating thread.

Gemini chat screenshot 1 Gemini chat screenshot 2 Gemini chat screenshot 3

At this point I decided maybe I need to try a different image generator. I created an account with Black Forest Labs, and prompted Flux Kontext with the same instructions I gave Gemini. The results were terrible. Here are a couple examples. Aside from not loving the designs, Flux couldn't seem to accept a prompt that this was a card BACK design without also including suit and number. And I'm not sure what was happening with that last example.

Flux Kontext result 1 Flux Kontext result 2 Flux Kontext result 3

I went back to Google and tried one more time. This time I started a fresh conversation, and used the same prompt I had entered for Flux Kontext. And this time I got consistently good results. I don't think one could draw broad quality conclusions from a test this small, but one lesson I did take away was to start a fresh conversation for each discrete task being requested of Gemini – at least when it comes to image generation.

Here's the final result I used in the game. I used the same Canva process noted above to go from initial generation to properly sized and formatted card back for the game.

Final card back design