Fluffmark development journal: making image annotation a joy

Where the idea came from

Fluffmark has a funny origin. I meant to build a shared annotation component for all my image apps. As I worked on it, I became unexpectedly passionate about the product itself. I fell in love with using it to post pictures with words, and found myself wanting to express more.

What the app does

Let me get straight to the features.

1. First, it is an image annotation app that handles still images, GIFs, and Live Photos. It exports the same kind of format that you imported. Annotations on GIFs and Live Photos are added as an overlay, preserving the underlying animation.

2. The annotation tools include:

   1. Adding text

   2. Drawing lines, with configurable arrowheads at either end

   3. Freehand drawing

   4. Blur

   5. Pixelation

   6. Rectangles

   7. Circles

   8. Inserting images

   9. Cropping or extending the canvas

   10. Rounded corners

I will focus on the features into which I put the most thought.

Adding text

My friends Xiaoyun and Xiaoyu often posted pictures with words written directly onto them in WeChat Moments. That made me wonder: how nice would it be to just write the words, without adjusting the style and position? So I built automatic text layout, with a few useful details:

1. Avoid the subject automatically. Find a place for the text that does not interfere with what the picture is about.

2. Match colors automatically. Use key colors from the image to suggest several text palettes. Usually, the default already looks good.

   

Beyond the ordinary text controls, I added several more unusual features:

1. Wrap around the subject. Arrange words along the outline of the main subject, usually a person, to create a wrapping effect.

   

2. Text Brush. Think of it as manual subject wrapping, with more freedom to draw words into unexpected shapes.

   

3. Adaptive two-tone text. Each character switches to black or white according to the image underneath it, creating stronger contrast.

   

4. WeChat chat bubbles. This recent addition recreates the familiar, eye-catching look of a WeChat conversation. Choose avatar images for yourself and the other person the first time, then reuse them next time.

   

Freehand drawing

1. Calligraphy brush strokes. I brought an earlier calligraphy-brush demo into this project. Fluffmark can produce very realistic ink strokes; even a simple hand-drawn circle looks much more expressive than an ordinary digital brush mark.

   

2. Play back the strokes. When editing a Live Photo, enable stroke playback. In the exported Live Photo, your drawing appears in motion, as though you were writing it again.

   

Images

When inserting an image, you can extract its subject too. That opens up all kinds of playful collage possibilities.

Other details

I have spent a long time polishing this app and use it every day. Some of the interaction details include:

1. The interface hides while you use tools on the image, so you can see the whole picture.

2. Drawing and zooming the image do not interfere with each other.

3. The toolbar has gone through many revisions to make a small space work well.

4. The app is available on iOS, iPadOS, and macOS. On the Mac, I made platform-specific improvements such as dragging in images, using Finder-based open and save dialogs, and supporting keyboard shortcuts.

Price

This is also what I describe as my first entirely free product, with only optional financial support. If you enjoy it, you can contribute RMB 18 once or RMB 18 per year to help me make better, affordable products. Choosing not to contribute does not affect any functionality. I jokingly call it the start of my internet begging.

As with my other apps, there is not much hand-holding. Try the tools and explore. Undo and redo are well developed, so you do not need to worry about losing your work while experimenting. I hope you enjoy using it and feel more inspired to express yourself.