| Main |

iconresource.net

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.)

Trackbacks

TrackBack URL for this entry:
http://alastairs-place.net/movabletype/mt-tb.cgi/225.

Comments

Wolf Rentzsch has a video from C4 which shows icon development in Cinema 4D. He makes a good point about the benefits of using a 3D app when you have to please a client.

Yes, I saw that too. There are a few downsides to 3D applications though:

  • The output isn’t scalable. You can render at huge sizes to counter that, of course, which is what we do for iDefrag and iPartition’s application icons.
  • Reflections are sometimes too complex and look busy when scaled down, which means more manual tweaking.
  • Some things are actually harder to model in 3D than they are to draw in 2D.
  • Anti-aliasing is not always so great, for various reasons.
  • One or two tricks are impossible in 3D. For instance, Escher-style perspective tricks.
  • You generally end up having to add the shadow separately; some 3D software (Carrara included) has support for saving transparent shadows, but they rarely end up in the places that you want them to and it’s easy to end up with a grey—rather than black—shadow, which looks odd.

There are a couple of bits of software that can generate vector output from 3D models; I think they work by tracing the results. That could work quite well, but because of the tendency of 3D software to generate over-complicated shading, many of the examples I have seen show unpleasant artefacts.

As I say, I use 3D software some of the time, but my impression is that vectors are the way forward.

Hello,

How nice that you've blogged your thoughts of Icon Resource! I'd be very interested to hear what you think of my upcoming bonus content, which featured a small peek into making ridiculously complex icons like the OS X System Preferences icon in Photoshop. It's always double as insightful, of course, if you already have your own workflow.

I know a lot of icons can be made in Adobe Illustrator - I just personally find it less pleasant to work with (and it sets me back a lot for just wanting to work with vector stuff) and I really like the way Photoshop handles raster material. It's a pity, however, that Adobe obviously cripples the vector tools in Photoshop intentionally, making sure people do not substitute Illustrator with it.

Regardless, very cool post, and looking forward to what you think of the upcoming extra content!


Post a comment

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thank-you for your patience.

(Your e-mail address will not be displayed or included in any pages served on this site; nor will you get any spam as a result.)

A live preview of your comment will be displayed below. It should refresh automatically when you stop typing, but if not then the “Preview” button above will update it.

Live Comment Preview