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:

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

Answer 1

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):

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

Answer 2

In Photoshop:

1. Image → Mode → Greyscale.

2. Open the channels panel and hold command while clicking the channel's thumbnail. This will make a selection from the channel.

3. Select → Inverse.

4. Open the layers panel and create a new bitmap layer.

5. Press D to reset the foreground and background colours to white and black.

6. Press X to swap foreground and background colours. This will mean black is the foreground colour.

7. Press option delete to fill the selection with black.

8. Turn off the layer for the original image (it should be the bottom layer).

You now have a layer that's all black, with the image data in the alpha channel.

Answer 3

If I understand your question correctly, you need to create a PNG with a pattern (e.g. 50% transparency) and no background (100% transparency)

Like this:

The dark and light parts overlay the background as they are semi transparent (using a gradient to show the background is exchangeable):

This way you can change the background color, gradient or image even while the patterns stays the same.

Update: This is simply the pattern inversed and used as layer mask:

Answer 4

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.

Answer 5

how do i convert the foreground motif to degrees of transparency?

To answer that question (since you said you´re a complete newbie) just (for example) select the layer with the pattern and press 5 and 0 on your numpad to set the opacity to 50%. Make sure the pattern layer is the only layer.

Transparency in Photoshop looks like this (in case you don´t know):

Sorry if I´m telling you stuff you already know, just want to make sure there are no misunderstandings. I´ve seen many people wondering why there is this pattern though the deleted something ;)