Get rid of thin line appearing behind lighter objects when layered on each other

Question

I've got an issue with a single line appearing behind one of my layers when stacked. Our website uses multiple images stacked upon one another as a way to change colors of the various pieces. Due to how the website's color-changing system is built, I need to have a "base" image with other "attribute" images stacked on top. In the example, I provided you can see that on the layered images, there is a dark line from the "base" image showing up behind the new layer. This shows up in many different colors such as red and white, red and yellow, pretty much any colors that are vastly different. Is there a solution to this? I'm currently using Photoshop CC 19 and Affinity Photo so a fix in either would be fine. I also included shots of these images on a website as they will be uploaded to one after they are complete.

Thanks!

Answer 1

Looks like your pixel selection for your overlay layer was feathered or in some other way you've slight dithering or transparency feathering occurring - this dark ghosted line at the edges is a result of that methodology.

If it were me, I'd be using a recolour adjustment layer for your hue shifts, with masks on that layer to control which chaise-longue strips are colour-shifted, versus pixel-painting new data above - this will both give you a better general result (shadows and highlights will remain correct) and make avoiding that dark line easier.

That said, your base would be better to be white or very light - this will both make colour shifting easier, and will mean that if you do miss a pixel or two in the overlay layer, it'll be really hard to see that against the white background.

Nonetheless, here's a quick run through with your low-res screenshot to explain:

1. The basic layer setup:

2. Changing the hue being replaced with:

3. The mask (started at pixel-selection of your altered image, spent perhaps two minutes after that quickly painting the rest of the mask) used to control the area affected by the adjustment layer:

4. end result viewed at correct pixel res given low-res input:

5. Oh, and with the requisite white you'd shown - just to demonstrate how the desaturation & lightness controls allow a huge range of achievable final tones:

---

In answer to comments:

Note: I'm using a recolour adjustment layer with a mask to control its area of effect, and a single base image.

When that result is then exported, and a new adjustment layer with different colours is exported, there is no pixel level movement or difference, as the underlying image is exactly the same - that way I don't have to worry about cutting the image at all... that is the thrust of this method; it's both non-destructive and easily iterated - and that's the main point - easy iteration.

Like so - observe that there is only one pixel layer - the rest is all adjustment layers and their relevant masks - not also each mask can be different - here they're the same for simple expedience:

hope that helps.

Answer 2

It's been a bit since I posted but I wanted to say I figured it out. I used a combination of the masking method @GerardFalla provided and a bit of odd masking behind the second layer outlining certain areas of the image with a white to help get rid of the thin lines. While it wasn't the cleanest solution and by far not the most optimal, I need these layers to be separate so that they can stack atop one another on a website and with this method, it works due to the background already being white! Thanks again, everyone.

1 Active Body Layer:

2 Active Body Layers:

Body without 2nd Mask

Body with 2nd mask

This is my first time providing a full answer so I hope I did it right!