Advertisement


Convert foreground motif to degrees of transparency?


Question

I have a 24-bit PNG where the motif is a subtle pattern. The pattern itself is in light greys, i.e. the background color of the PNG is #eee and the pattern is in a range of slightly darker greys.

I would like to convert the foreground motif to a range of transparency levels. In other words, my plan is to have a web page with solid colors defined via CSS, and lay the image over these colors, to provide a repeating pattern for several colors using just one image.

I can find plenty of tutorials on just making the background transparent, but how do i convert the foreground motif to degrees of transparency?

I'm a complete newbie to graphics design software. Adobe Photoshop 5 is available, and I could also install freeware software for Windows (like Windows Gimp).

(I have google this, and there are several related questions on this site -- fx "Add transparency to an existing PNG". So far, what I have found generally addresses changing one solid background color to transparent, which isn't what I'm looking for.)

Update: Here is the original PNG which I'm trying to convert:

The pattern

(NB: This image is licensed, use of or redistribution by others is not permitted):

2017/04/13
1
4
4/13/2017 12:46:00 PM

Accepted Answer

You can try Colour to alpha from Colours menu in GIMP and then select the darkest colour in this image to set it to alpha. Here is the result I've got(image is barely visible here, right click to view image or download):

Transparent image

And using it as a background for a HTML page with background colour set to #aa00cc I've got this result:

Background

2012/07/24
3
7/24/2012 9:52:00 AM

First thing you'll have to keep in mind is that your pattern color, however subtle, should be kept neutral (preferably shades of gray), to make sure it'll match as many “background” colors as possible.

Putting that aside, there's a plethora of ways to achieve what you want to do. In this case, I think, the simplest method (and best at the same time) would be to:

  1. Copy your image to a new layer (it won't work if it'll remain a “Background” layer, since “Background” in Ps is always completely opaque). This can be done with e.g. Ctrl+J (Cmd+J if that's your boat ;))
  2. Double-click the layer to get to “Layer Style” window. By default you should land at “Blending Options” section. There, at the bottom, you should see two sliders, by default filled with black to white gradient. Upper should be marked as “This layer”. If you want to make white parts of your image transparent, move the right slider. You should see “checkerboard” showing up in the brightest places of your pattern. It's all fully transparent or opaque right now, but you can add “intermediate” transparency stages by Alt clicking at the slider. It'll then split in two, making colors between the slider parts “semi-transparent”. You can read more at this tutorial.
  3. That's pretty much it! If you want to see how your new transparent pattern will look with different background colors, add a colored layer underneath your pattern (I recommend “Solid Color” adjustment layer, since it will make changing fill color a breeze).
  4. Make sure you have only you transparent pattern visible and export it to transparent PNG. You can do it in number of ways, but my advice is to use “Save for Web” functionality, since you'll be able to see how your PNG will look like depending on given parameters before it'll be exported.
2012/07/24