Introducing new ways to blend images in papaya.io

A flexible design workflow requires a new approach to image editing. Traditional image editing tools view photo editing as a linear process, when in reality we all know that inspiration strikes after having spent significant time editing your image. The last thing any designer wants to face at that point is a flat-file.

papaya.io is a fresh take on image editing that aims to remove the need for destructive edits, by providing a node-based image editor, right in your web browser.

Today, papaya.io gets two new image blending features into its non-destructive, node-based workflow.

Alpha masking

Alpha masking enables you to create a cutout of your image. In this post, we cut out a circle, but any image including brush strokes, an external image, text, or even emoji can be used as an alpha mask.

To see how the new alpha masking works, let’s import an image.

Now let’s draw a circle using the brush tool on a new bitmap node, and set its blend mode to alpha mask.

This is what alpha masking does. The foreground node decides which parts of the background to let through.

Now let’s try something a bit more difficult. Let’s try adding a yellow background.

You might expect a linear workflow to add a background to your image, i.e. to introduce a new node containing the yellow image at the bottom of the node chain. As you can see, this doesn’t give the result we wanted. This happens because of papaya.io’s node-based workflow: the yellow background gets drawn first, followed by the arch, that gets drawn completely on top of the first yellow node. This combined result is alpha masked, giving us the same final image as before.

So then how can you add a background to your image?

The mixer node

With today’s feature update, we have wanted to add to papaya.io’s versatile image editing experience. This is why we’re adding the mixer node to the editor.

The mixer connects two inputs to a single output. This allows you to combine two node chains into one image. The left input is the background, and the right one is the foreground.

The mixer node offers the same 21 blend modes as papaya.io’s existing nodes, the bitmap node and the text node.

The mixer node is a major upgrade to papaya.io’s blending tools. With it in hand, let’s look at solving our earlier problem.

We create the new mixer node, with its blend mode set to normal. We connect the yellow node to its background (i.e. left) slot, and the alpha masked two nodes to its foreground (i.e. right) slot, and now we get the image that we wanted!

In summary

Until the introduction of the mixer node, a node’s blending mode affected all of the nodes below it. The mixer node allows you to blend your nodes in any order and grouping, adding a lot of flexibility to papaya.io’s blending. Together with the new alpha mask blending mode, papaya.io becomes a more powerful image editor. The added features feed into our philosophy of non-destructive image editing, which is a major improvement upon the mask layers that exist in other image editors.

Try it out for yourself! You can get some fun results by connecting the same node to both slots of the mixer node, and playing around with different blend modes.

This feature update also contains smaller improvements to papaya.io. This year, we are focused on adding more nodes and more editing tools to our image editor. If you are missing your favorite feature from papaya.io, let us know on Twitter. We are looking forward to hearing from you!