Textured Overlays


Is it possible to create an textured translucent PNG? I'm attempting to separate the texture from the color - allowing me to define the color, ultimately, via my CSS.

11/18/2011 7:17:00 AM

Accepted Answer

Yes, it is possible.

What you might want to do in photoshop ( or other programs ):

  • Make a new layer where you fill a color or possible color. ( This is so you know what it looks like with color under it. )
  • Make a new layer on top of that where you make the transparent texture. ( I filled this layer with random grey color that i filled with noise and reduced the opacity to 14% )
  • Hide all extra layers to get empty background for the texture ( Most likely Background layer and possibly extra color layer. )
  • Once that is done Save for web as a png.

Limiting factor here is Blend modes which you can't really use extensively in this case, opacity and extra coloring can make up for that though.

Here's an example of it http://jsfiddle.net/y7SLu/

The texture image:

enter image description here

11/18/2011 8:04:00 AM