PDA

View Full Version : Creating Transparent PNG's



mburt
08-28-2006, 12:14 AM
Hi.

I've wondered how to make an image transparent, and I figured it would be making an image, and having the background white. But in a browser it isn't transparent :confused:. I was obviously wrong. So. Is there a way to make an image transparent?

ModernRevolutions
08-28-2006, 12:18 AM
it depends. what did you make the pic in??? if its in photoshop just make sure the background i checkered and save it as a gif and in the options you should see something that says transparent and click the box thing.

Twey
08-28-2006, 12:24 AM
and save it as a gif
Creating Transparent PNG'sHmm :)

It would depend on the image editing suite you're using, though. In the GIMP, to create a fully-transparent image, simply click "Advanced Options" in the "New" dialogue, then select "Transparency" from the "Fill with" dropdown.

mburt
08-28-2006, 12:28 AM
Can I do it in:

Adobe PhotoShop 7.0
Jasc Paint Shopt Pro 7
PhotoFiltre

??

Twey
08-28-2006, 12:35 AM
Probably. I don't use Photoshop or PSP, though, so I couldn't tell you for certain.

mburt
08-28-2006, 12:37 AM
Hmm... I know this is a stupid question, but can you do it in MS Paint?

blm126
08-28-2006, 12:41 AM
Most likely not in Paint. I know for a fact that Photoshop 7.0 can. I only have Photoshop 2.0 elements(I'm poor), but here's a screenshot (http://www.bradyontheweb.com/demo/screen.gif). I went to file>new

mburt
08-28-2006, 12:42 AM
It only let's me save it as a .psd though?

mburt
08-28-2006, 12:47 AM
Never mind. Problem solved, I got it to work :)

QuickScriptz
09-15-2006, 09:30 PM
Lol - ok but for further reference.......

PNG - made in Photoshop can be transparent but will only appear so in Firefox

GIF - made in Photoshop can be transparent and works for all browser (but the image quality isn't the best)

BMP - used to save desktop background (if you save your backgrounds as this file extension, the text below your desktop icons will not be in a box of blue or w/ other color)

JPG - lacks in quality and other stuff, dont use for anything other than pictures (real pictures)

djr33
09-16-2006, 01:55 AM
Note that JPG doesn't just "lack in quality and stuff", and that it's DEFINITELY the best for pictures, but that's usually the limit of it.

JPG compresses the image so you lose quality, but also shows detail well.
GIF, for example, uses a limited number of colors (up to 256) and that alone makes it not look as good for detailed graphics and/or photos.

Also, random note, but .pic/.pct/.pict are mac formatted uncompressed images, like their .bmp PC counterparts. Not that it's so related.

Twey
09-16-2006, 01:17 PM
Nonsense.
PNG - made in Photoshop can be transparent but will only appear so in FirefoxCan be made in any good graphics-editing program. Supports alpha transparency (partially transparent pixels), but this does not work in IE. It will display fine in anything else, and there are filter-based hacks to make it work in IE as well. Binary transparency (either totally transparent or totally opaque) will display fine in anything.
GIF - made in Photoshop can be transparent and works for all browser (but the image quality isn't the best)Again, can be created in any decent graphics-editing program. Supports only binary transparency. The image quality is exactly the same as that of PNG or BMP, since GIF is a lossless compression format.
BMP - used to save desktop background (if you save your backgrounds as this file extension, the text below your desktop icons will not be in a box of blue or w/ other color)BMP is an uncompressed image format. It does not support any form of transparency, and the file sizes tend to be huge. Outdated and pretty much useless nowadays, GIF or PNG should be used instead.
JPG - lacks in quality and other stuff, dont use for anything other than pictures (real pictures)A lossy compression format, JPEG tends to be used for very large images where filesize is vital and a few artifacts will likely go unnoticed. Unless compression is set to zero (in which case you might as well be using a BMP) the image quality will decrease with every save, so while JPEG is nice for distributing files, the original copy should be saved in a lossless format such as PNG (but not GIF, due to the colour limitations mentioned above) and distributable JPEG copies made directly from that, rather than from other JPEG copies. TARGA used to be the format of choice for archived images; I think PNG has pretty much replaced it by now. Does not support any form of transparency.

mamawsandy
09-17-2006, 11:55 PM
I use PSP's Animation to change the backgrounds of graphics to transparent.

In this program, there is at the top, a title called Anamation. Click on this and then click on Replace color.

Make sure the old color ( the one you want to change) is in the old color box. Then make sure you have Transparent checked. Click ok and you should have the transparent image.

This sometimes doesn't work right - especially if the color you want to change is black. But keep trying. Maybe change it to another color such as white and change that.
mamawsandy

mburt
09-18-2006, 01:25 AM
I have that program, I think I'll try it. I use PhotoFilter now though, and it works great. It lets you set which color you want to be transparent as well. Very useful.

jscheuer1
09-18-2006, 06:17 AM
I use PSP's Animation to change the backgrounds of graphics to transparent.

In this program, there is at the top, a title called Anamation. Click on this and then click o . . .

Please use the default font, size, and color unless you are illustrating something with it.

Twey
09-18-2006, 07:16 AM
In the GIMP, click Layers->Transparency->Color to Alpha.

djr33
09-18-2006, 07:39 AM
Unless compression is set to zero (in which case you might as well be using a BMP)
Visually, you won't notice much if you use anything down to 30% quality, in most cases.
Photoshop's default "best" compression is 80%.
And, a BMP will still be larger than a JPG at 0% compression.

colettemr
09-19-2006, 07:23 PM
Here is the solution for IE when using PNGs. I used this Javascript for www.mcmahonhomes.com site. Most of the images are pngs. I could have had a simular effect with GIFs but the ragged edges would have been bad.

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
var count = 0;
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 (count == 1) 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;
count = count + 1;
}
}
xShow("currentconditionswrapper");
}
window.attachEvent("onload", correctPNG);


