- Home
- Archives
- Icons
- About
- Contact
Weblog Entry
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Icon Design: Sizing
February 21, 2007I’ve been thinking a lot about icon design lately. As a way to get the hang of writing on this site again after the post-WDN lull, I figure it might be interesting to share some of the things I’ve been discovering. All going well, I’ve got two or three more similar posts in mind.
One of the more deceptively time-consuming things you’ll do when creating an icon is producing out size variations. If you require a single icon in more than one size, the time you spend designing the first size is only about two thirds of the work you’ll end up doing; the other third lies in tweaking it for different dimensions.
Aha, you might say — that’s what vector graphics are good for. Why not just produce the icon in Illustrator or Fireworks and resize it the quick and painless way? Because vector graphics work best with sufficiently large resolutions; scaling between 20cm and 1m at 300dpi doesn’t really require much thought. When designing for the low-res pixel grid, it’s a whole different ball game. Vector doesn’t scale down to lower resolutions as gracefully as one might wish.
To help illustrate the problem, consider this example image. On the left is a large icon that needs to be scaled down. On the right are two possibilities, depending on whether the ‘Scale Strokes & Effects’ box is checked in Illustrator. The middle icon is clearly not an accurate version of the large icon, because the strokes have remained their large size while the rest of the proportions of the icon have been reduced. The right-hand icon is more true to the original, at a smaller size, so it would be a better choice.
But take a look at the strokes; they’re quite a bit thinner now at the small size. Because they’ve been scaled proportionately, their thickness decreases along with the size of the icon. With this particular example, this isn’t a problem. With a more detailed icon scaling to a smaller size, it is. The pixel is the smallest fundamental unit in an icon, and details that end up being smaller than a pixel cause a lot of problems.
Figure: Calendar icon suffers from pixel blur when scaling to smaller sizes.
In the above example, I’ve got a calendar icon with some fine detail. Each box within the calendar has a 1 pixel wide grey border. When this icon is scaled from its starting size of 32x32 pixels to 24x24 and then 16x16 pixels, those 1 pixel wide borders end up as half-pixel wide borders, and Illustrator has to figure out how to anti-alias them. There’s more explanation for why exactly this is so muddy, but I’ll leave that for a follow-up post. For now, you can directly observe the effect: if you scale detailed icons so that their smallest details are less than whole pixel values, you end up with a messy result.
The solution is to start with the reduced version, and tweak it at the individual pixel level. Make the details fit within the pixel grid, remove extra detail that’s causing blur, or even add extra detail if it helps you get to your end goal. Whatever it takes, the solution is to provide a critical eye to the problem and tweak until you get a result you’re happy with, which is why the size variations are so much extra work.
Figure: Calendar icon requires tweaks to scale gracefully.
In the calendar above, you’ll notice what I’ve tweaked the two different sizes so the inner boxes end up with whole pixel values on either side. To do this I’ve had to reduce the size of the boxes at 24x24, and actually create more boxes at 16x16. I couldn’t come up with a combination of 4 columns with a 1 pixel wide border that would fit within the space allotted at that smaller size, the only workable combination I found involved adding an extra column and dropping a row. The icon is a bit different than the 32x32 equivalent, but it’s clearly derived from the larger one and works as an acceptable size variation.
Next time I write about this topic, I’ll explain in a bit more detail the specific steps needed to produce variations and the challenges that go along with that. I wanted to set the stage first of all and describe why producing size variations was a necessity before I got into the mechanics of how you go about actually doing it. More soon.
Update: This article has been followed up with Icon Design: Anti-Aliasing.
1
Josh Williams says:
February 21, 15h
Nice to see some others noticing these things. We posted a similar blurb a while back. Vector images are nice, but they have their limitations. Custom resources generally must be created for each size.
www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php
2
cam c. says:
February 21, 15h
I was part of a project a few years back to do 250 Windows XP icons… we had to basically re-draw every single one at the smaller sizes, even though they were all done in vector to begin with… pretty sure the project was up around 2000 hours of work by the end!
With talk of Apple patenting resolution independent user interface technology, it’ll be interesting to see if they use some kind of pre-rendered bitmaps for smaller sizes of icons similar to the “hinting” in vector fonts…
3
RadiantMatrix says:
February 21, 15h
Thank you for making this point! I’m not a designer myself, but I have been a design *customer*, and it’s been frustrating when the talent I’ve hired doesn’t understand concepts like this.
Something I’ve learned over the years: understanding which bits of an icon (or logo, for that matter) are important to maintain saves a lot of work for the designer, and a lot of frustration for the client.
4
Tom G. says:
February 21, 16h
I’m also a icon designer and i done some of them for my friends (noncommercial). “Next time I write about this topic, I’ll explain in a bit more detail the specific steps needed to produce variations and the challenges that go along with that” It’s good that you will continue the topic I’m very interested in the designing icons, I hope with your help it’s not going to be that difficult. Thanks for great article. Greetings
5
baxter says:
February 21, 16h
Hey Dave, I enjoyed your post :) I’ve been dabbling in icon design for a while now, and I’m looking forward to your next post on the subject!
6
Leif says:
February 21, 16h
I don’t mean to troll here, but both sets of icons look the same to me on my monitor and with my set of eyes. Sure when you blow them up there’s an obvious difference, but when at their native sizes they look identical.
7
tre says:
February 21, 17h
leif,
i don’t think it’s trolling if you don’t see the difference. you just don’t happen to see the difference, that’s all.
for me – especially the smallest icon, it does look blurry at 100%.
where the real difference will become even more apparent are for those viewing these icons on a screen that’s not high resolution – say, 800x600 (dare i say even 640x480 - or blown up on a projector) – they’d look hideous (or even possibly like mistakes).
the second set dave produced is definitely crisper and displays as intended.
8
Dan Cederholm says:
February 21, 18h
Nice write-up, Dave. I actually find it easier to start with the smallest version first because of the stuff you describe. Then I’ll blow that up using “Nearest Neighbor” to get a base to start with for the larger sizes. Then tweak from there.
9
Dan Mall says:
February 21, 20h
Iconfactory’s IconBuilder (iconfactory.com/software/iconbuilder/) does a similar thing, except with varying bit rates. Dave, do you have any experience with using it, and, if so, the various results in combining it with the method you described above?
10
[bo] says:
February 21, 23h
Just like Leif, the two Calendar sets look the same on my old 21” Dell Trinitron… Nevertheless, I’m for this kind of attitude towards details.
11
Stijn De Lathouwer says:
February 22, 01h
Nice article. When designing icons, I start in Illustrator. Then in Photoshop, I use Iconbuilder to generate the different sizes.
From there on, I start tweaking.
Sometimes, for the really small version (that mostly appears in column view on mac), I draw a complete new Icon, more old OS9 style.
12
Maarten ter Braak says:
February 22, 02h
I recently decided to learn more about designing icons, the first step, coming up with the metaphores and things I wanted the icon to represent was rather easy once I got the hang of it.
But this article perfectly nails the kind of problems I got to deal with when going to screen, especially with the calendar where details were scrapped to provide a clearer icon. Too much detail on such small icons results in a mess, I noticed that after 4 icons, 2 days and then after reflection on the third day still I wasnt satisfied with 3 out of the 4 I made.
13
Jorn van Dijk says:
February 22, 02h
Very good introduction to a problematic isuse in icon design. Don’t think that resolution independence will change anything on this topic.
I’m writing a thesis about icons, it’s called: the identity crisis of an interpreter. This is more about the role of icons in the user interface. It describes how the icon became what it is and how it has changed through the years (very little). Your article is an practical but interesting topic, so thanks for the inspiration ;)
14
Nick Husher says:
February 22, 06h
This is an interesting companion to the Boxes and Arrows essay on Icon Analysis (which I may or may not have found here. Hmm…). Designing icons is like olympic skiing, those who do it well make it look easy.
www.boxesandarrows.com/view/icon_analysis
I can’t wait to read the next installment.
15
Peter says:
February 22, 10h
But any skilled designer must not use strokes in Illustrator anyway. Never. In design/thinking phase yes, they are easy to play with, but final version must be “flatten” (or Expand in Illustrator terms).
16
Rupak Ganguly says:
February 22, 10h
I have been struggling with the same issues, but you are right to point out that starting with the reduced/smallest size makes it more manageable. I have also started to use vector graphics more due to the ease of sizing. Good article. Keep the good work.
Thanks,
Rupak Ganguly
developershelf.blogspot.com
17
Dave S. says:
February 22, 11h
@Josh - “Nice to see some others noticing these things. We posted a similar blurb a while back.”
I must have read that, and it totally escaped my mind that you had posted it. Great stuff.
@Cam C - “With talk of Apple patenting resolution independent user interface technology, it’ll be interesting to see if they use some kind of pre-rendered bitmaps for smaller sizes of icons similar to the “hinting” in vector fonts…”
They already do. Apple’s OS icons go up to 128x128, but the better-designed ones have variations at specific sizes.
Interesting use of the word “hinting” too, that’s exactly what I’ve called it in the past. More in the follow-up post.
@Leif - “both sets of icons look the same to me on my monitor and with my set of eyes.”
Fair enough, they may to some people. But I’d never personally use the “bad” example in production work, it’s clearly wrong to my eyes.
@Dan Mall - “Dave, do you have any experience with using [Iconbuilder], and, if so, the various results in combining it with the method you described above?”
Not yet. It’s on my wish list though, I’ll probably be picking it up very soon. From my understanding, it’s not going to do the work for you, it’s just going to give you the frameworks and let you figure out how to fill them.
@Jorn - “Don’t think that resolution independence will change anything on this topic.”
Agreed.
@Peter - “But any skilled designer must not use strokes in Illustrator anyway. Never. In design/thinking phase yes, they are easy to play with, but final version must be “flatten” (or Expand in Illustrator terms).”
Says who? I don’t agree. In fact, with icons where I’ve created the strokes manually, I wished I had used Illustrator’s strokes instead.
18
Nate Bundy says:
February 22, 13h
@Leif - “both sets of icons look the same to me on my monitor and with my set of eyes.”
It will be hard to see the difference in this case unless you have a pretty accurate monitor.
I’m not a brilliant graphic designer by any means (I’d like to think I do better than “crappy programmer art” though), but I had to make some icons for some open-source software I’m a part of. On the 15” eMachine CRT (which tended to blur pixels together a bit) I had to borrow from a friend when my CRT busted, you couldn’t even tell what the small versions of my icons really looked like, let alone tell the difference between a big version shrunk down and one made by hand (unless they were blown up quite a bit, that is). I have a feeling some using larger (say, 19-21”+) lower quality or budget CRTs (and possibly LCDs) will have the same kind of blurring effect that will completely negate the crispness of the second set of icons. The colors and shapes are both generally the same. It’s really the “crispness” that make them stand apart.
When I finally got my nice new LCD, the sets of icons I’d made were a night and day difference, and it’s exactly the same case with the icons Dave created. Then again, I am a perfectionist. =P
19
Peter says:
February 22, 13h
Stroke is effect, while bezier path is not. Effect is fragile, because it can be translated differently in different programs. And it will be, sooner or later. Don’t start me talking about Corel.
What I really mean’t is that the final step before you hand over your vectors to the client, all strokes (+ some lot of other things) must be gone - expanded. Or before you start agressively scale things up and down. Strokes scale badly, regardless whatever options you use.
20
Denis says:
February 22, 15h
What can I say except, “great!”? It’s really great that this problem is pointed to. Looking forward to reading the next article, Dave. I’m sure I will find out something I don’t know yet ;)
21
jamjammo says:
February 23, 08h
It’s quite refreshing when someone writes about HOW TO, without actually writing about HOW TO DO X IN [application].
With little mention of Illustrator and Fireworks, anyone can use these ideas to better their work.
BRAVO!
22
Joel says:
February 23, 09h
I agree with Peter on this one, I use both Freehand and Illustrator, and strokes simply aren’t reliable. Sure I use strokes when building an image, but when I’ve got it nailed down, I “expand strokes” to get rid of them, which allows me to transport the graphic to any other program and resize without having to worry about stroke width changing on me. For me, the peace of mind outweighs the flexibility of strokes.
23
Taras says:
February 24, 12h
Nice article that points to real problem while designing icons. It’s a pain when customer wants to see all mockups in all sizes. That’s why we provide mockups in one size, and then make all sizes only after mockup is approved.
24
Kalvin says:
February 26, 03h
I was surprised to see that people were having trouble seeing the difference, even on CRTs– I’m on a laptop LCD (MBP) and the difference is night and day. The first one is far fuzzier and uglier than the second.
Interesting post!
25
Jonathan Nicol says:
February 26, 03h
It doesn’t surprise me to read that many of people who can’t see a difference are using CRT’s. An LCD monitor will give pixel art a far crisper appearance.
Thanks for the article Dave. It’s a while since I last designer an icon (unless a favicon counts!), but I know the hard work that has to go into tweaking icons for small sizes. I like Cam C’s idea of hinting for icons, in the same way fonts can be hinted to display well at low resolutions.
26
Brenda says:
February 28, 04h
Thoroughly enjoyed this article. The struggle with icons has always been in the “fool the eye” details. I’ve been designing icons since back when they were only 16 colors. Back when a big designing problem was to make the few colors you had fool the eye into seeing more than there was. Or at least in making them work for you to “carve out” the design you were trying to achieve.
I do tiny mobile game graphics now, and the same principle applies… rarely (if ever) can you merely “resize” a small image and end up with anything other than a tiny pile of pixel dust. You start off “touching up” the mess, and by the time you are finished, you realize you could have actually saved time just doing it by hand, one pixel at a time.
On a side note, there are also some individual programs that, even on a sharp screened LCD laptop, will turn small, crisp detailed images into mush. MS Word, for one.
27
Veerle Pieters says:
March 02, 05h
Good article :) I start in Illustrator for the bigger versions and switch to Photoshop to tweak pixels in the smaller versions, the 16 x 16 version especially and the 24 x 24. So I normally don’t work from small to big actually. I just try to keep in mind I need to create smaller versions as well (in terms of details). Although your approach makes totally sense. For me it depends a lot on the the shape of the icon wether I choose to go for Illustrator or Photoshop. It also depends on what the biggest size is, but if it’s an application icon I definitely go for Illustrator. The calendar icon has all straight lines so I think I would do this one entirely in Photoshop (with the pen tool). If this icon is needed for print or in a bigger version later on it’s easy to redraw this type of icon in Illustrator.
28
Stuart McCoy says:
March 15, 08h
There are a couple things you can do to make working on icons in Illustrator much easier. FIrst, use the grid and snap to grid settings. Set your grid to something like every 16pts and 16 subdivisions. Turn the grid off if it gets distracting, it’s an easy keyboard shortcut to remember in Illustrator. Second, create construction grids on their own layer for the different size icons you’ll need. Check your icons design at different sizes against these virtual boxes to see if you need to rethink parts of your overall design. Lastly, use Pixel Preview. Again, it’s a fairly easy keyboard shortcut to remember so turning it on and off if it gets too distracting is easy but remember to view in this mode frequently if yo do turn it off. While your calendar example is still best done in Photoshop, icons such as those used by Apple or Windows XP can be done in Illustrator more easily and with crisper results.
29
Carmen Rodriguez says:
March 18, 10h
Sorry if my question is naive, but which is the reason of not using Photoshop to create icons? I’ve design two of them with this software and they seem alright. (I can save files with extension .ico with PS). Thanks for your answer.
30
Michel says:
March 23, 13h
Interesting article!
Looks like you and Dan Cederholm have a lot to say about icons ;-)
Will wait with great interest the follow-up:)
31
Ian says:
March 30, 05h
I’ve tried to get around it with ‘free’ programs and ‘paid for’ programs, but in the end, you have to do it pixel by pixel if you want it to look right.
In the end, I always end up in photoshop.
If you keep it in mind from the start you can design a site/program with certain elements that are ideal to turn into icons. After that its just convincing the customer.
Good article!
32
Thomas says:
March 30, 12h
I know I’m a bit late on the uptake but I thought I’d mention that this is a great idea to do a series on. I’m only called on to make icons occasionally so I don’t have much trial and error experience to have figured out all the details like this yet. I’d love to see more on the challenges involved.
Thanks.
33
Meh says:
April 05, 11h
You’re pointing out problems in SVG, not vector graphics as a whole. You also repeatedly attribute certain tasks to the SVG editor throughout the article which the editor has absolutely no control over.
34
Dave S. says:
April 05, 11h
“You’re pointing out problems in SVG, not vector graphics as a whole. You also repeatedly attribute certain tasks to the SVG editor throughout the article which the editor has absolutely no control over.”
You clearly have no idea what you’re talking about. There’s absolutely no reference to SVG in this article, explicit or implied. File format is completely irrelevant to this discussion.
35
Wolf says:
April 08, 12h
So is designing icons in Vector programs the standard nowadays? I can imagine it being easier in Photoshop for me personally; that is when designing a set with max 32x32 icon resolution.