SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Remove white image background

    Hi all.

    Unfortunately images are my weak point so i need some simple guidance with this please.

    I have a repeating grey image at the top of the website. However when I put the logo on top, it's white background is there. How do I make the white background transparent so the logo sits nicely on the grey colour.

    I have attatched an image so you can see my dilemma.

    Thanks in advance.

    James

    error2.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ideally, open the original file for the logo (Photoshop? Illustrator?) and hide the background layer. Then save as a transparent image (such as gif or png).

    If you don't have the original file, or if you do but the white background is not separate, in Photoshop you can select all instances of a color (e.g. white) with the magic wand tool and then delete them. (To make sure the deleted areas end up transparent, first make sure the layer is not called "Background" in the Layers palette, so rename it first.)

    If that's too vague, there are lots of tutorials online for removeing a background in Photoshop, such as http://graphicssoft.about.com/od/pho...emovebackg.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru bronze trophy Slackr's Avatar
    Join Date
    Jan 2009
    Location
    New Zealand
    Posts
    679
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    right on all counts ralph, couldn't have said it better.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Assuming you don't have the original files in PS or AI. or that they are already flattened and have the white integrated into them ( bad move), you could do the follwoing steps:

    1)add a layer mask
    2) copy a grayscale version of your logo into it
    3) in this layer mask select the logo image
    4) contract the selection by 2 or 3 pixels ( optional tweak)
    5) fill selection with black
    6) Adjustments->invert the layer mask

  5. #5
    Non-Member
    Join Date
    Jul 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to use transparent png or gif image for this purpose. Don't use jpg, because it does not support transparency. And also set the image background color to transparent when styling in your css file.
    Last edited by Shyflower; Jul 1, 2012 at 09:35. Reason: removed fake signature


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
  •