Designing Adobe Illustrator’s rich tooltips

Relatable visual stories that surprise, delight, and guide user outcomes

Digital illustrations of a basketball, a slice of pizza, and a cat are alongside a stylized representation of Adobe Illustrator with a cursor pointing to a tool in the toolbar and the Symbol sprayer tooltip open alongside it.

Originally used in Microsoft applications to display tool functionality in the toolbar (remember Clippy?) tooltips, have taken on many different forms over the years.  At their worst they’ve been obtrusive and annoying. At their best they’ve been welcome, useful… and even delightful.

For the past few years, Creative Cloud onboarding has been transforming how users learn to do things in our applications. Tooltips that at one time simply revealed a tool’s label, are now textual and visual descriptors of how to apply them.

In Adobe Illustrator these content-rich tips—the most straightforward application of the tool played out in short, fun, relatable animations—demonstrate an individual tool at its peak moment of shine within larger, implied workflows. Invoked by holding the cursor over a tool in the toolbar, the utilitarian but playful visual metaphors are the building blocks, no matter someone’s experience level, for learning how to do things in the app.

A GIF of a stylized representation of Adobe Illustrator with the Blob Brush selected in the toolbar and the Blob Brush tooltip open alongside it showing the tool in action.

But what exactly does designing and illustrating tooltips look like in practice? As designers our daily lives and our memories are represented everywhere—including in rich tooltips. Through the lens of telling relatable visual stories, I help our users get started in our apps with these playful onboarding experiences; there are some tricks to doing that well: focus on the most basic function of the tool, take inspiration from the everyday, use what you know, and follow a process that works for you.

Focus on the most basic function of the tool

One might assume these imaginative animations are easy to produce, but underneath their simplicity is a layer of complexity that unveils a tool’s value, motivates users to learn, and guides with a clear intent.

To translate the outcome of each tool visually, a designer must first understand it, then bring it to life with illustrations and animations—all while keeping in mind that the simplest function of each tool is what gives tooltips their visual focus. Mood boards and quick sketches help me to ideate designs and sharing progress (and getting feedback) with the Illustrator product team, and other subject matter experts, early and often helps me fine-tune my approach. I also try to put myself into new users’ shoes to achieve the most useful demo without losing sight of the goal of keeping them inventive and playful.

During this process, explorative sketching helps to distill tools to one key function so I can start to uncover the best metaphor. As an example, the first design version of the Knife tool was a squiggly line of jelly on top of a cracker, but the Instructional Design team thought it might read as an open path, and the Knife tool only works on closed paths. Further feedback and ideas from other subject matter experts resulted in a pivot toward a slice of cheese instead of jelly.

On the left is a stylized digital illustration of a cracker with a squiggly line of jelly on it; alongside it are a cursor and tiny knife. On the right is a GIF of the same cracker, this time with a piece of cheese on it, and the knife is slicing through both the cheese and the cracker.
From left: The original version of the cracker with jelly. The Knife tool slices objects into multiple shapes with closed paths.

In these very short animations we want users to understand the information without feeling fatigued or frustrated and for the tools to not seem overly technical or complicated. When it comes to animation, storyboarding the workflow from start to end in less than 12 frames presents the tool in a clear and digestible way. It’s important at this point to pay attention to details in the UI; small tweaks that may seem inconsequential—like not using the correct cursor for a specific tool or the right color for the bounding box—can break the experience and confuse people.

Tooltips are most important to new users exploring the app for the first time and to users looking for a specific answer to unblock their creative process. Keeping a focus on outcomes is essential. In the end we want any app user to know exactly how to use them in their own projects because a single tool, used well, can unlock huge potential in creative work.

Take inspiration from the everyday

A designer’s job is to dig into a web of ideas to find a single concept that explains not just how a tool works, in as few steps and as little time as possible... and to make it eye-catching and relatable. For example, the Shaper tool transforms two loose drawing gestures into vector shapes and a perfectly shaped ice cream cone. The key is keeping things familiar. Once I understand what a tool does and what it needs to convey, I anchor my ideas in the real world by looking at and thinking about those things that are closest: communities, people, objects, and foods.

On the left is a GIF of two palm trees (one yellow and one blue), The yellow tree is stationary, but the blue tree is moved by a cursor to create its shadow. On the right is a GIF of a cursor drawing an upside-down triangle and two stacked circles; the combination transforms into an ice cream cone.
From left: The Shear tool skews objects in any direction. The Shaper tool creates shapes automatically from freehand drawings, and merges or removes overlapping areas.

