1

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. Pumpkin

2
  • You could kind of pull this off with just CSS and using RGBA color.... jsfiddle.net/NotInUse/0Lea6bqq Not ideal, but an easier alternative for web stuff possibly.
    – Scott
    Mar 10, 2017 at 20:31
  • Oh, web is way beyond that, check my answer for some more ways to do this on the web.
    – PieBie
    May 9, 2017 at 22:03

3 Answers 3

3

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:

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.

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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.

enter image description here

0

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.

enter image description here

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

enter image description here

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.

enter image description here

enter image description here

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.

4
  • if you're going through all that trouble might as well just add the texture in photoshop and export the correct image
    – Luciano
    Nov 10, 2016 at 13:30
  • I agree, but this is one way I thought of to do it that adhered to what @alex747 asked for.
    – Chayemor
    Nov 10, 2016 at 19:03
  • what alex747 is asking is a way to have an overlay with the texture so that can be added in the HTML and dynamic drawings can be added under it; your solution requires the drawings to be created before the html.
    – Luciano
    Nov 11, 2016 at 9:00
  • True, I suppose I got too focused on "How can I do an overlay layer that brings the texture on the new colors I draw?"
    – Chayemor
    Nov 11, 2016 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.