I'm trying to extract hair from a rather uniform and high contrast background following this tutorial: http://www.surrealpsd.com/compositing-and-selecting-hair-in-photoshop-cs5/
What I want to do is to extract the girl's image and save it with a transparent background as a gif, and then put it up on the web page I've created, which has a dark grey gradient background.
The problem is when I do that, the contour of the girl's image contains a lot of white space and what appears like brush strokes! The white space doesn't show up at all while I'm using the Refine Radius tool on a black background. It also doesn't show up when I save the image as a gif on a dark background layer in Photoshop. It only appears when I save it on a transparent background and display it on my web page!
Here's image, saved with transparent background:
Here's the image, saved on a dark background:
Here's the image, on a transparent background, displayed on the live web page (pull the middle pane up to better see the browser view): http://codepen.io/anon/pen/iKpsh
Any idea what could account for this discrepancy? Am I doing something wrong in Photoshop? Do I need to be doing something with the html side of it?
Any help would be appreciated.