Texture overlay

Question

Lets say I have this pumpkin here.

I want to draw on the Pumpkin with solid colors, but still see the texture of it. This automatically means that I must create some overlay, which will bring the texture over the colors. No matter how I do this, the overlay is either not "transparent" enough and makes the solid colors greyed out (or generally just changes them too much) or I loose the texture (it works good with dark blue/black, but when using vibrant colors like basic pink or yellow, you just can't see the texture on them.

How can I do an overlay layer that brings the texture on the new colors I draw?

Imagine If I use it for web and I can't use the blending modes - I just need a PNG for that overlay.

Answer 1

Imagine If I use it for web and I can't use the blending modes

Now why would you go and say something silly like that? There's a few options you can choose from. A live example can be found here.

1. CSS background color + PNG

The easiest way is to just give the div a background color, combined with a semi-transparent PNG. Something like background: red url(semi-transparent.png);

2. CSS background stacking

Since you can add more than one background, separated by commas, you can easily blend semi-transparent PNGs. For example: background: url(image1.png), url(image2.png);

3. CSS pseudo-element trickery

If for some reason you don't want to stack backgrounds, for example because you want control of the positioning of each PNG, you can use the :before and :after pseudo-elements to stack semi-transparent PNGs.

4. CSS background-blend-mode

Works like this:

background-image: url(image.jpg);
background-color:red;
background-blend-mode: multiply;

Multiply is a nice and useful one, but there is also: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which will reset it.

5. CSS mix-blend-mode

Just position different elements on top of each other and use mix-blend-mode: multiply;for example. Takes the same arguments as background-blend-mode as far as I can tell.

6. Canvas blend modes

Like so:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';

7. SVG

You can specify a filter in the <defs> like this:

<filter id="f1" x="0" y="0" width="1" height="1">
  <feImage xlink:href="#p1" result="p1"/>
  <feImage xlink:href="#p2" result="p2"/>
  <feBlend mode="multiply" in="p1" in2="p2" />
</filter>

Number 5 (mix-blend-mode) should also work on SVG, so it's possible to use classes on the svg elements and set the blend mode with CSS.

8. CSS filters

With a bit of creativity, filters such as hue-rotate and brightness can be combined to achieve a coloured effect on an element.

---

I freely admit that some of these are more exotic and are not yet fully supported in all browsers. That shouldn't stop you from using them, as long as you ensure graceful degradation.

Further reading can be found here:

• CSS Tricks Basics of Blending
• MDN on background-blend-mode
• MDN on mix-blend-mode

Answer 2

Ok. I do not quite understand the "No Blending mode" limitation.

Let me explore two aproaches. This is all made in CorelDraw, but the idea applyes to any program.

A. Mask properly. In this 3D object, a realistic masking is important.

B. Make a new layer using this mask and desaturate it.

C. Play with the levels to contrast it more.

D. Now apply a color. You can play with the curves or add a transparent object in top of this. As this background is now more contrasted you still have shadows and highlights.

This is what I have inside one of the Clip objects:

But using blending modes you have a happier color. That is what blending modes do.

And this is a simple manipulation using curves on one channel on the grayscaled section.

Frequency separation

The second option is to use frequency separation, where you play with the color in the low pass layer. https://www.google.com/search?q=frequency+separation+photoshop

The high pass will retain the texture.

---

And this is just to play arround with the picture.

Answer 3

I'm not sure what your project specs are but I'm sure you can't export a "blending mode" on your PNG. Since that's out of the question, all you have left are "hacks" to simulate what you want.

The obvious easy answer is to just do the text overlay with adequate blending options in Photoshop and then save the png. But if you need the text to be a separate file from the pumpkin then here's how I would try to approach it.

Import your pumpkin image, create a new layer and make the blending mode difference so you can achieve those bright colors but keep the texture.

Now create a layer mask for the pumpkin so that only the parts that the text covers are visible.

Now export your PNG and give it to your web developer ( I presume since you talked about it being for web).

I went ahead and did a simple html page and placed both images (pumpkin background) and text, then I placed the text on top of the pumpkin with CSS rules and the effect is alright.

The bad side (or the con) of this way to achieve your goal is that overlay texture must be placed in the same exact position on the pumpkin as you had it on your Photoshop project so that the textures can line up and look proper.

Hope this helps a bit.