OK, so Matt Gemmell twittered (and blogged) about Sebastiaan de With’s new iconresource.net site, which hosts a set of video tutorials on icon design.
I do all the artwork for the Coriolis Systems products myself, icons included, so seeing how other people go about designing icons is always interesting… making even passable icons for Mac OS X is really hard, because the bar now is way up in the sky somewhere thanks to the talent of the icon designers at Apple and elsewhere. Indeed, a lot of expensive pro apps’ icons now look below par on Mac OS X; Adobe’s icons for CS3, for instance, are distinctly uninspiring IMO.
Anyway, it was interesting and very informative to see how Sebastiaan designs icons. It’s different to how I do things; I usually either use a 3D package or Illustrator, depending on the look of the icon and how it’s going to be used. Recently I’ve been veering towards using Illustrator where possible, because it’s then fairly easy to save icons that are entirely resolution independent (almost all of the artwork in iPartition is now scalable vectors as a result, even the yellow hard hat icon in the Preferences pane, which was originally a 3D rendering).
For 3D work, I use Carrara; there isn’t really anything else on the market at that price that has anything like the same feature set… Maxon’s Cinema 4D is probably the closest, but a lot of the functionality you get for free with Carrara (at least Carrara Pro) is only available in expensive optional packages with C4D. I suppose you could also use POV-Ray, which can produce very high quality results if you’re masochistic enough :-)
Yesterday I had a go at creating a pencil similar to Sebastiaan’s, but using Illustrator rather than Photoshop, just to see how I would go about it and how that would differ from his Photoshop-based workflow. The answer is that a lot of it is basically the same; the only things I did differently were:
- I used clipping paths to help with the shading of the scalloped edge of the pencil tip (Sebastiaan’s scallops are in the wrong place, incidentally; the perfectionists amongst you will realise that the reason they occur is that the pencil has flat faces, and so the sharpener cuts more material away at the face corners than it does at the centre, which tells you where the scallops should be).
- The shading on the eraser, where, again, I used a clipping path and a black object with a Gaussian Blur effect applied to it.
- Illustrator doesn’t have the Fibers filter. Not a problem; just make the texture in Photoshop and drop it across. Of course, that means the result is no longer totally scalable…
- Illustrator doesn’t have a distort tool that exactly matches the one in Photoshop. Or if it does, I couldn’t find it. You can, however, use a mesh warp set to 1 x 1 to achieve the same effect.
Otherwise his pencil tutorial maps fairly straightforwardly to Illustrator. I think the same should be true of the paintbrush also.
One other comment I have is that I’m slightly surprised that Sebastiaan didn’t use a layer mask (or in Illustrator a clipping path) to do the document icon. If I was making such a thing, I would have had the background as one layer, with a clipping mask inside it that let me position my content without running off the edge, and then the page curl as a separate layer. That would have saved messing around redoing the page curl after putting the content on the paper.
I also thought some of the fiddling with the pixels of the 16 and 32-pixel icons was unnecessary. I would concentrate on making the edges clean; the attempts to tweak the pencil and paintbrush were always going to fail, IMO, because neither implement was at an angle that can be represented cleanly with so few pixels.
Anyway, I thought Sebastiaan’s tutorial was excellent, and well worth a look if you need icons, aren’t too artistically challenged and want some hints. I know it’s given me a couple of ideas that I didn’t have before. You do, of course, have to pay to access it, but IMO it’s well worth it. I recommend that you check it out.
(I might post a few pictures later.)