Geek in the Park

Transcript

Jon Hicks:

What I’m going to talk about tonight, because I was given free range by trovster to really talk about whatever I like. The thing I always want to talk about when I do conferences and things is icon design. But, because everyone is kind of very web-specific, I never get the chance. So, tonight, I’m going to bore you rigid with the whole icon-design thing.

I’m going to split it up into three bits. We’ve got a theory bit, a bit of a techie bit, and then a practical bit that’s actually creating icons.

So, when we’re talking about icons, what kinds are we actually going to be looking at tonight? Well, the one I’m sure that everyone here has actually done at some point is favicons. Yeah? Everyone, at some point, had to create a favicon. Maybe, they’ve had to do it by taking a GIF, renaming it .ICO and putting it up on a server.

[laughter]

Jon:

But, to be honest, I think the favicon... Who calls i “fa-vic-on,” by the way?

[audience murmurs]

Jon:

Does anyone know the real? Because it’s favorite, isn’t it? I don’t know.

Doing a favicon is kind of like the ultimate icon-design art. It’s always a good test if you’re doing a logo. If you can make it work at 16 pixels for a favicon, then you’re onto a winner. One of my favorites is this one...

[laughter]

Jon:

The looming head of Jeremy Keith looking at you.

One of the other forms of icons that we’re doing at the moment is website icons. More and more websites are starting to use icons without any kind of caption or text. A good example is MobileMe, which has these sections where it’s only separated by icon. When you hover over it, you get a tooltip, but the icon is showing you where to go.

Another good example of website icons at the moment is Last.fm. In some ways, they’re actually quite subtle, so little ones for tags and for adding and playing music, and also the music-player section. These are good examples of website icons.

But, the ones that we’re going to be looking at the most tonight are actually desktop icons, so application and software icons. The reason for this is that if you look at the process for creating a desktop icon, it kind of encompasses all the other things like website icons and favicons and everything. But, there’s a little bit more to creating a desktop icon, so by covering that, hopefully we’ll be able to see everything.

Incidentally, one thing I love about icons now is that we’re getting larger and larger sizes. So, you get great detail. And if everyone can see this great childish comment...

[laughter]

Jon:

"IE sucks!” But, that’s the kind of thing you can just add in, as a little Easter egg almost.

So, the first part of creating an icon is coming up with a metaphor. What do you use? Now, I wanted to start off with a little experiment. Everyone’s had a few beers and hopefully has a good voice. I’m going to quickly show a common public icon that you’ll know from everyday. But, it’s the speed of the response that I want to get. So, when I show this to you, you say what it’s for, as loud as you can, as quickly as you can. Is everyone ready?

[audience affirms]

Jon:

Ready?

Audience Members:

[together] Toilets.

Audience Member:

Washroom.

[laughter]

Jon:

Who brought the American? [laughs] That was pretty good. I was expecting a lav or bog or something, but everyone was,“Toilets!"

[laughter]

Jon:

It’s funny, isn’t it? Because these icons could actually mean anything. I mean, look at it. You’ve got the man in a sort of aggressive pose, the woman in quite a passive pose. Who knows what that could mean. But, we all know, by convention, that these things mea “toilets."

To take that example a bit further, there was recently a study that was taken of variations in these public icons. So, what they did, they tested four different variations. They tested men and women to see how quickly they reacted to what would have been the right one.

So, taking the phone icon as the first example. Over on the left there, A, got a bit of recognition. It’s still an old telephone, but it still got recognition. B was the worst, because it just looks a bit kind of, I don’t know - it reminded me of an afro with a big, screaming mouth.

[laughter]

Jon:

That’s probably why it only got one. Yes, one person recognizes a phone.

The interesting one here is C and D, because they’re practically the same. But, for some reason, men recognize this one more as being a phone. But, it just goes to show you that the more you fiddle with it, the harder it is.

Here’s another example. Information. Now, here’s a clear winner on this one. A block-seri “I” in a circle. Instantly recognizable. And that’s internationally recognized as well. A lot of languages’ information start with an I, which is quite good. So, things like this great one here of a man with a briefcase and question mark and everything. And I’m not quite sure what’s going on down beneath the seat here...

[laughter]

Jon:

This one’s great. It’s just kind of... [sputters]

[laughter]

Jon:

And surprisingly, A got a few marks because, question, it suggests that someone needs help. But, that’s one instance where an actual letter worked really well.

