Creating Black & White Transparent PNG's

Question

I'm trying to strip all background colour (white in my instance) from an image in order to save out as a transparent PNG so we can upload the images to a webpage with a changing background colour. The desired effect can be seen here - http://thegentlewoman.co.uk/library, if you save image to desktop / open in PS you can see there is no background colour. Any ideas?

Answer 1

Hum. Those images are not striped of a background. The photo itself is just a black square and the alpha channel is the image.

1. Select your image. Copy it to the clipboard.

2. Make a new layer. Make the layer black.

3. Add a mask to that layer. Alt click into the little icon of the layer.

4. Paste your image on this mask.

5. You probably need to invert the image. Use the curves.

6. Remove the background. Done.

Additional steps: You probably need to adjust the levels to make it more contrasted.

Answer 2

You don't need to use a png to achieve what you want nowadays, but it is still doable as you ask for.

Right, now... my real advice is you to play with blend modes within CSS. You can actually make your regular JPG overlay a coloured background, and not just overlay, there are many modes available. Here is a link for a great tutorial, since it has tons of options and it would take lot of guessing to find the one you fancy at the end. Tutorial and CodePen

If you want the "PNG" version, you just need a Photoshop action which is older than many in here xD . I got it in 1999 from a site called ActionXchange, which later Adobe bought and morphed it into AdobeXchange, which is now what you know as Creative Cloud. It works like a charm: You can download it from here. It is my personal cloud server and it's a direct download so feel free. Just remember, to make it work properly your file has to be completely flattened.

EDIT: Forgot also, your Photoshop needs to be in english, when you flatten your file the background layer is named "Background" and its directly related to the action, if you have your PS in spanish or other language, the layer name would change when flattened to something different and the action wouldn't work. (old school, but hey... it works!)

Answer 3

The simplest way to do this is through: Select->Color range - here try to select as much of background as you can; then when you are satisfied with the selection just delete it and save it as png

Answer 4

You can also use the Magic Wand to select your background, delete it, and then save as .PNG and it will preserve the transparency.