Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Jan 2013
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Extracted Image Displays Differently in Browser Than Photoshop

    Hi everybody,


    I'm trying to extract hair from a rather uniform and high contrast background following this tutorial: http://www.surrealpsd.com/compositin...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. #2
    Queen Bee ibclare's Avatar
    Join Date
    Jun 2011
    Posts
    10,801
    Post Thanks / Like
    Mentioned
    9 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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.
    Photoshop Gurus Site Rules

    3 Ps of PS: perseverance, patience, & play!

  3. Thanks mr_z clicked thanks for this post
  4. #3
    Queen Bee ibclare's Avatar
    Join Date
    Jun 2011
    Posts
    10,801
    Post Thanks / Like
    Mentioned
    9 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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
    Photoshop Gurus Site Rules

    3 Ps of PS: perseverance, patience, & play!

  5. Thanks mr_z clicked thanks for this post
    Likes MikeMc liked this post
  6. #4
    Junior Member
    Join Date
    Jan 2013
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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

  7. #5
    Queen Bee ibclare's Avatar
    Join Date
    Jun 2011
    Posts
    10,801
    Post Thanks / Like
    Mentioned
    9 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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/tuto...r-in-photoshop

    slightly different approach: http://www.psdvault.com/photo-effect...-in-photoshop/

    all-purpose techniques; the name says it all: http://wegraphics.net/blog/tutorials...ts-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-t...ducttypeid%3A2
    Photoshop Gurus Site Rules

    3 Ps of PS: perseverance, patience, & play!

  8. Thanks mr_z clicked thanks for this post
    Likes MikeMc liked this post
  9. #6
    Junior Member
    Join Date
    Jan 2013
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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.

  10. #7
    Queen Bee ibclare's Avatar
    Join Date
    Jun 2011
    Posts
    10,801
    Post Thanks / Like
    Mentioned
    9 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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.
    Photoshop Gurus Site Rules

    3 Ps of PS: perseverance, patience, & play!

  11. Thanks mr_z clicked thanks for this post
  12. #8
    Guru chrisix's Avatar
    Join Date
    Dec 2012
    Posts
    637
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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.

  13. Thanks mr_z clicked thanks for this post
    Likes MikeMc liked this post
  14. #9
    Junior Member
    Join Date
    Jan 2013
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    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...

  15. #10
    Junior Member
    Join Date
    Jan 2013
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Extracted Image Displays Differently in Browser Than Photoshop

    Quote Originally Posted by chrisix View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About Photoshop Gurus
Photoshop Gurus (PSG) is a friendly community of designers and artists who enjoy all things related to Photoshop. PSG can consider itself one of the oldest Photoshop sites and has recently had it's 10th anniversary. We've come a long way and have every intention to continue supporting the Photoshop community. Photoshop can be an overwhelming program for beginners and that's how we try to help. We have a friendly forum, tutorials and all resources to help you understand this wonderful program. Feel free to look around and if you have any questions, don't hesitate to ask. Happy browsing!