Make Grey elements pop over-top of greyscale photo

I have a complicated task. Client would like this grey UI to pop, and problem is, they want greyscale photographs in the background. The photographs are on a fade-carousel and they each have different levels of contrast in the area where client wants the UI to sit.

Is there a good way to make grey pop over top of grey?
Drop shadow only seems to do so much, it still gets lost on the background photo.

My pleas for a white-card beneath the UI are not fully welcome, so I really need to find a way to get grey to appear on top of grey.


Instead of creating a contrast by playing with the dark tones of your pictures, you could do the opposite and “illuminate” some parts.

1) You could use 2 different gray; one made of black for what’s on top of your UI and the background could be a monotone of a different gray. This way, the “gray” on top of your design will loo like a darker gray, and the images below will still be gray but their density at 100% will be like a “rich gray.” You can do this by using the “duotone” mode in Photoshop and using a gray color instead of black.

Why it’s better than using grayscale is because with grayscale, there’s a limit to the shade you can add on your picture background; if you go too low, you will lose a lot of details to get to a gray. With a monotone, you can still keep all the details that you would normally see in black, but they’ll be gray!

grayscale contrast with gray and black

2) Combined with the method above, you can add a transparent white box below your graphics. I see you mentioned you don’t want to use a white box but if you add transparency to it, it might look very soft as effect and can integrate the foreground graphics smoothly with the background images.

grayscale contrast with gray with a white transparent box

3) Again combined with #1, you can also use the drop shadow with a white color instead of using black to illuminate the borders. You could also use the outer glow effect.

grayscale contrast with gray and a white drop shadow or outer glow

PS: These are solutions that can be used easily in software like Photoshop but you can still use some of them with CSS or publishing software. The principle remains the same and you might need to re-adjust the background pictures, if that’s an option for you.

Source : Link , Question Author : Regan Music , Answer Author : go-junta

Leave a Comment