[Free Widget] Duotone Image
We have just finished a website that makes extensive use of duotone images. In order to make our job easier, we created a Duotone Image custom widget, which we'd like to offer to the amazing Duda Community.
Choose an image
After dropping the widget onto your page, you'll be shown the Content Editor, where you can pick an image. Dramatic, high-contrast images, close-ups, macros and artistic shots tend to be the most impactful. You'll also be able to fine-tune the image alignment within the widget box, in case your subject is not smack in the center of the image.
Pick your colours
In the Design Editor you'll be able to select the 2 colours that make up the duotone. One colour is used for the 'highlights' of the image, and the other for the 'shadows'.
You can play with the image's brightness and contrast right here, too, so you can get more or less detail to show. And if you want the image to blend with your background, you can always reduce its opacity and make it semi-transparent for a 'watermark' effect.
Pick the right blend method
There are 2 distinctive techniques for automatically creating duotones. Each uses different CSS blend modes in order to 'extract' the highlights and shadows of the image, and replace them with your chosen colours. Depending on the image, and your choice of colours, one method will work better than the other. In some cases, the 'wrong' method will introduce unwanted colouring (i.e., a third colour), or do away with needed detail, so try both and pick the method that works best in your specific case.
Both images here use the same colours. The image on the left uses the 'darken/lighten' mode, while the image on the right uses 'multiply/screen'.
How to get it
If you're interested in trying out the Duotone Image widget, just send me a message, and I'll send you the share link — it's totally free.
Please let us know here if you use it in any live projects, as we want to see it 'in the wild'! If you come across any bugs, or have any suggestions or feature requests, feel free to send me a message, so we can get onto it.
Enjoy! 😊
