Mascot Challenge #1

Meet the challenge: Trello’s Mascot


This mascot was was found in a tweet by Trello.


I’m on a journey to improve my design and illustration skills by studying some of the best designers’ work that I find on the Web.

DISCLAIMERS: I am not affiliated with Trello or Adobe.

For this walkthrough, I used the iPad template in Adobe Experience Design CC (Adobe XD). The dimensions were 768px by 1024px.

The Setup

I started with a basic grid. The large center circle is 415 x 415.

Image 1: Block shapes

With the basic grid in place, I added basic shapes as placeholders. These guided the overall direction of the illustration.

Adding Base Colors

In the next steps, color was added and more “blocking-in” was done to the general face area.

Image 2

The Eyes and Nose

The eyes and the nose were next to be worked on. For eyes, I used ellipses combined via Path transforms, while for the nose I used a regular rectangle tweaked with the Pen tool.

Image 3: Eyes and nose

The Mouth and Tongue

Creating the mouth and tongue was done with a series of combined ellipses. The tongue in particular was done by deforming a circle with the Pen tool.

Image 4: Mouth and chin

Currently, Adobe XD doesn’t have a Flip, a Mirror or a Reflection tool. As a result of this, drawing pairs of symmetrical shapes (like the chin), was a bit tedious and required guides (i.e. the Grey boxes).

Image 5: Symmetry hack with box guides

Ok…lots of Grey boxes!

TIP: Adobe XD’s path transforms are non-destructive, this allowed me to edit the individual shapes within the combined path. For things of this nature, the Pen tool becomes our friend.

The Paws

Image 6: Details to the face and paws

With a bit more color, the overall mascot begins to resemble our target.

The placeholder shapes for the paws are modified using the Pen tool. The shadowed-area (for the paws) was created by simply duplicating the White section of the paw, and transforming it with the Pen tool.

TIP: An alternative approach could have involved using circles that were combined using the Path tool.

At this point the design is half-way done! Time for the Gold!

The Medal

Designing Gold is tedious, but not difficult.

NOTE: I’ve been told that coming versions of Adobe XD will feature the much anticipated Gradient tool 🙌🏾👏🏾🎉.

For the time being, to get the gradients, use the Shadow tool.

TIP: Nonetheless, if you are unfamiliar with drawing/painting shiny metals, DeviantArt has some wonderful tutorials and references: here, here, and here .
Image 7: The medal
Image 8: Medal and the paw together

The Ribbon

After the medal, focus was given to the ribbon attachment and the mascot’s under-belly.

Image 9: Addition of the ribbon

Drawing the ribbon requires creating the shapes entirely with the Pen tool. Up to this point, the I found the creation of the ribbon to be the single most time consuming element of the illustration.

The Ears

Path transforms were used to clip the unwanted areas of the shapes that overlapped the main Blue circular background; specifically, the Intersect transform (Object > Path > Intersect).

Image 10: Ears and clipping overflowing shapes

Notice the rectangles in Artboard iPad-16?

Yep…that’s to help with the alignment and symmetry.

Also note the -15º and 15º… since the left ear is a copy of the right, we can apply similar rotation on each ear. Additionally, the ears were made by combining ellipses and tweaking their paths with the Pen tool — hence the need for the guide boxes.

The Fur

The penultimate steps involved adding details such as the two-tone colored fur and the shapes in the inner ear.

Instead of drawing all the lighter-colored shapes for the fur with the Pen tool, I found it easier to simply copy the darker shape and then modify the accents (like the spiked fur on the top of the head). The fur on the inner ear was done with the Pen tool. The basic shape was just a weird kind of four-sided star that was tweaked.

Image 11: Fur and ear details

We are almost done.


Now comes the background shape and some clean-up.

Image 12: Background

The Big Reveal

Overall, replicating Trello’s mascot was a fun process. Using simple shapes I was able to replicate the mascot without much difficulty.

Image 13: Trello’s mascot recreated!

Closing Thoughts

For me, the most tedious part of the entire process with Adobe XD was recreating the straps on the medal.

Image 14: Colors the mascot

A bonus however, was that the design had few colors. The shades and highlights were done using White, Black or the dark Grey with varying opacities (specifically 40%, 20%, and 15% opacity). Drop shadows were applied to the paws, the medal and the outer circle.

Parting Images

Image 15: The mascot at 100%

More eye candy!

Image 16: The full list of Artboards used in the walkthrough

I look forward to you feedback! Now…what next shall we decompose?

Enjoyed reading this? Hit the ❤️ to show your support.