I was a bit surprised by this lesson, partly as it was merged with a lesson on how to SAVE FILES by type. I mean, I can see WHY it’s included there, as GIFs are a format that you need when saving as OR exporting to that format. But the real point isn’t exactly the format save so much as the way it works.

GIFs

I already knew about transparent GIFs, of course, as I have done lots of conversions of existing file formats back and forth, even some cropping in other programs in order to create just a simple outline of an object and then to basically “add” it on top of some other background. I also have some clip art that comes with transparent backgrounds, although some of them are grouped as TRANSPARENT – WHITE and TRANSPARENT – BLACK even though the foregrounds were neither and the backgrounds were transparent / no colour. I never really understood the wording, and naively thought they were suggesting “these colours look better on dark backgrounds or light backgrounds”. Nope, although it is related.

The lesson I was looking at tonight was about adding an outline to an image or text so that, if for example, I’m going to eventually show it on a black background, I save it with a black outline around the image. I’ve never done that before, I thought it was better to save with NO outline, then nothing would show, and I could show it on ANY background. Which can be done of course. Except that if I have, say, a small graphic of a dog, and the dog is yellow, then when I put it on a black background, the image will show a transition from (a) a yellow image to (b) a black background. In a sense, it seems almost like that’s a double transition or more accurately, a double strength transition at exactly the same point. If on the other hand, I put a black background around the dog, the transition is more gradual:

a. Yellow dog transitions to black outline colour within the same image;
b. Black outline transitions to black background image.

A two-step transition that takes place at two different points. I had noticed a few times that the transition from “no-border” to background was a bit fuzzy at the edges, didn’t seem quite seamless, so the lesson here is to decide what background it will have and make THAT the border colour too, rather than assuming I’ll decide the background colour later. It was a very tiny “ah-hah!” moment, but a moment nevertheless. It basically makes the image blend more seamlessly with the background. And I’ll need to remember that part of it is that with a outside border, it’s easier for the software to give it harder/more defined lines too.

I could then optimize and flatten the image for the web, and voila!

I know, not exactly life-affirming. The tutorial had me merging layers (although there weren’t any), flattening the image (to look better on the web), and exporting.

Optimizing

I liked however some other tips and tricks it mentioned around optimizing for the size of the file.

1. GIFs work well for simple colours and graphics;
2. GIFs are generally better than JPGs for text, which is an interesting thought to remember, as JPGs tend to come out fuzzy (Yes! I’ve noticed that! I thought it was my lousy text rendering!); and,
3. GIFs are quite small, about 10K for the above image, although an optimized JPEG wouldn’t have been much different, given the type of image — for a photo, a JPEG would be smaller than a GIF.

The tutorial also suggested other ways of optimizing including changing the overall canvas size (IMAGE / CANVAS SIZE), cropping (TOOL choice), or SHARPENING (SELECT / SHARPEN), particularly for photos.

What I learned today

I like finally understanding the purpose of the different coloured outlines, particularly around text, on transparent images. And the optimization tips are not bad, although I’ll have to use them a few times to get my head around it completely.