2

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!

Example images

0

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:

enter image description here

  1. Changing the hue being replaced with:

enter image description here

  1. 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:

enter image description here

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

enter image description here

  1. 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:

enter image description here


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:

enter image description here

hope that helps.

  • Thank you for replying. That actually is how I have the colors made, using the recolor in Affinity Photo with each layer masked off into its respective piece. I think I missed the mark on what the issue was in which case, i apologize since you put all the work into helping me. - On the website, these images have to be layered atop one another because the base image always needs to be there. So when somebody selects a color for the body piece you changed, it would overlay a transparent picture of the selection you changed atop the base image. That's why the images are stacked. – Braeden Loepke Aug 12 at 18:45
  • Gotcha - then I think it's worth mentioning that I saw pixel mis-match between your base and coloured states - the support frame under the chaise-longue jumped by quite a few pixels when the seat and back were correctly aligned - I think that this is why you have the lines - there's actual misalignment of pixels between each final exported image, which when they're stacked and using transparency on the page, you see this edge condition. Check actual pixel alignment (exclusion blend mode is the easiest way) very carefully - this should sort you I think! – GerardFalla Aug 12 at 19:01
  • @BraedenLoepke, you said in the question it had to be done this specific way due to how the system is built on the website, but if there's any chance to do it differently, your best bet is to cut-out the color and add/change the color behind the image using CSS, as suggested here: graphicdesign.stackexchange.com/questions/120948/… — The approach is different, but the answers overlap. I would remove the color with a layer mask. — I have a small jsfiddle example there too. – Joonas Aug 13 at 8:33
  • 1. @Joonas - Sadly I can't change the system up due to not being a developer. We also have textures that need to be applied as well, therefore I can't use just colors. This seems like it would work perfectly otherwise! - 2. GerardFalla I've been going through the image and realigning the picture together. Could it be the way I cut the image would leave these lines? If so, do you know what the best practice for following the edges of an object when cutting out is? – Braeden Loepke Aug 13 at 13:20
  • @BraedenLoepke - you're missing a crucial element of my answer - 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 the same - that way I don't have to worry about cutting the image at all... do you see the thrust of this method now? It's both non-destructive and easily iterated - and that's the main point - easy iteration. – GerardFalla Aug 13 at 15:12
0

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:

enter image description here

2 Active Body Layers:

enter image description here

Body without 2nd Mask

enter image description here

Body with 2nd mask

enter image description here

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

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.