I was born and raised in Romania, moved to France to study, then to the Czech Republic for work, and finally ended up in Atlanta, Georgia. Traveling the world and experiencing different cultures has informed my visual vocabulary and much of what I express through my work. Every day, elementary objects bring familiarity to unfamiliar territory for people adopting new skills and inject some humor and delight: a slice of pizza that morphs into a delicious melting moment for the Warp tool; carving Swiss cheese on a cracker when hovering over the Knife tool; or a heart shape and the word “love” written in several languages (including my native Romanian) for the Area Type tool.

On the left is a GIF of a slice of pizza. A cursor clicks and drags on the tip of it so it appears to be melting. On the right is a GIF of a blue heart outline being filled with word "love" in multiple languages.
From left: The Warp tool molds and reshapes objects by enabling freeform adjustments to paths. The Area Type tool makes it easy to add text to objects.

In my latest set of Illustrator rich tooltips, I drew from these experiences, and rooted some of the ideas in my childhood memories: In Romania covrigi (pretzels) are a popular snack food. They also seemed like the perfect use case to show how to use the Blob Brush. With this tool, a childhood doodle can become the perfect filled shape of a pretzel.

On the left are two photographic still lifes of pretzels artfully arranged with tableware on a tabletop. On the right is a GIF of a paintbrush drawing the shape of a pretzel.
While working as a food photographer in 2011 I took these pretzel photos. They were the perfect visual reference for the Blob Brush, which draws filled shapes that merge with others of the same color.

Similarly, I used a 1960s Henryk Lis armchair, that my grandparents had in their home, for the Free Transform tool animation. It was one of the most produced and popular armchairs of the Communist period, so the image had stuck with me. I took an inventive and playful approach to illustrate this iconic design and coupled it with this popular tool to show how an armchair can become a lounge chair with a single click-and-drag (transforming or distorting objects comes in handy when an illustration needs to be adjusted).

On the left is a photograph of a mid-century modern chair as the focal point in a sitting room alongside a sideboard (to its right), a small round table (to its left) and a curtained window (behind it). On the right is a GIF of a stylized digital illustration of that same chair inside a bounding box and a cursor is dragging it to a lounging position.
Adobe Stock photography (by Photographee.eu) of an armchair like the one in my grandparents’ home became a perfect reference image for the Free Transform tool, which rotates, scales, shears, and distorts objects.

We all have fixed ideas about what a tool can do, but we can challenge and simplify those ideas through exploration. Look holistically at your experiences, at memories, at the things you’ve seen recently, and the things you love, because they can all influence the visual metaphors you design (like the love of cooking expressed in the culinary thread of my onboarding experiences). Consciously curating that input will expand your horizon, help you overcome creative blocks, and inspire you to create work that you love. And remember: Sometimes inspiration comes easy and sometimes it needs to be unlocked. For those times when it requires some urging, turn to mood boards, quick sketches, and the advice of the subject matter experts you work alongside.

Make it personal: Use what you know

My background is in photography, where I celebrated the beautiful and the mundane moments of life through grand compositions: I would carefully consider props, colors, styling, light, and angles to capture fleeting moments. This exploration of image-making is translated in my design work.

Two highly-stylized and beautifully colorful photographic still lifes. On the left agains a pink and kelly green background are butterflies and circular colored shapes of glass. On the right is a red rose underneath a glass dome. It's surrounded by greenery and butterflies and alongside it are a camera (left) and a perfume bottle (right).
The imaginative and colorful worlds I created in my still-life photography aren’t difficult to recognize in the tooltips I’ve designed for Illustrator.

When I joined the Learn Content Design team, Illustrator was several releases in to using rich tooltips. Jumping in to work on the next set, the established visual system helped me focus my explorations. In contrast to my visually complex photographs, these rich tooltips required an economical approach to visual storytelling, like focusing on the uncomplicated shape of an open envelope to show how to remove an anchor point so it could be sealed.

A GIF of a stylized digital illustration of a red envelope with a light pink flap against a bubblegum pink background, A pen tool cursor taps the tip of the flap and the flap seals.
Using the Pen tool to delete an anchor point.

Follow a design process

Lived experiences, everyday objects, and a “less is more” approach that doesn’t try too hard were the creative inspiration behind this work. But it was working together with people with unique skills and responsibilities that helped me create truly delightful tooltips that unlock Illustrator’s value and motivate users to learn to use it.

A digital illustration of nine palm trees with shadows, Each pair is in its own box (three across and three down) and has a different combination of colors.
Color explorations for the Shear tool, which skews objects in any direction (shown here creating a shadow).

Design processes are unique and personal for every designer, but these simple tips help me daily to design with intent and play and to use instantly recognizable objects to surprise, delight, and make our users’ journeys more productive:

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link
/jobs