Looking to make a banner image for a website and I've tried to recreate these two images using a few different gradient patterns but I can't seem to get close enough to the referenced images. Both are using the same background image but with slightly different overlay and gradient styles. Not concerned about the line work in the images just the overlays and how to achieve this, almost identically if possible.

One of the colors in use as far as I can tell is #0f6f7b

Any help on this would be appreciated. TIA

enter image description here

enter image description here

1 Answer 1


A three layer work.

It seems to have a copied layer of the underlying image, but blurred. It has layer mask that hides partially the blurred version. You can have a simple white to black gradient in the transition zone in the mask. It can well be also manually painted there. Black means full transparency, white means fully opaque.

The other version with darker left end probably has something added to the blurred version before blurring. It can simply be shifted and show something dark from the left, a scene which is cropped out of the non-blurred version.

On top there's the electric circuit like drawing layer. It can be a normal layer where the background is erased. But the drawing can also be in an adjustment layer which makes the blurred layer darker or colorizes it. In that case the drawing is as white on black in the layer mask of the adjustment layer.

An example:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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