Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
1  
Welcome to the site, and thanks for letting us know what you've tried! –  JohnB Apr 8 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. –  horatio Apr 8 at 14:48
    
I'm still having troubles understanding what exactly you are trying to do and what was wrong with your attempts. –  Adam Schuld Apr 9 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]. –  Joudicek Jouda Apr 9 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. –  horatio Apr 9 at 14:25
add comment

1 Answer

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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