...

View Full Version : How do i make an image's background transparent?



SpiritualStorms
09-11-2004, 07:42 AM
I do not know if this is the appropriate forum, but i was wondering if there was a way of making images with a picture in them, but the background portion of the image is transparent to the degree necessay for them to blend well with any background color i choose for a webpage? Is this possible? Or will i need an image editor? If so, does anyone have ideas?

I have made some imitations of other images in MS Paint, but the problem is, that the images themselves are not showing up with a transparent background.

The goal is real simple: i am trying to create images for a chess game, but the problem is, that the area around the actual picture in the image is not transparent, and i want it to be transparent so that when i make the board of any given color, the images will blend with that color.

Any ideas?

]|V|[agnus
09-11-2004, 08:15 AM
...

Do you need an image editor??

...

How exactly were you thinking you would EDIT AN IMAGE in the absence of an image editor?

...

P.S. GIF or PNG

SpiritualStorms
09-11-2004, 08:45 AM
I did say, i used MS Paint to come up with my drawings, but the problem is, that i cant make the images transparent.

Here's a zip file of what i did.

]|V|[agnus
09-11-2004, 09:08 AM
Dude, I know what you said. And right there you asked, "Do I need an image editor?" :thumbsup:

Did it cross your mind that perhaps there are better tools available than MS Paint? I mean, surely you don't think everything you've ever seen was done in a Paint-level program... so obviously you need to start by looking for a different tool.

P.S. GIF or PNG

]|V|[agnus
09-11-2004, 09:11 AM
Though... it appears you can save in a format that supports transparency (*cough*GIForPNG*cough*) from Paint, even!

I never even really had much of that phase where I merely *played* with Paint, so I can't help you with details, nor can I be bothered to figure them out. I have no interest in Paint! :D

Did you draw those pieces yourself, though? They are nicely done.

SpiritualStorms
09-11-2004, 09:16 AM
LOL...why you think i came to this forum? I know MS Paint isnt top notch.

But hey, until i am blessed with all the necessay knowledge from GOD (as it were) for me to make a living, i will be pretty much a bung dingering pauper living on dog scraps.

I did try my hand like a year ago on PSP, but i think they went from version 8 to 9, and well, its time consuming to learn every friggin piece of software out there. I never did learn PSP 8. But thats another issue. The point is i was hoping someone could suggest something. i know MS Paint isnt great, well, actually, it does have its uses. I just need that extra feature of making an image transparent which isnt afforded by MS Paint.

SpiritualStorms
09-11-2004, 09:20 AM
Though... it appears you can save in a format that supports transparency (*cough*GIForPNG*cough*) from Paint, even!

I never even really had much of that phase where I merely *played* with Paint, so I can't help you with details, nor can I be bothered to figure them out. I have no interest in Paint!

Did you draw those pieces yourself, though? They are nicely done.


Yes, technically. Willy Duitte, zipped some images for me, and i basically imitated as much as possible from the original, but technically, yes, i did them myself. I have found MS Paint useful in some instances, such as the one you saw with the chess pieces. The issue, as stated is, that when it comes to saving the image, i do not know how to save it to where the background portion of the image is transparent.

So to get you correctly, if i save in a format other than BMP, like GIF, i can get the transparentcy effect?

bradyj
09-11-2004, 09:30 AM
http://www.gimp.org/

Free, better image editor :)

I use photoshop, so I can't vouche for it, but I do know that if you want an image SEMI transparent (like you said, the photo blends slightly to the background) -- you'll need to save your format as png. Gif can only have 100% transparent, or no transparency at all (you can have both in one file, but it's all or nothing) -- this is known as binary transparancy. PNG supports Alpha transparancy, meaning parts of the photo can be from 0-100% transparency.

Of course, there's a catch, IE doesn't support PNG transparency, but every browser other than IE does. Why this is, we don't know -- they should've supported it along time ago.

Here's an article about it:
http://www.alistapart.com/articles/pngopacity/

Here's an example from that article that may look like what you're talking about:
http://oaksanderson.com/opacity/examples/ex3.htm

there is some javascrip that can fix IE's bad png support offered by skyzyx.com:
http://www.skyzyx.com/scripts/sleight.php

And you can combo that up for background images and or regular images, your choice.

TinMan
09-13-2004, 07:22 PM
Bearing in mind the previous post, are you sure

this wouldnt do? It is the gif option...

]|V|[agnus
09-13-2004, 07:33 PM
Looks good to me! I can't tell for certain (bad eyes, no glasses), but it looked like there may be one or two pixels that need tidying up, but I set it against a colored background, and it looked fine.

SpiritualStorms
09-14-2004, 12:29 AM
Would yu mind elaborating a bit more?


Bearing in mind the previous post, are you sure

this wouldnt do? It is the gif option...


The gif option in what application? In case you dont remember, i did the drawings in MS Paint, and not in another programs. Generally, i save as bmp, and not in any other file format. I know how to convert to other formats, but from what i have experimented, even in the other formats, the background is always white, no matter what color i set the background of the actual webpage.

This being the case, i need for you to eleborate on what you did to the gif above. Yes, it shows as a transparent, which is precisely what i want to achieve. I just need to know how you did it.

bradyj
09-14-2004, 01:13 AM
You need to define a transparent background when painting your picture -- I do not know how to do this in MS Paint, I only know how to do it in other programs. Are you sticking with paint then?

mindlessLemming
09-14-2004, 02:00 AM
You CANNOT achieve this with MS Paint. Get over Paint. Forget about the damn thing!!!

As stated much, much earlier - You will need to download a half decent image editing program, such as GIMP 2, which is completely free.
ONLY THEN will you be able achieve what you are seeking.



P.S. Get over paint. There is NOTHING it can do that other programs can't do 100 times better.

Kurashu
09-14-2004, 02:27 AM
Sometimes less is more. =)

