right, when you select 'save as', a window will pop up where you can choose a file to save in. In that same window, you select GIF. If you do, you will see another, smaller window pop up next to it. There you can select: 'Save transparancy colour' and 'choose transparant colour during saving'.
Now save the file. Another window will pop up showing your picture, slightly enlarged. Now click on the colour you want to become transparant, in most cases the background.
That should do it.
Please note that GIFs make a colour transparant. I use background colour white, but that means all things white will become transparant. If I want stuff to remain the same colour, I have to make them a very light shade of grey. (you really won't see difference at avatar-size)
I do all of that a couple of times over with this:
EDIT: Note, when you try to add this to a sig, it still has teh white background...
and then i thought along the same lines as what you posted above and made a different color background for this:
The only thing that I can see that I haven't done is d/ling the add-ons. in the afore posted link to that peregrine made, he mentioned having a filter selected that I can not find anywhere on my menus. I may try to get the addons (unless someone tells me it's pointless)
huh....I hadn't noticed that before. Maybe I'm NOT doing something right.
I'll check back a bit later once I get home and I can screw around with it. From all that I read with the 'How-to' guide, you have to save(via exporting) the pic as a .PNG in Inkscape. Then follow, as you posted above, to get the background transparent.
I may just have to suck it up and go back to Gimp, but I'd rather take a bullet in an appendage than put that monstrosity back on my feeble computer.
ok, so I feel like a dummy, really, but I did notice one thing that was really odd. I after I saved it, the folder the images were in from Inkscape never changed, thus making think it wasn't saving at all. Upon further inspection, I found that Irfanview was saving them somewhere completely different and strange...actually.
EDIT: So there's still that strange dotted line thing going on...weird. I'll have to look into saving it differently, also, to get rid of the black ring around it all.
testing this to see what it looks like...
Last edited by tape_measure : 12-29-2006 at 05:45 PM.
I think the dotted line has something to do with the fact that the picture now is 122 x 122 pixels (before, it was 120 x 120). Did you somehow stretch it, perhaps when you hosted it on photobucket? I once did that by accident and I remember that I got similar dots in my picture.
edit: now that I look again, it seems that you just made surrounding square a little thicker, so I was propably wrong.
Is there a problem with the tutorial or am I simply doing it wrong?
There is no problem with the tutorial.
It seems you're happy now, except for that dotted line. It looks kind of like you have a white kind of 'aura' behind your person, which is then on a grey background... but then the grey background has been made into the transparent colour. So the grey becomes white (the colour of the page beneath), but certain pixels at its edge remain grey (because they weren't exactly the same shade of grey -- they were on the border of the grey bit and the white 'aura' -- so they didn't get picked to be transparent).
*scrolls down* ...except what looks like an 'aura' is also transparent, because down in the Topic Review bit of my reply page, the background is brown, which is showing through both inside and outside the dotted line. How odd.
Peregrine! I'm glad you came around to this. i wasn't trying to diss the hard work you put into making the tutorial. God knows it's helped me incredibly. I was having trouble with the background bits, but I think I have them sorted out now:
There's still a weird background to it, but I 'think' it comes out ok...The biggest problem I had was trying to figure out the transparanet background part and saving it correctly (I got the latter figured out after wanting to pound my head into my desk....).
The background bit is still giving my a bit of a problem, though.
Anyone happen to know the color code thing for the site's tanish brown color. It would save my avatars from looking liek this:
(this came after I figured out that I needed to use a different background other than white or black...)
The hex code is f0e7d3. (I have the Colorzilla extension for Firefox, it lets you pick colours right out of the browser window.)
I admit Irfanview isn't really the best for working with transparency, it's a bit of a pain in some ways and only does binary transparency (the sort that makes you set the background to the colour you expect it to appear on, and which looks weird if you put it on any other, significantly differently coloured background... also the sort that makes all other sections of the same colour turn transparent). Something like the GIMP is much better for good control over your transparency, but Irfanview is much faster to start up and work with, so if you can handle its limitations, it's fine.
To the point: The first one looks fine. The second one, you've obviously set the background to green and then made that transparent. The subtly different shades of green that are blended into the edges of the character don't get turned transparent. Something pale, like the site's tannish background, is probably a better choice than green. Which is I assume why you asked for it.
heh, as much as I like green, it sticks out way too much. That was the first, of many, attempts to get the background to work out for me. With the hex code, now, I think I can go back to one of the examples before, where I used the gray background. Naturally I can leave the white background when/if I make an avatar without white in it.
I really liked having GIMP, but I had troubles with loading it all the time. I'm not sure if it was the version I had or my computer, but it took nearly 20 minutes to load it every time and it somehow managed to be the default viewer for everything picture related (something I couldn't be rid of...). Normally 20 minutes isn't that bad, but I'd rather screw around with Irfanview that deal with the long loading of GIMP and all of it's addons.
Maybe, somewhere down the line, I can get a faster machine and all these problems will be solved with the upgrade.
*tilts LCD screen slightly* Ohhhh, I see your issue with the background of that first one now... sorry, it wasn't showing up from the angle I was sitting before. It's dotty!
It looks like you've saved as a GIF (or maybe a paletted PNG), then gone to set the transparency. GIFs use a limited palette of colours; if your original picture has more colours than the GIF has room on its palette, it has to reduce it somehow. Dithering is one way to do that: it replaces a solid area of one colour (a colour which it doesn't have on its palette) with a combination of dots of other colours (which it does have on its palette). More on dithering, from Wikipedia.
The upshot of this is that it seems your background has been dithered. One of the colours used in the dithering has been chosen as your transparent colour; another colour is dotted across it occasionally, and has not become transparent.
One solution is to open it in Paint and blank out all the dots. Use the colour picker to pick the major background colour, then paint the entire background to this colour. Resave it in Irfanview to set the transparent colour again.
Another is to just work in PNGs instead of GIFs. PNGs can use a palette just as small as GIF's, but mostly they don't, they use a larger number of colours. (This is a hazard of shaded avatars: smooth shading uses lots of colours.)
I think it mostly comes from completing the above nearly a week ago...or so. But that's mostly my fault for not recording what I was doing.
As far as I can recall;
- I use Inkscpae to draw out the avatar.
- Export, once I have what I want, as PNG (this maybe a Bitmap, I'm not 100% sure on the terms)
- Open Irfanview and open the newly created PNG
- Select 'save as' and run through the 'selecting the transparent' bit from the tutorial. This makes a GIF if I recall right.
As for the above model, I believe I bagan experimenting with the little bar that pops up with the 'save as' menu. I can' trecall what it's titled right now, but I can check it out later and get back to you so that we're understanding each other perfectly.
Sorry, I think I'm just confusing the issue with all this side discussion. I'm just going to summarise the ways to get out a final image that looks nice.
First though, some explanation of image formats:
BMP: The Windows Bitmap format. Doesn't compress the image, so you get BIG files.
GIF: Graphics Interchange Format. Boasts near-universal support, and the ability to do simple animations. Only allows 256 colours, which is why we get into the whole 'dithering' thing I was on about before. Also had some legal issues a few years back.
PNG: Portable Network Graphics. Very flexible image format that can do everything GIF does (except animation), but better and in a smaller file, as well as doing things GIF can't do, like using more than 256 colours (i.e. no dithering). Also no legal issues. Its drawback is less universal support. (In particular, Internet Explorer before version 7 had problems with its transparency. But only the advanced transparency. The simple transparency, which Irfanview gives you, is fine. I think.)
JPEG: Good for photos. Bad for everything else.
Anyway. The very easiest way to get your images right is to just export from Inkscape, at the right size, first time. I admit I wrote the Sodipodi/Irfanview tutorial before I'd completely gotten the hang of this (in particular, I didn't know how to resize the canvas in Sodipodi, so I needed Irfanview to make my images square).
When using Irfanview, the important points are:
1. Draw your avatar in Inkscape.
2. Export it with NO transparency. (I believe it's close enough to Sodipodi that the export menu should have an option to set the background colour. Set it to whatever you like -- preferably not a colour you use anywhere else in the picture, but one close to the colours it will eventually appear on -- but slide the 'alpha' all the way to the right, so that the background is not transparent at all.)
3. Open in Irfanview, crop, resize, what have you.
4. Save as a PNG, make sure 'Save transparent colour' is checked. When prompted to pick the colour, click on the background.
Voila! No GIFs, no dithering, and hopefully no problems with Internet Explorer.
Edit: Consider this my apology for confusing you. Undithered backgrounds!
(GIF at left, PNG at right. The PNG is a smaller file.)