[HN Gopher] Mastering the Basics of Icon Design
___________________________________________________________________
Mastering the Basics of Icon Design
Author : adrian_mrd
Score : 84 points
Date : 2021-07-21 08:32 UTC (1 days ago)
(HTM) web link (blog.thenounproject.com)
(TXT) w3m dump (blog.thenounproject.com)
| karaterobot wrote:
| 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.
| crazygringo wrote:
| > _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.
| lxe wrote:
| If anyone is wondering, that's an airpod, I think.
| Animats wrote:
| Oh, you mean an iDweeb.
| atoav wrote:
| 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.
| RobertKerans wrote:
| 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:
|
| https://papress.com/collections/design-browse-books/products...
| zubspace wrote:
| I would honestly like to know, what is so groundbreaking in
| this book? After looking through the pages I feel in no way
| wiser than I was before.
|
| The article of this thread at least has some practical tips
| and guidelines, what to look out for when designing small
| icons.
| RobertKerans wrote:
| 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
| justinator wrote:
| I think one of my most useful classes in art school was a 101
| course on 2D design.
| monitron wrote:
| 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!
| duopixel wrote:
| If you found it interesting you may like a free web game I
| created two years ago... https://boolean.method.ac
| RobertKerans wrote:
| This is great! Very nice indeed, good to have alongside
| kerntype and similar.
| danvayn wrote:
| 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 :)
| jfengel wrote:
| Does Inkscape have equivalents to these operations?
| RobertKerans wrote:
| 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.
| zwieback wrote:
| 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.
| Animats wrote:
| It helps to be Susan Kare, who did both the original Mac icons
| and many of the original Windows icons.
|
| She used graph paper and pencils to set individual pixels.
| Every pixel counts in her icon work.
|
| It's easy to make icons if they're big. It's tiny, informative
| ones that are hard.
|
| (Her web site, "kare.com", is gone. There is a copy at
| "https://web.archive.org/web/20210403001323/http://kare.com/")
___________________________________________________________________
(page generated 2021-07-22 23:00 UTC)