it's a slippery slope

[truepenny]

I've started making my own icons.

Because I needed something to do with my copious spare time.

These images are all public domain or freely available for non-profit use. I have the source information up on my user profile.

And if anyone wants to know what wallpaper I'm using these days, check it out here. I don't know how the people at UK Safari managed to take that picture, but it's amazing.

Comments

[skalja.livejournal.com]

Very nice! One bit of advice, if you don't mind? You might try using antialias on the font to get a smoother effect. On the other hand, then the .jpeg extension might lead to the image getting blurred - .png is larger, but keeps both quality and clarity.

Just some food for thought.

[truepenny.livejournal.com]

Well, first I'd have to know what antialias is. Are?

My tech-grrl threshold is quite remarkably low. *g*

Sorry this took so long.

[skalja.livejournal.com]

Um, sorry, I tend to forget that other people don't live in an icon-y world (hey, everybody needs a semi-mindless hobby, right?). Antialias is smoothing out font text so it doesn't look all ragged around the edges (which isn't really noticeable in plain text like this, but is very obvious on an image). Most art programs have an antialias option somewhere in the text-adding or font-changing functions, but I don't know what you're using, so you might not have it.

Re: Sorry this took so long.

[truepenny.livejournal.com]

*mumble*Paint*mumble*

Okay, rabican got there first, but here:

[rliz.livejournal.com]

John (http://www.johnhorner.nu) used to have a wonderful article on anti-aliasing, but he's long deleted johnhorner.net, so you'll have to do with me.

Things published in the physical world are produced on presses (alliteration!) that can make a bazillion dots per inch. Even your everyday desktop inkjet printers can be a thousand times more precise than the computer screen, which can only work with pixels, nowhere near precise enough to produce the smooth lettering you're used to from print media.

So how we get around that is to have the jagged parts filled in with anti-aliasing.

Look at, for example:



You'd say that word was black on white, right? But if you look closely, you can easily see that there are actually lots of tiny gray dots shading around the outside of the letters, from darker to lighter. It becomes even easier to see when you look at that anti-aliased word next to another version of it made with anti-aliasing turned *off*--



-- the un-anti-aliased one (the "aliased" one? I'm not really sure where the word "anti-aliasing" came from, exactly) has no such shading pixels, and so looks jagged and inelegant. Really small fonts can often get away with no anti-aliasing, and in fact often look better with it off (you get to a point where there's more gray pixels than black...!); most of the computers I've known have had as their default setting no anti-aliasing for all text size 11 or smaller.

And since you're embracing your tech-grrl power & embarking on the fun and distracting ship of those who deal with graphics on the internet, I feel compelled to also talk about the differences between GIFs and JPGs, two different image-saving formats. Any decent image-manipulation program should give you the option of either format.

JPGs compress their data by dropping out detail from the picture, according to some mystical algorithm I've never understood. In the best of all worlds, the compression is not evident to the human eye, but the person who makes the picture can determine how much compression to use, and when something's been excessively compressed it's generally obvious to anybody, as you can see with this picture which has a tiny image size:



Here's a more reasonable version of that picture, still not too much bigger:



That's my little sister at a dance recital. Isn't she adorable? <dotes>

A JPG looks at every individual pixel and tells it what color to be.

A GIF, though, looks at things differently-- it's like, to borrow John's metaphor, if you're sitting in the passenger seat giving someone directions to your house. If you're on a long stretch of road broken by intersections, you don't say "Straight here, straight here, straight here, straight here, straight here, straight here, now turn right", do you? You'd say "Keep going straight until I tell you to turn," and, fifteen minutes later, you'd tell them to go right.

A GIF sees each left-to-right row of pixels as that sort of street-- if the first one is white, and the second one is white, and the third one is white, and so on until the fifteenth one, then it's just going to say "pixels one through fifteen are white, pixels sixteen through eighteen are blue, pixels nineteen through fifty are black, that's the end of the line". Therefore, GIF-formatting is going to favor an image with strong blocks of color, and not a lot of shading.

(Cont. in next post.)

Re: Okay, rabican got there first, but here:

[rliz.livejournal.com]

GIFs compress their data by dropping out colors successively-- the less colors used in your image, the flatter it looks, and the smaller the image size. Here's my little sister again, in various GIFs:



In the 41-color one, she's still not as smooth-looking as she was in the JPG, but it's approximate. In the 16-color one, she's even blockier; and in the 4-color one, she's been flattened to a ridiculous degree.

(Another thing to think about with GIFs is dithering. For those images, I turned dithering on, because without any dithering, even the 41-color option looks terrible (http://www.rebeccalizard.net/i/tpcalla41colorsnodither.gif), 'cause it's just unbroken blocks of color. Sometimes, though, I turn dithering off, like if I'm trying to save text or something similar and I don't want any kind of shading or dithering whatsoever.)

An image such as your incredibly charming mole desktop wallpaper ought naturally to be saved as a JPG, with its level of detail and delicate color shadings; graphics such as illustrations of country's flags, or blocks of text such as the ones I used right above in a demonstration of anti-aliasing ought to be saved as GIF. Your belladonna icon (http://www.rebeccalizard.net/i/tpbelladonaicjpg.jpg), for example, might look much cleaner (http://www.rebeccalizard.net/i/tpbelladonaicgif.gif) that way, not to mention being smaller in filesize. (Or, you might not see the difference between those two things-- I've been told I have a more sensitive eye to JPG compression than some other people (http://www.livejournal.com/users/_reema). Still, it's gonna load quicker.)

The image of my sister Calla dancing is one that obviously wants to be a JPG. I took a second image, one that could quite happily be a GIF, and saved it several different ways so that you could see the difference:

tpdetailjpg.jpg (http://www.rebeccalizard.net/i/tpdetailjpg.jpg)
tpdetailjpgvlow.jpg (http://www.rebeccalizard.net/i/tpdetailjpgvlow.jpg)

tpdetail256colors.gif (http://www.rebeccalizard.net/i/tpdetail256colors.gif)
tpdetail64colors.gif (http://www.rebeccalizard.net/i/tpdetail64colors.gif)
tpdetail8colors.gif (http://www.rebeccalizard.net/i/tpdetail8colors.gif)
tpdetail3colors.gif (http://www.rebeccalizard.net/i/tpdetail3colors.gif)

You can see that the 256-color GIF looks nearly exactly like the reasonably-compressed JPG version was (I made these examples a while ago, I don't remember exactly what degree of compression I had on-- probably around 60 or 50 percent), with nearly half the filesize. The low-JPG version is insufferably messy; the 3-color GIF is flat and sort of boring. You would probably choose the 64- or 8-color GIFs, in the end, as they're quite small while still managing to contain a decent degree of detail.

Somebody mentioned PNGs, and it's true PNGs reproduce beautifully both the delicate detail of JPGs and the crisp outlines of GIFs, but? They're enormous in file size, plus older browsers, without the right plugins, don't always know what to do with them. I wouldn't use them unless I had a gun held to my head.