8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Why Isn't This Image 100% Transparent?

by mrniceguy123
7 replies
  • WEB DESIGN
    • |
I made this custom image for a plugin I installed on my site for visitors to opt into.

I used pixlr to make the image transparent, but as you can see, there are parts of the letters that aren't truly transparent, as you can see the white background inside some of the letters.

Do I need to use another software to get the letters to be 100% transparent, or am I going to have to live with what I have?
#100% #image #transparent
  • Profile picture of the author Blakos
    *EDITED BY AUTHOR
    {{ DiscussionBoard.errors[7490831].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by Weponz View Post

      As far as i can see its in a .JPG format, and as far as i know JPG does not support transparency, try the .PNG format, as that's how i use transparent images.

      Hope this helps, do not hesitate to ask for more help if this does not eliminate the issue.


      Best regards,


      Weponz @ www.weponzinc.com
      Really? Well here's a link to the image I have in the settings set to be used in the plugin. It's a .png file.

      If it wasn't transparent, I'd think that the white background of the original image would show up in more places than just inside of a couple of letters.

      To me, it appears that when I made the image transparent, the software (pixlr) didn't know to (or know how to) make the little parts inside of the letters transparent.

      What do you think?

      Might the issue be that Pixlr just doesn't do a very good job at making such an image completely transparent?
      {{ DiscussionBoard.errors[7497781].message }}
      • Profile picture of the author clickbump
        Originally Posted by mrniceguy123 View Post

        To me, it appears that when I made the image transparent, the software (pixlr) didn't know to (or know how to) make the little parts inside of the letters transparent.

        What do you think?

        Might the issue be that Pixlr just doesn't do a very good job at making such an image completely transparent?
        From the looks of your image, it appears that it was created on a white background and then you used pixlr to try to knock it out to transparent.

        However, If you had created your image in pixlr to begin with, you could have started with a transparent background.

        So, starting with a single layer image that has a white (or solid color) background, you likely used the "make selection" --> "delete selection" technique to try and make it have a transparent background (after unlocking the layer in pixlr's layer editor)

        When you do this, Pixlr only makes your current selection transparent. So, when you selected the white background areas of your image, then pressed delete, pixlr made that area transparent. However, the selection is contiguous and unless you shift+selected the non contiguous areas (the inside area of letter forms) they were not part of the selection.

        So, once you did original selection knock out, you would then need to select the white areas inside text (the items that were not part of your background selection) and knock those out as well.

        Photoshop has more tools to help with this (ie, range/color selection), however, its selection tool would operate the same as pixlr's and you would have to knock out the holes in the letter forms by selection.

        Pixlr, for what it does and the cost (free) is a pretty incredible resource to have at your disposal. I'd encourage anyone reading this thread to give it a look. I use it routinely for web graphic tasks that are too lightweight to bother with Photoshop.
        Signature
        {{ DiscussionBoard.errors[7498538].message }}
        • Profile picture of the author mrniceguy123
          Originally Posted by clickbump View Post

          From the looks of your image, it appears that it was created on a white background and then you used pixlr to try to knock it out to transparent.

          However, If you had created your image in pixlr to begin with, you could have started with a transparent background.

          So, starting with a single layer image that has a white (or solid color) background, you likely used the "make selection" --> "delete selection" technique to try and make it have a transparent background (after unlocking the layer in pixlr's layer editor)

          When you do this, Pixlr only makes your current selection transparent. So, when you selected the white background areas of your image, then pressed delete, pixlr made that area transparent. However, the selection is contiguous and unless you shift+selected the non contiguous areas (the inside area of letter forms) they were not part of the selection.

          So, once you did original selection knock out, you would then need to select the white areas inside text (the items that were not part of your background selection) and knock those out as well.

          Photoshop has more tools to help with this (ie, range/color selection), however, its selection tool would operate the same as pixlr's and you would have to knock out the holes in the letter forms by selection.

          Pixlr, for what it does and the cost (free) is a pretty incredible resource to have at your disposal. I'd encourage anyone reading this thread to give it a look. I use it routinely for web graphic tasks that are too lightweight to bother with Photoshop.
          Thanks! I re-created the image on a transparent background from within pixlr and that fixed my issue. Thanks!
          {{ DiscussionBoard.errors[7504260].message }}
    • Profile picture of the author blogfreakz
      Originally Posted by Weponz View Post

      As far as i can see its in a .JPG format, and as far as i know JPG does not support transparency, try the .PNG format, as that's how i use transparent images.

      Hope this helps, do not hesitate to ask for more help if this does not eliminate the issue.


      Best regards,


      Weponz @ www.weponzinc.com
      Agree with you... use .png extension if you want a transparent, because jpg doesn't support transparency,, you can use gif too btw..
      {{ DiscussionBoard.errors[7502077].message }}
      • Profile picture of the author clickbump
        Originally Posted by blogfreakz View Post

        Agree with you... use .png extension if you want a transparent, because jpg doesn't support transparency,, you can use gif too btw..
        OP's example pic appears to be just a screenshot of his site showing the image he's talking about in context with the underlying elements. That example pic is jpg but that's not pertinent to his question.

        Its does appear that the image in the screenshot has transparency since we can see the page background showing through. So, its most likely a png (Pixlr only supports transparency with PNG and is not capable of exporting gifs at all)
        Signature
        {{ DiscussionBoard.errors[7502275].message }}
  • Profile picture of the author vivrichards
    Try photoshop or GIMP to make the background transparent and save as a .png file. Email me the file if you have trouble and i can try and do it for you if you cant do it.
    Signature
    Squeeze Press - Wordpress Theme
    Beautiful Squeeze Pages In Under 2 Minutes (ONLY £5)
    www.squeezepress.co.uk
    {{ DiscussionBoard.errors[7494568].message }}

Trending Topics