Extracted Image Displays Differently in Browser Than Photoshop

#1
Hi everybody,


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.
 
#2
Nice job for a complex background like the tutorial uses. I have followed this one before. Extracting hair is one of the most difficult selections you can make. For me, it is the hardest. As you can see, you still have a ghost image on the grey BG. Have you tried it against black?

What is going on with the gif online is pretty nasty. I wouldn't have expected it. I would zoom in while you're in PS on a black BG and take a look at the areas that have the white feathers online and see if there is white pixelation you don't see in normal view. Try Inkz's tutorial which he just posted a few days ago.
 
#3
I saved your gif and put it on a black BG. Then I did a simple channel extraction, masked the model, and used the refine mask such as you saw in the tutorial for refine selection. Same thing.

This first is your gif on black. The second is the channel selection. Not perfect, but this is where I clean up the edges then get out my hair brushes, make a layer underneath, and add a few discreet hairs that are very similar to the original model's.

eres1k_initial_gif.jpg
eres1k_channels.jpg
 
#4
Hi Clare,

Thanks for taking the time and looking at my problem. Your version looks a million times better than mine. I quickly once went through tutorial by Inkz that you had linked to. I wanted to ask you, is that the process you used to achieve the last image or did you do it differently? How do you do a channel extraction? And how did you mask the model? I'm really sorry for my total noobness. I've promised to do this web site for my sister and it's way overdue, but I'm determined to get it done for her. Thanks
 
#5
You're very welcome.

I used a slightly different technique though the ideas are similar. My result did not use the calculations. It was a very simple technique using the most high contrast channel in the channels palette, doing a levels adjustment to darken the hair strands without bringing up too much grey, painting around the details with a black brush in overlay, painting the inner portions of the image in black brush on normal, then making a selection, and masking the image. Then refine the mask.

Now that was crystal clear, right? LOL.

In addition to the one from Inkz, here are a couple tutorials that might help:

a couple techniques: http://blog.spoongraphics.co.uk/tutorials/handy-techniques-for-cutting-out-hair-in-photoshop

slightly different approach: http://www.psdvault.com/photo-effec...tilising-channel-mask-technique-in-photoshop/

all-purpose techniques; the name says it all: http://wegraphics.net/blog/tutorial...ques-to-extract-anything-from-its-background/

There are a lot of good tuts available. IMO, these are a few of the best.

Lynda.com is one of my favorite resources. There is a free trial available, but I don't know how far it will allow you to go into Deke's channel masking techniques, but he is one of my favorite PS Masters. So check it out.
http://www.lynda.com/Photoshop-CS2-...ir page:1 s:relevance sa:true producttypeid:2
 
#6
Hi Clare,

Thanks for your useful links. I did follow the first one and will try the other ones as well. So far I got the same result as before. Behold my latest masterpiece:


This is extremely frustrating!!! There's no sign of the pixelation on the checkered transparent background, until I attempt to save the image. Then, when I try to Save for Web, the pixelations can be seen as white patches in the preview pane. This happens in all gif formats, as well as PNG-8, but not in PNG-24. However, the PNG-24 file gets as large as 880KB, which I'm afraid may be a little too large for reasonable web viewing.

Does any of this makes sense to you? Is this congruent with your experience? Is there a solution for me? ... and why is it so cold out there? lol

Thank y'all for your help. I would really appreciate it.
 
#7
I just don't know what to say. As you saw my attempt wasn't so full of this artifact. IDK if you are missing getting rid of some pixels you don't see clearly or what. Some of the more tech members may have additional advice. I'm fresh out. OTOH, 880 kb doesn't seem that bad to me if you control the size. You can upload an image to the web that has a higher res than the monitor and it will still work depending on its size.

Have you tried just saving it as a png and not using the save for web and device? Try that and see if it works any better.

And it's 74 with no wind here. Rain clouds on the way. Should be a beautiful evening if it rains ;p.
 
#8
okay, the problem is, gif doesn't support transparance, so it's either 100% opacity or 0% opacity.
What probably happened at the hair was that there were pixels at around 1% opacity,
which gif would make 100% opacity, creating the border. Hope this helps you in the future.
 
#9
Hi Clare,

Well I would take 880kb at this point. But guess what, I tried that on a couple of larger images and again came out with the white pixelation. I'm at my wits end!

And please do save me a spot if you go to LaJolla or Monarch Beach or Newport... I should be back by this summer...
 
#10
okay, the problem is, gif doesn't support transparance, so it's either 100% opacity or 0% opacity.
What probably happened at the hair was that there were pixels at around 1% opacity,
which gif would make 100% opacity, creating the border. Hope this helps you in the future.
Hi Chris, thanks for your input. My question is, how would I go about deleting those 1% opacity pixels. It seems like I'd be back to square one where I tried to delete the background around the hair manually, which didn't produce a clean image at all. Any pointers as to how I can carry out your suggestions above? Thanks again.
 
#11
Well guys, I'm gonna send out a cry for physical help and do what I didn't wish to do in the first place. You see, I'm planning to put up 6 images on my sister's web site. The website is all finished and ready to go. I want to get her going with at least 3 images, while I trace the source of my problem and do the rest of the images myself.

I managed to do 1 already, as mentioned previously. But I would really be grateful if one of you kind people would find the time to help me with the other 2. This will also give me a chance to compare results and give me an inkling as to what I might be doing wrong.

Here are the download links to the images:
http://www.2shared.com/photo/qoARehUW/HM2.html
http://www.2shared.com/photo/FdwJagSF/hm3.html

All I would need is the model image on a transparent background. Either gif or png formats would be great.

Thanks again in advance to anybody who would be willing to give this a shot.