Going back to our toilet.“WC” got a little bit, but this is less international. One good example, I think, is the Firefox logo. Sorry. [laughs]

[laughter]

Jon:

[sputters]

[laughter]

Jon:

I won’t bring it up again. It’s all right. [laughs] The globe behind it has no actual countries. People often point this out and say,“What country is that supposed to be?” The whole point is that you don’t recognize any country, so you don’t say,“Oh, that’s too Europe, Pacific, or US-centric."

So, going back to this. The classic, as we just showed at the start, was recognized by both people equally. This one being a bit too realistic.

This one’s fantastic. You can see they’re trying to do here some kind of Marylin Monroe,“Some Like it Hot” thing. But, she ends up looking like a pin. And I think the lack of arms makes a big difference. So, this had just the right balance of simplicity, but not to the extent of removing limbs. So, conventions are good. Conventions help us recognize things.

Here’s a good example that we’ll, I’m sure, remember of life before conventions. RSS. Any site that had an RSS feed. I have some great ones, like a coffee cup, a pill...

[laughter]

Jon:

I mean, what the [laughs] hell is that about? And another version of it there. But, generally, it was all kind of XML and RSS with orange. Until, there was an early version of Firefox that included this little...

[laughter]

Jon:

It wasn’t me! [laughs] I’ll just mention Opera a few times, just to... Opera! There we go.

All right. An early version of Firefox included this little icon. And it started to take a little bit of traction. And then, suddenly, Microsoft adopted it, and of course, because Microsoft adopted it, suddenly it was everywhere. There’s still a few people, like Apple, that hold out and like to have the little white RSS on blue. But, now we have a standard. And even if that’s put in a different shape, we’ve got this recognizable symbol for RSS, which is great.

So, when thinking of the metaphor, keep it simple and memorable. If there is a convention, consider following it. And we’ll talk a bit later about why you would not follow it.

Don’t be too abstract. If it’s meant to be a home icon, something that directs a user to the home page or the home of an application, then make it a picture of a home, rather than showing someone on their journey home or something.

So, here’s a few without conventions. This is an icon for a nursery which is near my office. So, it’s supposed to be a child carrying a teddy bear, which, to me, just looks like a parent dragging a child to nursery who’s screaming their head off, with Princess Leia haircut.

[laughter]

Jon:

This one, no ambiguity at all. I mean, they had to put a lot of detail in there, such as the splash of water. The child doesn’t look too bothered, but that’s very obvious. Don’t feed your daughter to the crocodiles.

[laughter]

Jon:

This one, I picked this up from a Flickr pool, and I have no idea...

[audience member speaks]

Jon:

What’s it mean?

Audience Member:

Do not play the trumpet. [laughs]

Jon:

Yeah. I thought it was lik “Disabled people: do not blow your own trumpet” or something like that. But, it’s who knows. But, then there are some that are just...

[laughter]

Jon:

We just have fun guessing, really.

So, taking a real brief, I did an icon for an application called Path Finder, which is a Mac application to replace the Finder. So, the basic brief was: something that shows you where to go. And there were a few options here.

So, one was a compass, fairly self-explanatory, and a map. Roadsigns have been used quite a lot. There are certainly at least two other Mac applications that both use roadsigns. So, in that case, it was a case of,“Well, I don’t want to go down that route to look two the same."

A little bit more obscure. This little buggy that comes in the Mars lander is called Pathfinder. It would have created a nice little fun icon, but I think it probably was a little bit too obscure for the actual subject. So, instead, we went with the compass.

And this is actually one example of where it was a good idea to go against some conventions. So, rather than just an arrow, it’s something that hasn’t been used so far for an application icon. Also, it works quite well as a 16-pixel icon. So, when you see it in the menu bar or in a list, it’s a bit fuzzy here, but you’ll just get the basic dial. So, it’s just an image that will work well small.

Also, I think, one of the best things to do with the metaphor is to make it fun, if you can, specifically for application icons - so, where you haven’t got to navigate someone, like a home icon. These applications could have been very dull. I mean, this is FTP. This just deletes programs from your Mac. So, what they did instead was to make it bright, colorful, fun, and it makes it instantly memorable.

So, that’s the theory bit. We talked a little bit about the metaphor and the conventions, but we’ve got to go a little bit into the technical side of icons.

If you cut open a desktop icon, this is what you’ll find inside. This is a quite extreme example. But, the Miro icon has a 512-pixel version, 256, all the way down to a 16-pixel version. Now, some platforms use different sizes; other platforms use others. So, this is covering all different bases.

And here is a lovely chart for you all to memorize and you’ll be tested on later. But, this will be part of the slide, so you’ll be able to look at it.

But, basically, what this shows is what platform uses what size. So, each of these is called an icon resource. So, for example, for the latest Mac, you need the three, top, large icons: a 16 and a 32. Depending on when you see it, you only see a 512-pixel icon when you’re doing the fancy Cover Flow flippy bit. And you only see the 16 when you’re looking at in like a list view, like a column view, that kind of thing. And you’ll probably have the 128-pixel version when you’re looking at it in the dock. But, all these different uses need a different-size version of the icon.

Now, what I want to draw attention to at the moment is Linux. Do we have any Linux users? [laughs] For the one Linux user in the room, Linux can use SVG, Scalable Vector Graphics, to create an icon that can be expanded and reduced to any size. So, that’s very clever, and that’s the only one that does it. All the rest use these formats, ICO and icons, which are just bitmap formats. So, they’re just pixels.

If you spend a lot of time creating favicons, which you might not do, then this link is a very essential one. This is a guy who’s spent a lot of time researching the effects of different favicons in different browsers, because they all have their own little quirks and ways that they do it, because for some browsers, you can actually get a 32-pixel, so a larger-size favicon. So, worth a look if you’re really into that kind of thing.

So, why do we need all these different sizes? Well, one reason, which is going to come up in the future, is resolution-independence. At the moment, we have our screens - like, for example, my Mac screen, I think it’s 1440 x 900 pixels, and it’s 72 dots-per-inch. In the future, we’re going to get much more higher-density screens, and bigger screens. And if you compare that to what we started off on, say 640 x 480, then your icons are going to have really adapt quite hard. And the problem with bitmaps is, of course, they don’t scale up.

This is a little 32-pixel one from the Classic Mac interface, which, once it’s been smoothed and blown up, doesn’t work.

So, the obvious way to do this is to use a vector file, like SVG. And this is what Coda have done. This is Panic’s Coda software. They’ve got these little icons down here in the status bar. These are actually PDFs, because a PDF can hold vector information. A tiny little PDF file, which I’ve actually enlarged a lot here to show you, can actually create an icon that can be expanded as large as it needs to be, without any kind of breakdown of the information.

Unfortunately, it only really works for these sort of icons. They have flat colors, there’s no detail, and simple shapes.

The problem is, they don’t really work for today’s kind of photo-realistic icons. First of all, they’re the opposite of bitmaps. The more that they’re reduced, the fuzzier they get. If you imagine you’ve got eight pixels in a large icon and you reduce that to become one pixel, what you’re getting is a fuzzy average of all those eight pixels.

They’re also a lot bigger. So, if you compare something like - this is the CandyBar application for the Mac - 100K for a bitmap icon, versus three megabytes for the vector version. And also, bitmaps are a lot quicker for GPUs to process and display.

So, here’s a good example. Here’s the xScope icon. Here’s either the 128 or the 512-enlarged, and this is a closeup of the 16-pixel version. This has been created specifically for 16 pixels. So, someone’s actually done these crisp lines, made sure that, at a distance, that looks really crisp.

Now, if you take that large one, reduce it down to 16 pixels, that’s what you get. And you can see quite a big difference, especially in here. It’s all gone fuzzy. There’s no definition. You haven’t got the same. There’s a little bit of strength in the lines here, but you’ve lost it here and here. And it just looks worse. You can’t beat a 16-pixel icon that’s been specifically created as a bitmap.

So, the solution, for now at least, is to create your icons initially huge - sometimes two or eight times the size - but do them as a big vector. And hopefully, sometime in the future, there will be some kind of technology that’ll get around all these problems.

So, done the theory, done the techie. Finally, got the how-you-make-it bit. And the example I’m going to use is Silverback, which is an application that’s just come out for guerrilla usability testing. I have to stress that because that explains what the whole icon’s about.

So, very first of all, I didn’t have to do much in the way of thinking for this icon. Clearleft already had an idea, which was a gorilla in a lab coat, which I thought was genius.

So, the next stage is to go to Google Images and research the subject. So, I collected lots of images of gorillas - not just photos, but caricatures, the famous Gorillaz one - just to try and see and get used to the subject. And that’s what this stage was for.

Pretty crappy doodles, but the whole point of it was to keep on drawing it and drawing it and get used to the features of a gorilla. This one looks a little bit better than some of these ones. I mean, that one’s [laughs] really appalling.

[laughter]

Jon:

But, the more you draw it, the better you get at doing it and the more you realize what the features are. So, things like, I started to realize I could be able to define the eyes in this sort of skateboard fashion. So, a line with these two dots underneath. So, the more I draw it, the better it got.

So, that was the first sketch that we sent to the client. Couple of different options, but as a way of helping them to see what it would look like, because at the moment, this is just a black-and-white, scanned-in sketch. And so you can actually put this into Photoshop, set this as a layer above everything else, set it to multiply so that all the white drops out, and then you can just quickly add a bit of color on a layer underneath it, and it just gives the client a little bit of a better idea of what’s going to happen. So, two minutes just to quickly colour it up.

The feeling from this stage was that it’s a little bit too realistic, and they wanted something a bit more caricatured. So, eventually, we came up with this sketch, which exaggerated the whole kind of breasts and head and made everything below really small. And that worked.

So, once we’ve got an approved sketch like this, we can move on and do the very basic Illustrator stage.

There are lots of vector applications that you can use to create an icon in. Illustrator, though, is particularly good in that, if you need to use it for something else afterwards, such as a logo or print materials, when they come back to you and say,“We want it as a banner 15-foot high,” and you’ve got it as a bitmap in Photoshop, it’s a little bit hard. But, at least, with Illustrator, you can repurpose it easily for other things.

In terms of actual drawing tools, I prefer Fireworks. It’s much easier to get pixel-perfect, crisp icons. Illustrator is a bit fuzzy like that. But, Illustrator’s better for using it for other things. So, save yourself the worry and create it in something like Illustrator afterwards.

So, what I’ve done here, the sketch has been scanned in. It was put into Illustrator. And then, just very basic shapes tracing around it. And it’s got very basic gradients as well. Not that complicated, because once you’ve got the gradient for one, that same gradient’s being used up here. So, you have a gradient that goes from very dark to very light, so as you get closer towards the top of the head, you’re showing the lighter side of the gradient. And again, a bit like the colored sketches, it’s something a bit more to show a client.

And then, the first final icon. This is the stage where everyone goes,“Mmm, great.” Then, it goes away, and other people look at it for a while. And they come back and they say,“This bit here looks a bit phallic, doesn’t it?"

[laughter]

Jon:

And because you’ve been close to it all that time, you’ve not seen it. And then, all of a sudden, all you can see is this. [laughs]

So, another problem is the fact that this didn’t look much like a lab coat - too short. It looks like one of those white dinner jackets. So, the final tweaks were to bring the lab coat down, and suddenly this area isn’t quite so bad. It’s the kind of thing that usually someone points out long after, but fortunately we had the chance to go back and correct that.

So, hurray. Final approved icon. This is the large icon. So, the next stage is to go and create all the little smaller versions.

Now, because I knew it was going to be Mac-only, I could leave out the 24 and the 48. That’s for Windows-only. Incidentally, you can also see here how it’s been set out. I have a layer for the face, the head, the clipboard in the hand, this separate one, the coat and the body. It makes it much easier. If I need to enlarge the head, all I have to do is lock all these other layers and grab everything in the head layer. So, it just helps to separate it out.

So, starting with that one, half-size for that one, half again for that one. And by the time you get to this one, you have to start tweaking it, start removing some detail, until you get down to that size, which especially on this screen looks awful, but little things like bringing out the reflection in the eyes, a little white highlight, so that it looks crisper at a smaller size.

So, we’re almost there. We’ve created all our different versions. All we need to do now is to create that icons file format. And this is what we do it in: IconBuilder. This is a plug-in for Photoshop. So, once you’ve imported the AI file into Photoshop, you can just go to a filter, straight to IconBuilder, and it will build all the different icon resources for you from your file.

Now, one thing it’s got that I’ve shown here is a bit of an old problem, so I don’t really want to cover it. But, as well as having the 32-bit icon, you’ll have 8, 4, or 1-bit, and by the time you get down to 1-bit, it’s just black and white. There’s no grayscale. There’s no blends. It’s either black or it’s white.

And this is really for covering older monitors. So, it used to be a problem. You used to have to create all these different-colored versions for older icons, but nowadays, everyone’s pretty much got good screens, thousands of colors, so you don’t really have to worry about that. I tend to leave that.

