How to save such pictures from Photoshop for layout?

Question

Layout

Hello. I came across a hitherto unknown feature of Photoshop. On the picture - a fragment of the layout: The

background of the boards is an ordinary picture. On top of this background are four icons, with each icon consisting of two layers. For example:

This is what these layers look like when exported individually. That is - a completely different color than on the layout. They appear to be semi-transparent on the mock-up, and the background also shows through, resulting in a jagged edge effect and final color. Probably:)
This is the first time I've encountered something like this. Interested in how to save these pictures? More precisely, in the end - how to transfer all this matter in the layout so that it matches the layout? Or maybe there is no need to bother with these little things, but just save it all in one file - both the background and the icons? how right?

Answer 1

There probably blending modes are involved.
Most likely Multiply, but there may be others, such as Overlay, Color Burn and others.
Or maybe some other effects are applied, such as Pattern Overlay.
How to export? Separately, no way. Well, that is, in browsers, support for blending modes formally exists, but cross-browser compatibility is unimportant, and it’s just gemorno to support this sandwich, there’s simply no point.
It is necessary to export the finished result as a simple single-layer image.