4

I stumbled upon a background image with transparency I have never seen before (image below).

  • When placed as a background-image on web, it mantains the set background-color and only adds some "noise" to it.
  • When you place a one-color 8-bit png picture with transparency over it, the foreground picture is perfectly visible - only a little "noise" added.
  • It is also very small (<300 kB) compared to a duplicate PNG images I tried to create from scratch (>1.5 MB)

How can you achieve something like that?

I've tried (Photoshop):

  • using a plastre wall texture image and save it as a 30% visible layer -> picture in the foreground is perfectly visible, but it won't maintain the background color set by css.
  • using a plastre wall brush + grey color and paint transparent background with 50% brush transparency -> background color from css is maintained, but the picture in foreground is not visible for some colors.

enter image description here

Improve this question
5
  • 1
    Welcome to the site, and thanks for letting us know what you've tried! Commented Apr 8, 2014 at 13:46
  • I think you solved it already in your second "things I have tried." There is no way to pick a color which is visible on all colors. You could try a secondary pattern which is different enough that you never have a case where they are both too close to the background color. Commented Apr 8, 2014 at 14:48
  • I'm still having troubles understanding what exactly you are trying to do and what was wrong with your attempts. Commented Apr 9, 2014 at 6:20
  • I would like to learn how to create backgrounds like this, so I'm trying to reproduce the steps needed to create a background like this. The result should be almost the same picture with similar texture, but different "seed". @horatio: Yes, the second solution is close. But I don't have a proper brush (any ideas?) and I still can't meet the third condition - file size: even after PNG optimizer it is > 1MB. When I use indexed colors to reduce the size, the picture becomes consistent of only: [specific_color, 100% transparency]. Commented Apr 9, 2014 at 12:08
  • I think your sample is probably png-8, but with either 2-colors, 1 being the matte; or 1 solid color field with the pattern as an alpha channel. I don't think Photoshop supports png-8 with alpha (at least, not "save" or "save for web"). For ideas regarding textures, cover a piece of glass with black ink and then dab a garbage bag on it, place this on some clean white paper. Photograph it and then convert to 1 bit bitmap. Alternatively, google images of plaster or ink and even "brush sets" of the same. The reason you can't tell it is pixel art is the lack of color contrast. Commented Apr 9, 2014 at 14:25

1 Answer 1

Reset to default
2

Your experiments are along the correct lines, but there are a couple of steps missing.

  • Take your texture file into Photoshop and desaturate (Ctl-Shift-U) so you won't create color changes when you place it over a background color

enter image description here

  • Add a curves adjustment layer and flatten the curve so that your brightest points are at around mid-way and the black point is raised. Here are the settings I used:

enter image description here

  • Add a Posterize adjustment layer with no more than 7 or 8 levels. This is what gives you the reduction in file size on export to PNG. More levels, bigger PNG.

enter image description here

  • Now reduce the opacity to something like 40-50% and Save for Web as PNG-24 (PNG-8 won't work, because it doesn't give the fine alpha control).

My test image was 1920x1440, and the resulting PNG is 287k. Here is what it looks like laid over a background:

enter image description here

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.