Transparent PNGs.

  • dotcat
  • Novice
  • Novice
  • dotcat
  • Posts: 21

Post 3+ Months Ago

well. I used Adobe Illustrator CS to save the transparent PNGs... they looked fine on my comp but after u upload them, they lose their transparency. Is there a fool-proof way of saving transparent PNGs?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

ok I don't know about illustrator, but photoshop has a save for web option under file, and there is a box that you check for transparency.

One thing also to note, I don't think .png files work for IE
  • dotcat
  • Novice
  • Novice
  • dotcat
  • Posts: 21

Post 3+ Months Ago

Vladdrac wrote:
ok I don't know about illustrator, but photoshop has a save for web option under file, and there is a box that you check for transparency.

One thing also to note, I don't think .png files work for IE


thats what i thought at first, but someone made some PNGs (w/ transparency) that works in my browser.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I know this is a pretty crappy example for a test, but I did it up in about 2 minutes in 3 layers in Illustrator.

No fancy editiing other than adjusting opacity.

Clicked save for web, selected png accepting the default settings (which includes transparency checked). Works in both IE and Firefox exactly the same. (also works on black or white (although white is a little harder to see)

Image
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • Loc: up a tree

Post 3+ Months Ago

(you should be a graphic designer! :lol:)
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Yea that IS amazing ATNO/TW ;)
  • dotcat
  • Novice
  • Novice
  • dotcat
  • Posts: 21

Post 3+ Months Ago

ATNO/TW wrote:
I know this is a pretty crappy example for a test, but I did it up in about 2 minutes in 3 layers in Illustrator.

No fancy editiing other than adjusting opacity.

Clicked save for web, selected png accepting the default settings (which includes transparency checked). Works in both IE and Firefox exactly the same. (also works on black or white (although white is a little harder to see)

Image


i did that and my images turned out with a blue background V__V don't know why...

an example of one of my images....
http://www.chibicat.com/female.png

and i select PNG-24 when i created this. cus its either PNG-8 or PNG-24
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

as atno stated, I think you got to adjust the opacaity of that background layer
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

I set the opacity of the background layer to 0
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

There's also a bug in IE that prevents transparency in PNGs from being displayed correctly without some messing around...

In firefox, you can just do...

Code: [ Select ]
<img src="whatever.png">

and if there's transparent parts of the image, no problem.

In IE, you have to do something like this..
Code: [ Select ]
<DIV ID="myDiv" STYLE="position:relative; height:100px; width:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=whatever.png',sizingMethod='scale');"></DIV>

to get the alpha transparency to display properly, otherwise, they just show up on a solid colour background.

I just setup my script to detect whether the browser was IE or something else. If it's IE, send out the funny DIV code, if it's not, send out the regular img tag.
  • dotcat
  • Novice
  • Novice
  • dotcat
  • Posts: 21

Post 3+ Months Ago

Axe wrote:
There's also a bug in IE that prevents transparency in PNGs from being displayed correctly without some messing around...

In firefox, you can just do...

Code: [ Select ]
<img src="whatever.png">

and if there's transparent parts of the image, no problem.

In IE, you have to do something like this..
Code: [ Select ]
<DIV ID="myDiv" STYLE="position:relative; height:100px; width:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=whatever.png',sizingMethod='scale');"></DIV>

to get the alpha transparency to display properly, otherwise, they just show up on a solid colour background.

I just setup my script to detect whether the browser was IE or something else. If it's IE, send out the funny DIV code, if it's not, send out the regular img tag.


ya... i looked into that solution from the microsoft support page. but I found a better solution now (to use javascript) ^__^ thanks for your help though.
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

The reason I didn't suggest JavaScript is that many people simply turn it off.
  • dotcat
  • Novice
  • Novice
  • dotcat
  • Posts: 21

Post 3+ Months Ago

Axe wrote:
The reason I didn't suggest JavaScript is that many people simply turn it off.
well ya. but i dont wanna have to do browser checks and stuff (too much work lol)
  • Axe
  • Genius
  • Genius
  • User avatar
  • Posts: 5739
  • Loc: Sub-level 28

Post 3+ Months Ago

Nah it's not..

PHP Code: [ Select ]
<?php
 
  if (!strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE')) {
 
    // If it's not IE
 
    echo '<img src="whatever.png">';
 
  } else {
 
    // If it is IE
 
    echo '<DIV ID="myDiv" STYLE="position:relative; height:100px; width:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=whatever.png',sizingMethod='scale');"></DIV>';
 
 }
 
?>
  1. <?php
  2.  
  3.   if (!strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE')) {
  4.  
  5.     // If it's not IE
  6.  
  7.     echo '<img src="whatever.png">';
  8.  
  9.   } else {
  10.  
  11.     // If it is IE
  12.  
  13.     echo '<DIV ID="myDiv" STYLE="position:relative; height:100px; width:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=whatever.png',sizingMethod='scale');"></DIV>';
  14.  
  15.  }
  16.  
  17. ?>


That's all there is to it.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I use the javascript version from time to time cause it catches all the png's in the page, automagically. Generally, I just don't rely on PNG transparency.

As a side note, PNG transparency works VERY well in most MS Office apps. PowerPoint especially will make you appreciate the versatility of PNG transparency. If you have to do that type of thing for work, like me.

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.