Hi all,

I sat down at 10pm, in the mood to draw something using wood. It's just gone 4am now and I have no idea where the time went! I had a few crashes (and discovered a bug) but I got there in the end...

Here's a prototype for an icon theme I'm making:


Just playing around really.
Bigger Version

What do you think?

Apart from the obvious file types, folders, actions & devices (data storage) - what else should I include in my theme? If I finish it I'll probably release Windows, Linux & Mac versions.

I think it's really stylish and very realistic looking. But I think that is also it's problem. As a set of icons I think it'll difficult to easily distinguish them. You could make the colours stronger but then it won't look like a wood icon

I like the natural Look much. MircoUgly is right and my suggestion is to make the text bigger too. Nice work. I`m thinking about what comes after the Web 2.0 and aqua Look. You`re on the right way.

Thanks for the comments, I appreciate it!

Could you explain more about the difficulty in distinguishing them? I don't understand what you mean - I'm very open to suggestions for improvement.

I do think it would be a shame to take the realism away though.

It's really only with the smaller icons will it be a problem. If you were to show someone the 16x16 icon you have here (without them seeing the larger versions), they may not identify it's a PDF icon. If you were to create many icons, for different filetypes and line them up, some might look very similar (at 16x16). Colour and shape help define an icon but this style reduces colour differences and makes shapes less obvious.

I think they would make great dock icons though. Dock icons are normally large and therefore easy to distinguish differences.

Oh I see, so the problem only affects the smaller sizes - or do you think it also affects the larger sizes too?

I didn't actually edit any of the smaller icons, I just scaled by 50% each time. I intend to make the 16x16px icon just say PDF (no pdf icon) and the text on the 32x32px icon larger, I just didn't want to do it at 5am

Thanks for clarifying it's great to have input & advice on it.

The problem about making the text bigger is that there has to be enough space for file extensions like .XHTML - that's the largest I could make the text and still fit it in whilst keeping consistency.

Great work!

Perhaps different shapes of the "tablets" holding the text? (triangles, rounded, concave triangles etc) - and you already have some color in the "inlays", if you vary on this theme (perhaps also some silver inlays) they should stand out just fine against each other.

And: the shadow bugs me a little: if the shadow is to be trusted, the buttons/tablets are pretty thin and stand anywhere between 45° and upright on some surface, with the lightsource being near them. This, in itself is uncommon(normally buttons are thick and are lying down), but fine with me. But: the upper and side-edges have a shadow of their own, which makes no sense if they are not lying down. Additionally , the 'standing'-shadow is, at its slightest point (the point where the wooden tablet meets the surface) slighter than the tablet itself, which cannot be, apart from some very intricate setup with two lightsources at oblique angles.

Ideas for other wood theme elements (never did a theme myself, so no idea about applicability):
Some wooden pegs that stand out of a block, representing battery life in a laptop/ audio levels.
A crossection of a tree, complete with bark, that has cracks propagating from the middle -> three cracks make the hands of a clock.
A small bonfire for Trash

Wow, that's some excellent feedback Ioonquawl, thanks!

You're absolutely right about the shadows. Unfortunately I'm not fantastic at getting perspective & lighting right so your tips are invaluable to me. Once I finish a current client project I'll modify the shadows and try to reflect what you've suggested. I was considering trying to make the tablet shape in Blender and rendering it to see how the shadows were, but I'm not very confident at using it yet.

The wooden block is mean to be at a 30 to 40 degree angle, propped up by something underneath or leaning against a wall (I was trying to follow the Apple OS X icon guidelines). The (single) light source was meant to be above and in front of the block (kind of just above the viewers head)

I love your ideas for the other wooden elements, thanks! I've never made a theme either but I'm making my SVG template very easy to change at minimum effort. The wood type (or indeed, texture) can be changed by just editing the image in the GIMP so it'll be really easy to make darker & lighter themes, e.g. black wood, deep red wood, metal, glass...

Thanks again!

I love the wood texture. Did you make that yourself?

Not fully. I tried to with a standard digital camera, taking around 100 photos of wooden floors & surfaces but none were quite right.

The wood texture I used was taken from this flickr page: http://www.flickr.com/photos/alexeya/134281183/ and was modified in the GIMP. I plan to write a tutorial about it, but in a nutshell I improved the colour of the wood and modified the direction of the grain to make it appear to be leaning away from the viewer.

Flickr is a really great resource for textures because you can search for creative commons only in the advanced search.

Here is the second prototype! Keep those comments and suggestions coming in, they're very useful to me! I've spent lots of time on this so I'd like to perfect it.

Notes:
[*] I've used a dummy logo this time, the rectangle would be the actual logo in the real thing. (the logo wouldn't be inside a rectangle)
[*] Smaller icon sizes would have tweaked lighting, shadows and colours, but I've not done that yet.

Changes:
[*] Back shadow now looks more realistic: softer, larger at the base and closer to the board.
[*] The logo & text now look like they have been engraved and have an angle that matches the board.
[*] Tweaked the colours to show the detail in the wood a little better.
[*] Took away the outline shadow to add to realism (although this will probably be added at smaller sizes with a possible perspective change)
[*] Lots more that I forget -- it was 5 hours of work from prototype 1 to 2!

What do you think?


Bigger Version

I do like the looks, but I also agree that they would be way too difficult to distinguish if you created a whole series of them. Still, for a single program or document type this would be neat.

nils, I hope you're wrong but I take your warning into consideration

Here is the (first draft of the) first icon! Inkscape seems to have exported the smallest icon badly, just ignore the white line at the top for now.

Be brutal in your criticism...

Wood texture is still great, you got the shadows right in this one - i like it.
The arrow is pointing to the upper left for some reason, though, not to the right, for me.

It looks good, I just know that I go by shape/color as much as by the "picture" on the icon. If you know what I mean? Say, distinguishing round vs square icons etc, or black/white ones vs colorful ones, etc. Anyway do not let me stop you, in the end one could only know for sure how well these icons work by actually using them.

@ioonquawl Thanks, yes you're correct about the arrow, now that you mention it, it's obvious! I actually forgot to change the perspective of the logo until after I had finished drawing it (the bottom has to be kind of stretched so that it looks correct) and so I didn't really make it as well as I could have. I'll revise it and make it better

@nils yes, I identify icons by colour too so I understand what you mean. It'll be interesting to see how hard they are to distinguish from each other when there are a few more.

Thanks for the comments guys!

Really nice work! Coming along pretty well so far, just some little tweaks to do and it will be perfect. Bravo!