: 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

@Rambettina927

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!



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.



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.



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.

Vote Up Vote Down

@Sent7350415

I'm assuming the UI popup is gray near the border, and the background picture can have areas of various grays including black and white.

The problem is that the contrast between the UI popup and the background varies unpredictably, and can be zero.
Even the whole border of the popup could be adjacent to background of the same gray level, like when the picture shows a gray sky in that area.

Inverted line does not solve it

One way to separate the areas of popup and background would be adding a line of the inverse color of the adjacent background.
But that can fail near 50% gray, when background and inverse are the same or similar.

I propose to use two separating lines, one black, and one white.
Experiment which one should be on the outside. That may be different on the sides, creating a "3D efect".

Example problem

This image shows the problem case, where the UI popup exterior is light gray on a background that is similar to light gray:
The popup is hard to see because there is not much contrast between it and the background image - that's the problem we want to solve:



Source of background image: Preview image of Wikimedia Commons: Selçuk Turkey 2015.

(Note that a large part of what separates the background and the popup is the direction of edges: the popup has only x and y edges, the photographic background has aproximately none.)

Double edge

In the image below, I only added a black and white border, 4px wide.

On top and to the left, two white pixels are at the outside, two black at the inside of the frame. The colors are exchanged on the right and bottom edge.

With this, there will always be contrast at the border of the poup.
Because we put it there.

Separate by 3D border

The arrangement of the white and black lines is choosen to match the expectations of our visual system for an embossed edge with light from top left. It results in a typical "3D appearence", which is useful here, because it supports the separation:



Handles low and high contrast

The separation works good for light gray UI and background colors, but see below for a test with darker background colors giving more contrast - there is not much difference, it works just the same:

Vote Up Vote Down