Blend It Good – Understanding The Blend Effect

Designing with Wix | February 24th 2010

One of the most mysterious effects in the Wix website builder editor is Blend. Try uploading any sort of item to the editor – image, shape or whatever, apply the Blend effect and poof! All kinds of strange stuff happen. Try doing the exact same thing with a different item, and the results are completely different. So what’s going on here? What is this effect good for?

Good question! Blend is actually an extremely useful tool and a steady companion for any web designer out there. It is also a very romantic tool, since it presupposes the existence of two elements. In Blend’s case, it really always takes two to tango. What Blend does is take these two elements and connect them together, creating different kinds of correspondence between them. These different modes of Blend appear in the drop down menu that automatically pops up when you choose the Blend effect in the Wix editor.

Wix Editor: The Blend Effect Drop-Down Menu

For Blend to work properly, the two elements must be layered one on top of the other. Then the Blend effect is added to the top layer, combining the two layers according to the Blend mode. For instance, “Multiply” mode makes the lower layer darker, based on the darkness of the upper layer. “Hard Light” mode lightens or darkens the base image depending on the brightness of the blend color. That’s why the result with Blend is never the same. It depends on the natural state of the two layers.

Here are a few examples showing what can be done with Blend on the Wix editor:

Wix Editor: Invert Blend Effect - Logo on Background

In this one, a simple House logo was added to a site that has the background titled “Paint” (first page in the backgrounds gallery). Using the “Invert” Blend mode, you can see how the logo fused into the background and assumed the inverted colors to that of the background.

The Wix Editor: Screen Blend Effect - Title on Image

In this example, we first chose the rising arrow image from the Wix images gallery. Then a title was added, changing the default text and slightly rotating it to create the same angle as the arrow. Then, after placing the title on the arrow image, we added the “Screen” Blend mode. Since half of the title was placed on the text and the other half is on the darker background of the image, the Blend effect reacted differently in both parts and created two different colors for the text.

The Wix Editor: Lighten Blend Effect - Image on Image
And here we have two images on top of one another. The bottom layer is a lovely Icelandic landscape, the upper one is a puzzle image from the Wix gallery. With the help of the “Lighten” Blend mode, the originally black puzzle pieces became see-through and the darker background became lighter, in accordance with the image in the bottom layer. We changed the default frame of the puzzle image to the “Blackline” frame, which also became see-through because of the Blend effect. Sweet, right?

This is only the tip of the iceberg. Blend is a never-ending source for modifications and renovations. Blend is especially helpful when working with background textures like wood, metal, brick wall, etc. Some Blend modes don’t react to black and white, so if you’re using these colors and don’t see any difference, try playing with the toning.

Take the time to experiment with this awesome effect and you will gain access to a powerful web design tool.



Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>