Following a link from Smashing Magazine, I spotted Round Theme Icons on DeviantArt by =kon. They're for the iPhone, but they're gorgeous, and I'd love to augment iconfu with these icons but I couldn't find the licensing terms. Anyway, I wondered if iconfu really has the features it takes to draw good looking icons - perhaps not everything that photoshop can do, but at least make something that looks polished and professional.
Here's what I came up with. You're the judge.
What I have in mind is a background like
, over which I can paste any number of littler icons so they fit snugly inside the hole in the middle.
Let's make it a 24x24 pixel icon, so that there's just enough room to paste a 16x16 icon in the middle.
Set the colour to black
Open the ellipse tool, and make a big circle
And draw it on the canvas:
So far, so good. It's flat, so I'll use the gradient tool to curve it up a bit. First of all, select the "over, retain alpha" drawing mode - this means the gradient will be drawn only on the circle, and won't change the transparency of any pixels.
The default gradient is from 10% white to 10% black, which is fine for now. Click a few times on the spot you want to be brightest, until you have the effect you want:
Then make a copy of the circle
and keep it in a safe place until later - these copies are little semitransparent draggable windows:
Now, draw the inner circle and a gradient over it - the same gradient, but from a diametrically opposite point, so it looks curved inwards assuming a light source coming from the top-left. This is basically repeating the procedure for the big circle, so I won't repeat it here. Once the inner circle is ready, I draw the outer circle under it. Use the "under" drawing mode -
And hit the "draw" button on the copy to draw it. If the copy is not overlapping the canvas at all, it is drawn at the origin. In other words, point (0,0) of the copy is drawn onto point (0,0) of the canvas. If the copy is overlapping, then pixels from the copy are drawn on the canvas where they overlap. In this case, we want to draw the whole copy onto the whole canvas, so it's easier to leave it where it is rather than laboriously drag it into position. Here's the "draw" button for the copy:
This is how the background looks now:
It's a little dull and could do with some more contrast. The bunched-up colour-levels you see below are typical of low-contrast pictures. Luckily we can fix that.
Choose the "brightness" tool from the colour-levels panel, and use it to spread out the distribution of light on each channel. Click and drag on each channel as the arrows suggest in this screenshot:
You'll notice while adjusting brightness that it's easy to get an image with subtly different hues this way - you can use this to create a different base image to make variations on your icon - for example in an onmouseover event, if you want the icon to stand out when the mouse hovers over it.








The next task is to draw arrows and stuff over this new, shiny, black, concave, smooth, curvy, rounded background, so we have a whole bunch of buttons in this theme. Watch this space for the next iconfu tutorial!