But yes, for anything more than making sprites, you need to get a high(er) end graphic munipulater (I love big words, and complicated sounding phrases).

SpiritualStorms
09-14-2004, 03:50 AM
From MindlessLemming:

You CANNOT achieve this with MS Paint. Get over Paint. Forget about the damn thing!!!

As stated much, much earlier - You will need to download a half decent image editing program, such as GIMP 2, which is completely free.
ONLY THEN will you be able achieve what you are seeking.

P.S. Get over paint. There is NOTHING it can do that other programs can't do 100 times better.

LOL....Geese Louise. No need to bite my head off. I know MS Paint is weak, but hey, its free. I do not have time to learn PSP. Did i mention i tried my had at it once, long ago?

Well, i didnt know what Tinman meant. Hence my last post.



From Kurashu:

Sometimes less is more. =)

But yes, for anything more than making sprites, you need to get a high(er) end graphic munipulater (I love big words, and complicated sounding phrases).

LOL. Me too.



from bradyj
You need to define a transparent background when painting your picture -- I do not know how to do this in MS Paint, I only know how to do it in other programs. Are you sticking with paint then?

Well, until i have the time, and patience to learn PSP 9, and not PSP 8, or PhotoShop, i have no choice. So yea, MS Paint will be regrettably my main method of artistic expression, lol.

Thanks all for your much added input, even the lecturing, lol

]|V|[agnus
09-14-2004, 04:04 AM
The file you posted that I commented on already has a transparent background. So however you did that, it worked. Unless, somehow, it only works in a web browser, but I'v enever heard of such a thing.

Anyway, I opened the GIF in Firefox straight from your link. Then, Ctrl+Shift+E to bring up the CSS editor. Wrote one simple rule:


body {background: green}

The sprite laid over the green as expected, indicating a transparent background. So if you are having issues with it not being transparent, I'm not sure what to tell you other than what the others are saying: get a better graphics editor.

*shrug*

Interesting that my little CSS trick even worked, considering there should be no <body> to apply any rules to if I'm looking at a *.gif file. :) Oh well!

SpiritualStorms
09-14-2004, 04:11 AM
http://www.gimp.org/

Free, better image editor

I have tried to download Gimp, but it seems to be disorganised. What gets installed is the run time Environment, but not the actual application.

According to this link, i can install the versions that relates to WindowsL
http://www2.arnes.si/~sopjsimo/gimp/stable.html

I got the above link from a page that looks like this,
http://www2.arnes.si/~sopjsimo/gimp/

According the FAQ page, i have to do all of this:
http://www2.arnes.si/~sopjsimo/gimp/faq.html

The bottom line, no actual interface that tells me i have downloaded an application shows up in my programs directory, or what they call Start menu.

SpiritualStorms
09-14-2004, 04:15 AM
Angus:

The file you posted that I commented on already has a transparent background. So however you did that, it worked. Unless, somehow, it only works in a web browser, but I'v enever heard of such a thing.


Well, it must be yur machine, or your web-browser because all my other images do not show up as a transparent background. I use a teal background, and that does not show through the images background. Your version of my Queen_Red for whatever reasons, does show up as transparent, but my other images do not. I do not know what is going on.

Maybe you could do the same to all the images i zipped, and then post a link on here again, so that i can download to my machine?

TinMan
09-14-2004, 09:11 AM
If the sample I did is exactly what you want, and assuming there must be other pieces besides these, zip them all up and mail them to me.

SpiritualStorms
09-14-2004, 09:20 AM
If the sample I did is exactly what you want, and assuming there must be other pieces besides these, zip them all up and mail them to me.

Well, i cant explain why your gif showed up as transparent, while mine did not. I loaded your image next to a few of mine, and well, your image, or your version of it, shows up as i want it, while my others do not. How, and why, i cant really explain, but even downloaded PSP, and did the transparent background option, and well, they arent showing as transparent.

At any rate, here is basically the whole set:

Willy Duitt
09-14-2004, 10:31 AM
FWIW: If you do not have any decent Image Editting Tools you can transparenfy your images using GifWorks online image editor which can be found here (http://angelfire.gifworks.com/cgi-bin/gifworks.pl?com=transfer_open)....

Either browse to the file on your drive or provide an URI to upload the image to their server and then choose Transparenfy from the menu... At the popup, click on the color you wish to make transparent... Download and save when done....

Additionally, as previously mentioned... GIF's can be transparent... JPG, BMP and PNG's can not... If your image is not a GIF you will need to convert it to a GIF prior to using the above... This can be done here (http://www.netmechanic.com/GIFBot/optimize-graphic.htm)....

.....Willy

TinMan
09-14-2004, 02:03 PM
Havent double checked everything, in a bit of a hurry today,

SpiritualStorms
09-14-2004, 08:59 PM
To Tinman:

I dont know how the hell you did them, but they look cool. granted, some need a little remodaling, but over-all, they look awesome. Makes me glad i put in the time to make them.

Well, i tried making them myself, but they dont turn out the way they are supposed to. I downloaded PSP 8, and still, no green-lights, as it were.

A billion thankz though.

]|V|[agnus
09-14-2004, 09:34 PM
GIF's can be transparent... JPG, BMP and PNG's can not

As it pertains to the PNG format, that statement is false.

Willy Duitt
09-15-2004, 02:23 AM
oh.... :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum