iconfu iconfu iconfu is the world's largest collection of free, open-source icons and it comes with a handy image editor, so you can tweak icons to suit your needs exactly or even draw your own from scratch
invert blue resize move up verbose drawmode lighter previews remove swap animator library library draw shift up make a copy large editor explorer your icon contract agreement tag

14 January 2009

[iconfu] add shadow

Here's how to add a shadow to an icon using iconfu. It's trivial, and it's kind of cheating, but that doesn't matter, it's the result that counts. Create an account first if you want to publish any of your work. Let's go.

We're going to add a pool of darkness beneath a tick (or check) icon, as if it was slightly hovering and lit from above. Start with the shadow, from an empty editor. Choose your colour and draw the shadow approximately as it should look:

This isn't a great shadow, we need to blur it:

The blur action is down there under "Actions". Now we need to create a floating copy of the shadow, so we can add it to the check icon later. A floating copy looks like this, and you can drag it around with the mouse:

Next thing: find the check icon you want to use. Hit the open library button in the top panel of the page, and enter "check" as your search term in the tag field:

Click on the icon you want to use, then on open for editing in the icon detail panel.

Once it's open, drag the shadow over it

And position the shadow exactly where you want it

Choose Underlay from the "Actions on Copy" commands to draw the shadow under the image in the editor, then Close Copy. You're done! Here's the result:

Fortunately, you don't need to draw a new shadow every time you need one, here's a shadow icon I made earlier. If you created an iconfu account (free for now) you can also publish your shadowy icon and become the famous world-renowned shadow icon dude/dudette. Your feedback will always be welcome!

0 comments:

Post a Comment