Place this within the body of your page, not the head.
hope this helps.

Twey
09-19-2006, 07:35 PM
But that means your page relies on scripting to display properly in IE. This would be an acceptable solution if no better existed, but I'd say to just do it manually.

blm126
09-19-2006, 10:55 PM
If you are going to use javascript you might as well go all out (http://dean.edwards.name/IE7/).

Ickyb0d
10-05-2006, 06:31 PM
But that means your page relies on scripting to display properly in IE. This would be an acceptable solution if no better existed, but I'd say to just do it manually.


well i'm relying on some ajax script to actually create my images. then passing in only one image to fix (as opposed to the entire document) for instance...



function correctPNG(img) {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters)) {
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
}
}


img.src = 'http://mysite.com/generate_image.pcgi?here=someinfo;about=howtogenerate;my=image'
correctPNG(img)

i have a couple of questions using JS (as shown above) to apply the filter.

1) does it actually load the image twice? since setting the img.src to a url, then setting the AlphaLoader to a url, it would appear that it loads the image twice, one for source, on for the alphaLoader.

2) is there a reason that the alphaloader filter would not like a '#' symbol in the URL? say i'm passing a color "#ff9900" in that string i have above. it seems to just kill the string whenever the alphaloader filter encounters a '#' sign (escaped, or not escaped using... escape(string) ).

Ickyb0d
10-10-2006, 06:42 PM
heh i hate to answer my own questions... but...



1) does it actually load the image twice? since setting the img.src to a url, then setting the AlphaLoader to a url, it would appear that it loads the image twice, one for source, on for the alphaLoader.


yes, it appears to load it twice.



2) is there a reason that the alphaloader filter would not like a '#' symbol in the URL? say i'm passing a color "#ff9900" in that string i have above. it seems to just kill the string whenever the alphaloader filter encounters a '#' sign (escaped, or not escaped using... escape(string) ).

Still haven't figured this out, i just replace the '#' sign with some other signs, and then fix it server side.


below is my solution. pretty easy and pretty much like the other snippets of code in this post.


var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

var url = 'http://whereveryour.image.is/goeshere.png'

if ((version >= 5.5) && (document.body.filters)) {
img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + url + '", sizingMethod="scale")';
}


on another note! using img.onfilterchange acts as an image.onload for the alphaImageLoader filter.

motormichael12
10-15-2006, 03:28 AM
Try using IrfanView... completely free, support for like every image type and more that gimp has but loads in about the time that MS Paint does instead of a big load screen.... It gives you choice of transparency and all that through GIFs and PNGs.

jscheuer1
10-15-2006, 03:57 AM
But that means your page relies on scripting to display properly in IE. This would be an acceptable solution if no better existed, but I'd say to just do it manually.

The alphaImage loader is script to begin with.

Twey
10-15-2006, 09:28 PM
Ah, yes. I apologise.
Try using IrfanView... completely free, support for like every image type and more that gimp has but loads in about the time that MS Paint does instead of a big load screen....That's because it's an image viewer, not an editor. It may have some editing features, but they'll be a toy compared to serious photo-editing suites like PhotoShop and the GIMP. Besides:
IrfanView is a very fast, small, compact and innovative FREEWARE (for non-commercial use) graphic viewer for Windows 9x/ME/NT/2000/XP/2003.Not even an attempt at being cross-platform.