And when you pres “save,” you’re done, and you’ve got your final icon ready.

So, just to cover some tips, really, for drawing icons. Veerle does a fantastic blog with lots of Illustrator tutorials, and that’s a very good place to learn general kind of drawing skills.

But, just a few specific things that are useful for icons. The first one is consistent lighting. If you look, there’s a page on the web - I’ll try and put a link out for it - for the Ubuntu project. A guy called David Lanham, really good designer, recently redid them all. And when you see them all laid out, you can see how he’s used consistent lighting on every object, usually from the top-left, which is why the shadow comes on the bottom. And it just adds that little extra consistent feel to every icon that you do. And this is something that the Windows Vista icons show really well.

This is a bit more of a style thing, but it does work. If you’ve got the small icons - again, sort of 16 pixels, particularly good if you’re doing website icons - that looks fairly crisp. But, just adding a bit of a white - I think this is a bit of a 50-percent white - border on the inside, it helps to highlight the edge and makes it look a bit crisper. I mean, this is enlarged huge, but when you see it at 16 pixels, it just has that little bit of extra crispness that makes it.

Smart Guides. Now, I tried to get a good photo of this. And I think, you can kind of see it there. But, basically, Illustrator has this thing called Smart Guides where, if you’re drawing an object and you want to get, say, three or four points to meet at exactly the same point, if you turn on Smart Guides, it’s like a magnet. It’ll happen automatically. If you try and do it without that, it’s always a little bit hit-or-miss. And when you enlarge the artwork, it really shows the gaps.

So, Smart Guides just helps you to bring everything in the right place, and it also gives you guides as you’re moving things to make sure things are central or on a 45-degree angle.

Oh, yeah. Sorry. [laughs]

[laughter]

Jon:

Look, it’s the Opera red! [laughs]

[laughter]

Jon:

Global colors. Again, this is another Illustrator setting. What I usually do for icons is to specify a mid-color, a light, and a dark of something. So, for a thing like the fur, I’ve got these specific colors, and they’re set to be global. And what that means is, when the client comes back and says,“Well, we want it a bit more red than orange,” I can go and tweak it in here. And once I’ve tweaked it, it’ll update all the instances I’ve used in the illustration. That’s a real time-saver.

Now, then... [laughs]

[laughter]

Audience Member:

Great!

Jon:

I wanted to throw this at the end. I didn’t know that Mark was going to be here today. What I was going to say is, if you can’t be bothered to do icons, [laughs] there’s this fantastic website called famfamfam.com. My friend John Oxton uses them constantly in projects.

It’s an amazing collection of icons. It really is. And if you wanted to just dissect icons, because these are really good examples for small, 16-pixel icons, go and have a look, go and download some stuff. And donate if you use them, of course. Is that all right? [laughs] Go get a beer now.

But yeah, it’s definitely worth mentioning because there are so many icon sites out there, like IconBuffet, where you have to pay to get the icons. This is a bigger collection, and it’s free, and it’s brilliant.

I just wanted to finish off with one little section on the applications that you use. Now, we’ve already covered Illustrator and IconBuilder. That’s what I use. But, there are other ones out there. For example, if you’re on Windows, this Axialis IconWorkshop, from this screenshot, looks a bit complicated and confused, but it’s actually really good. And if you’re developing on Windows, you can create Mac icons in this.

If you really get into icon design, and you start collecting them and start making your own, CandyBar is a fantastic application because it organizes your icons and you can use it to customize your desktop really easily. In particular, you can create these things called iContainers, which, when put into CandyBar, you can choose the background color you see them at and the size. It neatly packages them for other people to use.

And in particular, it has this feature, the Quick Look. So, if you want to look at the icon resources in an application, particularly I find this useful to know how they did something. If I think an icon’s particularly good, I want to try and dissect it and look at it really large and see how they did it. So, something like this is fantastic for that.

But, there are also free tools as well. If you do use Linux, or you wanted to use open source, then Inkscape is a really good vector application. But, if all you’re ever doing is doing favicons and things like that, then there’s a good online one called favikon.com. Or there’s free downloadable tools like PNG2ICO, which just takes a transparent PNG and creates the file at the end of it.

So, that’s everything, really. That’s the introduction. So, all the links I’ve mentioned are going to be on this, del.icio.us, at Jon Hicks’ Icon Design Talk. Any questions?