SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to match image with transparency on background?

    I've got a photo which has been masked inside an unconventional shape, which needs to sit over a single-coloured background.

    If I save the image as a .png with transparency, I get a thin white line around the shape edge, which shows up against the coloured background.
    If I save the image with a coloured background, the image and the site's background don't match (even though I've specified the same hex colour). I've tried exporting as .jpg and .png, out of Illustrator and Photoshop. The original image was masked with InDesign, is there a chance that rebuilding the artwork in Photoshop will help?

    Has anyone got tips on how I get work around this?

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,413
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    I would say the best bet would be to go back to photoshop as when you get it correct it will be OK for any colour background.

    I assume the original photo was on a white background and that has be removed or changed to transparency. You would need to take a bit more off; possibly with a fade on your brush.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I agree - Photoshop is what you should be using, not Illustrator or anything else. If the shape is more organic with curved lines (instead of straight lines with angles), you might be able to use this trick: select the transparent background, then expand it by one or two pixels, then feather it by the same amont and cut it.

    It's strange that the image's background doesn't match the site's background even when you use the same hex color. Maybe your psd is not in RGB color mode?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I tried rebuilding the image within photoshop with no luck at first, until I noticed that in the 'save for web' dialogue box the transparency dither was set to none. I've just done another test with the dither set to diffusion transparency, which has given me a much better result!

    Thanks to @Rubble and @zot for nutting it out with me

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try to put radius .5 or 1 to make it slightly blured to remove the thin white around the shape edge... I agree with zot, the orig photo was on a white background, so you need to clean the edges.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •