1

I'm using Photoshop CC 2015.

For webshop needs I have to create svg file from the below image. The plan is that the color of the object from the image can be fully changed without loos of object relief. The object is the blanket which has the tiny hairs that should be visible regardless of color change. The color of the blanket on the image should be as close as possible to a RGB color that user has entered.

So, I was thinking of making two layers. Bottom layer fully colored by user choice. And the top layer white, i.e. 40% transparent. But, done so, the problem is that the color of the blanket is not as the entered color, as the top layer changes the full image color. So, that doesn't work for me.

Is there any tool in PS that could change the blanket color by entering only RGB color, but that the image remains realistic? Any other ideas how to achieve this?

As I said, it's important that I can change the color programmatically via SVG.

enter image description here

Edit 1:

Thanks to @Scott solution I have achieved what I wanted. But, the problem with exporting to SVG occurred.

As stated in @Scott solution, I made two layers: Bottom "Layer 0" (100% fill, normal bend mode) layer and top "Color Fill 1" (100% fill, Hue bend mode) layer shown on the next image...

enter image description here

When the export to SVG is done, this is what opens in browser

enter image description here

Edit 2:

I made the next example to show the problem.

enter image description here

This is the SVG export window

enter image description here

  • Is it important that the color can be changed programmatically or that the picture format is svg? Because it doesn't need to be an svg for you to change the color programmatically. – Joonas May 9 '18 at 5:36
  • Agree with @Joonas - We are venturing into SO territory, but if you are running PHP for example you may have access to ImageMagick or the GD Lib, which both have options to address this. – mayersdesign May 9 '18 at 8:24
3

This seems to work....

  • Lighting layer (raster) of the pillow in greyscale with its blend mode set to Multiply
  • A solid color fill layer
  • Export as SVG and the CSS could be altered to change the color fill layer

enter image description here

 <style>
      .cls-1 {
        fill: #00aeef;
        fill-rule: evenodd;
      }

      .cls-2 {
        mix-blend-mode: multiply;
      }
    </style>

enter image description here

 <style>
      .cls-1 {
        fill: red;
        fill-rule: evenodd;
      }

      .cls-2 {
        mix-blend-mode: multiply;
      }
    </style>

The Multiply mode is important so it only darkens the color adding shadows. Without the proper blend mode, the greyscale layer will alter the overall luminosity of the color fill layer, both light and dark, changing the percieved color.


As @mayersdesign points out in the comment below, the Multiply mode may not be supported widely enough. You can instead reverse the layer stack and use the Hue blending mode on the color fill layer - leaving the raster image set to Normal mode. Hue is slightly more supported.

enter image description here

enter image description here

Color change would still merely require CSS editing:

 <style>
      .cls-1 {
        fill: #06fb00;
        fill-rule: evenodd;
        mix-blend-mode: hue;
      }
    </style>

I did apply a Levels correction to the raster image to lighten it a bit so it results in a more color-accurate image. I merely chose Image > Adjustments > Levels and clicked the Auto button.

enter image description here


I am unable to attached the actual SVG here due to site limitations. Imgur doesn't accept svg and trying to paste the code inline for the svg seems to lock up the site (in Chrome/Mac anyway).

  • 1
    Watch out for support for mix-blend-mode caniuse.com/#search=mix-blend-mode but a cool, and CSS only solution – mayersdesign May 9 '18 at 8:22
  • Excellent point @mayersdesign -- One could extract the white from the raster image leaving only the dark, black, pixels at a lower opacity and possibly forego the multiply mode. – Scott May 9 '18 at 16:13
  • Thanks guys, really appreciate the help, and indeed it was a great help, as the results are great. But, I have some problems with exporting such an image with two layers. I went to File -> Export -> Export As -> Svg, but the preview shows the strange. On the preview, one layer is bigger than the other and it is not the same as when exporting to png for example. The I succeeded with exporting, but I had to merge layers. After merging the layers and exporting like that, class "cls-1" doesn't contain the "fill" property, so I can't change the fill color. What am I doing wrong while exporting? – user6549162 May 9 '18 at 22:44
  • Well you can't merge the layers. Then its 1 object not 2 and there's no fill property for the raster element. The key to this is having a separate SVG object which you can alter the color for. I don't know why you'd have 2 different size layers. – Scott May 9 '18 at 23:59
  • Dear @Scott, please check the post edit. Thanks – user6549162 May 10 '18 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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