+ Reply to Thread
Results 1 to 16 of 16
  1. #1
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88

    Cool Problems saving a png image

    Hi,

    I'm having problems saving a png image with photoshop 7. The image is supposed to have a transparent background for display on a web page. No matter what I try the image always seems to save with a slight gray background. I've read a bunch of online tutorials, and most of them just confused me more, but nothing seemed to get rid of the background.

    I'm not trying to do anything fancy. I just decided to use png format because the drop shadow looked aweful in a gif format, and jpg was not an option due to the background texture on the webpage. I've attached a copy of the image in png format. I'm not sure what I'm doing wrong, or what step I'm missing. Any help would be very much appreciated.

    Thanks in Advance
    Soma
    Attached Thumbnails Attached Thumbnails Problems saving a png image-gold_s.png  

  2. #2
    Did you try Google yet? Siliconjunkie's Avatar
    Join Date
    Feb 2003
    Location
    Buckhannon, WV
    Posts
    3,468
    Works right in FireFox, this is an IE bug with transparent pngs.
    My computer is bigger than yours!

  3. #3
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88
    Firefox is a browser. Unfortunately that doesn't help much, since most viewer to the site will be using IE.

    Are you telling me that I can't get a transparent background with png format?

    Soma

  4. #4
    Did you try Google yet? Siliconjunkie's Avatar
    Join Date
    Feb 2003
    Location
    Buckhannon, WV
    Posts
    3,468
    That is my understanding. Transparent pngs do not work right with IE. In firefox it displays normally.
    My computer is bigger than yours!

  5. #5
    Did you try Google yet? Siliconjunkie's Avatar
    Join Date
    Feb 2003
    Location
    Buckhannon, WV
    Posts
    3,468
    http://www.twistermc.com/twister/transparent_png.php


    The problem is not with the png, it is transparent, just does not look right in IE.
    My computer is bigger than yours!

  6. #6
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88
    http://tubes.ominix.com/art/electronics/

    This site has a bunch of images that are all in png format, and as you can see, they are transparent. If you click on them to enlarge, then you see the gray background, otherwise, on this page you don't see it. So it is possible....I've just got to figure out how.

    Soma

  7. #7
    nuisance since 1968 OuTpaTienT's Avatar
    Join Date
    Oct 2001
    Location
    ɐqɟs
    Posts
    10,458

  8. #8
    Did you try Google yet? Siliconjunkie's Avatar
    Join Date
    Feb 2003
    Location
    Buckhannon, WV
    Posts
    3,468
    All I am saying is that in IE the image has a grey square around it, in firefox it does not. AND, IE has known problems with transparent PNGs.

    Add those 2 up and you get your problem.

    And, in Firefox on OS-X, I see squares around those even without enlarging.
    My computer is bigger than yours!

  9. #9
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88

    Thanks

    Thanks a lot, Siliconjunkie, I just checked out the link you sent me. I followed the steps, and Voila, I have transparancy. Thanks again.

    Soma

  10. #10
    Did you try Google yet? Siliconjunkie's Avatar
    Join Date
    Feb 2003
    Location
    Buckhannon, WV
    Posts
    3,468
    I really wish I could do a screen capture on this crazy Mac.
    My computer is bigger than yours!

  11. #11
    Retired mostly.
    Join Date
    Oct 2001
    Location
    Finland
    Posts
    5,150
    The thumbnails are jpg, once you open up the image it's png.
    In ie, the png has light blue backgroun (no transparency), in firefox there is no background (transparency).

  12. #12
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88

    It Worked

    For future reference, I went to http://www.twistermc.com/twister/transparent_png.php , thanks to Siliconjunkie (my new hero).

    I followed the steps laid out there, and it did work.

    Thanks Again
    Soma

  13. #13
    nuisance since 1968 OuTpaTienT's Avatar
    Join Date
    Oct 2001
    Location
    ɐqɟs
    Posts
    10,458
    I don't understand why people use that method of an additional file, with the "blank.gif" thing. Why not just stick the code directly into the html or css?

  14. #14
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88
    Because it's all too complicated, for a novice like me.


    I see instructions....I follow them....It works.....I'm happy!!!!

    I haven't got a clue what any of it means, but as long as my problem was solved, I'll go with it.

    If you've got an easier solution, that doesn't require me to know script....I'll try it.


    Soma

  15. #15
    nuisance since 1968 OuTpaTienT's Avatar
    Join Date
    Oct 2001
    Location
    ɐqɟs
    Posts
    10,458
    Don't know if it would be easier or not. Depends on how you do things I guess. I find this easier. You don't need two extra files hanging around for it to work.

    Just copy this script into the <head> section of the html document. You can either put all this text in each html document that needs it or you can put it in a seperate file and use css to call that file.

    Code:
    <!--[if gte IE 5.5000]>
    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
       {
       for(var i=0; i<document.images.length; i++)
          {
    	  var img = document.images[i]
    	  var imgName = img.src.toUpperCase()
    	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    	     {
    		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
    		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    		 var imgStyle = "display:inline-block;" + img.style.cssText 
    		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
    		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
    		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
    		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
    		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    		 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
    		 img.outerHTML = strNewHTML
    		 i = i-1
    	     }
          }
       }
    window.attachEvent("onload", correctPNG);
    </script>
    <![endif]-->

  16. #16
    Member soma104's Avatar
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    88
    Yup, it works too. Thanks.

    You guys are the best.

    Soma

Quick Reply Quick Reply

If you are already a member, please login above.

What is 10 and 5 added together?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Need Help with a Logo
    By exoticpublishing in forum Graphic Design and Digital Photography
    Replies: 19
    Last Post: December 2nd, 2004, 11:43 PM
  2. Benifits of PNG
    By haxxorpoop in forum Graphic Design and Digital Photography
    Replies: 30
    Last Post: September 5th, 2004, 01:55 PM

Posting Permissions

  • You may post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Copyright 2014 All Enthusiast, Inc