When I learned graphics from a typsetter it went a bit like this:
First lesson: A white A4 paper and one black square of fixed size. You are allowed to move and rotate. Afterwards you have to explain your compositions.
Second lesson: you are allowed to scale the black square now.
Third lesson: two squares
Fourth lesson: three squares, colors are allowed now
Fifth lesson: Circles are allowed now
Etc.
We talked about fonts and type only a year in, but the stuff I learned in the first five lessons was peobably the most valuable stuff I learned about graphics ever.
That's similar to my experience, it seems so trivial when you describe it to people, but it's ridiculously useful.
Just a recommendation for anyone reading the comments & wants this kind of base level knowledge, Visual Grammar by Christian Leborg is this, basically, it's an excellent book, can normally get it dirt cheap off Amazon or wherever but link from publishers:
Its not groundbreaking, it's just a condensed package of foundational knowledge that you'd be expected to understand implicitly. It's just a nice overview, all in one short book, that's all. It's a different category of thing.
The article is a technical overview of the way a single designer creates icons with a specific tool. The book isn't practical tips [well it is, but not at all the same]
If you're not interested in designing and just want to, say, add some icons to a set and call it a day, then that's fine
It's just, if you want to actually get very good at...anything I guess, there are base level skills and knowledge that you have to be able to unconsciously apply.
eg for a similar field, when learning to draw, you need to understand perspective, composition, effect of light. You do things like draw people without looking at the paper, over and over and over again. Or draw light hitting solids: spheres or cubes or pyramids. That's kinda the bulk of what you do for quite a long time. And I think that basically applies to most fields.
If you are not that interested in mastering it, then just following a step by step tutorial will get you a result, but it's just not the same thing -- there's nothing wrong with it, it just is what it is.
Edit: I think the article is great! I really liked the explanation of his process, it's really useful, I don't want to trivialise it. In-depth breakdowns of process by skilled people who know what they are doing are great
IMO most of the skill that makes good designers, good photographers and good typography isn't groundbreaking at all.
It is about having a very unobstructed and experienced feeling on how shapes and colors affect people, how information is read visually and so on. This can become complicated if you dive deep into the way our brain works or into the different cultural, political and historical connotations connected to certain visual languages and elements — however just developing a sense for how to manipulate shapes and colors in order to achieve visual goals is much more fundamental to the practical parts of the profession than any elaborate theory.
The Futur has a few online courses about typography (which I've never bought & tried), and they follow a similar pattern. They give the students some content to layout, and limit them to one font weight & size at first, progressively allowing more variation over the weeks.
The critiques of this are up on youtube, and it's some of the most insightful content about basic design principles I've seen!
Would you mind describing these 5 lessons a bit more. I'm probably missing the obvious but when you say "one black square" - do you mean like ⬛ and in lesson 1&2 all you could do is rotate this solid black square or resize it?
Exactly. And then imagine ~15 people doing this and then having to explain what they did, why they did it, what they tried to achieve with it and whether that objective was actually achieved.
Simple but effective. A block of text in a layout could also be a square later on, but by focusing us on the bare minimum of a layout we started seeing negative space, started to get a feel what positioning, proportions and rotations do to a visual composition (and before mentioned negative space) and so on.
This was mostly about developing a feel for visual composition and made us actually care about all these choices.
The mistake most beginners make is not viewing the icon at close to its intended size throughout the illustration process.
SVG icons scale, sure, but human perception doesn't, so if you're zoomed in while drawing it, and don't look at it at smaller sizes until you're done, chances are you'll have made an icon that doesn't look very good. You have to draw it while zoomed in, but check it at the smallest reasonable size pretty much constantly.
One reason (as he points out in the article) is that you'll probably have included too many details, and it just looks like noise when you zoom out.
Another reason is that if you're not extremely careful, and aware of your intended resolution, you'll make an icon with a lot of aliasing. Aliasing often reads as blurry edges, especially on diagonal lines, and makes the icon look amateurish. You can tell a professional icon, because it's crisp and clean when displayed.
The other thing to keep in mind is that icons, like logos, are all about recognizable silhouettes. Icons need to be "readable" at the edge of the user's vision, not just when stared at dead on. For the same reason, you don't want them to rely on color, or small details, otherwise they just won't work as well.
> You can tell a professional icon, because it's crisp and clean when displayed.
I've got to disagree with that part -- these days you have no control over pixel alignment or blurry edges. Both OS-level and browser-level zoom is the norm, not the exception, which means your icon edges will usually straddle pixels. And on retina-level displays, the alignment/blur doesn't really matter anyways.
Designing icons to some fixed pixel grid in order to achieve "crispness" is a relic from a 72dpi or 96dpi past that is in the process of entirely disappearing.
So it's not something to worry about anymore, and certainly not something that separates "professional" icons from non-professional ones.
I’m not sure that I agree. I use a normal DPI external display (2560x1440 27”) everyday for work and will probably continue to for many years to come, and desktop apps that use icons that weren’t made with to look decent at lower DPIs look really, really bad on it. It makes the app they’re used in feel amateur.
I don’t think these monitors are uncommon, either. Especially for office and education use, normal DPI monitors still have far better bang for buck than 4K+ monitors do, and 1920x1080 and 2560x1440 in particular are popular with anybody who uses their machine to also play games because those resolutions are for more reasonable to drive than 4K+.
It’ll be great once we’re in the “HiDPI by default” era but that’s still several years out.
Right, but the target displays for a lot of icons is not on a desktop monitor, but a mobile display. Mobile devices make it exceedingly difficult to control pixel alignment, either because a user adjusted their accessibility settings, or because their device is physically incapable of doing so because of the display (OLED pentile[1])
Someone choosing "More Space" on their new Mac's display settings has destroyed all pixel alignment on their computer, but with the display's density it might not matter much. Older hardware like the iPhone 8+ scaled everything down for the 1080p display at all times, and no icon was ever perfectly crisp on that thing, even Apple's.
But so many people use scaling at the OS level which means none of their desktop apps have icons perfectly pixel-aligned anyways. Because even different "lower/normal" DPI screens have significantly different physical pixel sizes and are viewed at different distances, and people choose a setting that makes interface text legible.
The notion of logical (UX measurement) pixel size and physical (monitor) pixel size should just be considered to be totally decoupled at this point. Sure sometimes they perfectly align but as a developer you have zero control as to when that happens.
So it's not worth even trying anymore. Just use hi-res assets designed to still be legible at standard resolution and forget about pixel alignment.
Seeing the whole process from sketch to completed icon was extremely helpful. It can be extremely daunting to look at the polished works of art that are completed designs; I get the feeling that they sprang fully formed into the world. I'm no graphic artist but this makes the whole process seem more accessible for me to dabble in. Thanks!
This is a very nice and useful article but how do you design a Windows 95-style icon? I remember trying and trying and mine always looked like crap. I stared in wonder and amazement at the masterpieces of that era and just couldn't reproduce anything similar.
The earbud icon in the article's header image (center row, 3rd from the right) looks fairly NSFW at first glance, at least for eternal 15-year-olds like myself.
This is a great blog for beginners. And I'm really happy to see thenounproject on here!
I was extremely lucky to get a chance to work with them a long time ago -- they're an awesome company with an awesome product. They deserve all the success in the world :)
Agreed! I love thenounproject for weekend work/side projects -- always an icon that fits for a logo or such, and their pricing (especially for the one year membership) granting CC licensing on all-you-can-eat downloads rocks.
The Noun Project has been really useful to me, especially for finding good icons with permissive licensing. I'm impressed at how well artists can express a concept with a few lines!
I've also thought about how to communicate actions, effectively making The Verb Project. Usually there's an input and output, sometimes storage or feedback loops too.
Most of my basic shell scripts are written to convert data from one format to another. I made a standard icon format: a diagonally-divided icon with the input on the top left, and the output on the bottom right.
For example, GPSToGalileo will take GPS coordinates as an input, generate a KML file, and open it with Galileo (Guru) offline maps. Or iMessageToCalendar. Or ClockBible. Or NotesToText.
Having designed icons, I then put them as links on my (jailbroken) iPhone homescreen, to trigger these scripts. Having an auto-generator for icons could make some command-line tools much more accessible for non-technical users.
Always interesting to see how another artist works.
The technique they demostrarte is very stroke dependent. My preference is for sharper edges and less uniformity. Though my uni professor taught us to exercise a lot of different styles to avoid getting stuck on one.
ah, thenounproject - I've uploaded couple icons there years ago, and still receive from time to time an extra $10 for them. I really wish to find more time and create more icons - any success stories among HNers with thenounproject maybe?
Yep, all vector drawing applications [that are any use] have boolean operations (add, subtract, intersect, difference plus normally a few variations on these). The one the writer is talking about in Illustrator is the shape builder tool, which is very neat, abstracts away the above, lets you build up complex shapes from primitives a bit more quickly and naturally (it can both add and subtract), that specifically I'm not sure about, it's been a long time since I used Inksacape & I don't know what the feature set is currently like (or how easy plugins are to write, as if they're easy enough I'd expect something similar to that to have been written, it's a really nice feature of Illustrator).
But you can definitely do all he talks about just with boolean operations.
First lesson: A white A4 paper and one black square of fixed size. You are allowed to move and rotate. Afterwards you have to explain your compositions.
Second lesson: you are allowed to scale the black square now.
Third lesson: two squares
Fourth lesson: three squares, colors are allowed now
Fifth lesson: Circles are allowed now
Etc.
We talked about fonts and type only a year in, but the stuff I learned in the first five lessons was peobably the most valuable stuff I learned about graphics ever.