Using 3D to simplify

Illustration workflow

An experimental exploration for Rapid7’s product illustrations

During my tenure at Rapid7, I created a cast of characters to use as visual feedback for the user within our products. These characters were introduced as a way to add a bit of levity and fun.

Although I enjoyed the process of illustrating them, I was often the only one on the team that was responsible for creating these illustrations for new use cases. I wanted to find a way to expand the ability to create them to other team members.

At the time, we were also discussing opening these characters up to the wider brand to use in the customer-facing website and print material.

I had the idea to re-create one of the characters from our set in 3D, a medium that would allow us to re-use the same character model, and keep the visuals consistent from any angle, pose, or context.

The main challenge here is to make this little guy look like the flat 2D images I had already been producing for the Rapid7 products—as shown on the right.

He needed to have flat colors, the right proportions, and lastly— the same dark slate line art around his body.

Fortunately, our little buddy is fairly simplistic to model. A few spheres connected together and we’re done.

Since we need him to be easily posable, I kept his skeleton fairly simplistic.

One bone for his head, and two bones for each leg. This will allow a designer to bend each leg at the knee, and slightly twist his head from side to side.

For his color, I used an emission shader which is a type of material that emits a bit of light. This means his color is not affected by the scene’s lighting, resulting in flat, cartoony looking colors.

And finally, for his lineart, I used a feature called freestyle. This is a feature that will draw lines on top of marked areas after an image renders, resulting in a cartoon look.