July 6, 2007

Using IE Procedural Surfaces to Generate Icons

Graphics are important to programmers. As much as we'd like to stick to foo and bar as much as possible, there always comes a time when we need to put a little thought into how an interface should look. That often involves graphics.

In most of the applications I've created, the main type of images I've used have been icons. They're small, easy to work with, and help to enhance the visual interface of almost any application. Unfortunately, my computer graphics skills are quite limited, so, when the time comes to needing an icon, I'm usually stuck trying to find a nice affordable (read: free) one on the web.

Lucky for me, not long ago, I happened to discover an excellent site called IconBuffet which provides a number of high-quality icons at no charge to its members. IB is more than just your average icon download site, though. The images are professionally done, and there is an interesting community of users to communicate with when swapping icon sets. Note that you can't get all their icons at once, though. You have to play by IB's rules so-to-speak, where you have a limited number of tokens to buy certain icons, and you can build up points by sharing your set with others. I know; it's definitely a scheme designed to keep users around and active on the site. But in this case, I think it works well, and it's relatively easy to get a hold of the images you want fairly quickly after learning how the site works. It's fun, trust me. And if you sign up with me as the referral, I'll get some nice bonus points. Thanks. Ah, another pyramid scheme...but at least it's free!

Back to the point. Sorry about the spiel, but it does bring me to the topic at hand. What happens if you still cannot find the simple icon you're looking for and you're not a computer graphics whiz? Well, you can make your own using some pretty simple tools that almost everyone owns: Notepad, Internet Explorer, and Paint.

Basically, you can make a really nice text-based icon by utilizing some cool DirectX visual extensions in IE with just a little bit of code:

<!-- saved from url=(0014)about:internet -->
<style type="text/css">
#myicon
{
width : 48px;
height : 48px;
font-size : 24px;
text-align : center;
line-height : 48px;
background-color : #00f;
color : #fff;
font-family : sans-serif;
font-weight : bold;
filter : progid:DXImageTransform.Microsoft.Gradient(
gradientType=1,
startColorStr=#bf0000,
endColorStr=#00007f);
}
</style>
<div id="myicon">US</div>




US


You'll see that the code is pretty straightforward. Just a div element with some styles applied. Pretty standard HTML/CSS. The one thing that might seem strange to you is the IE visual filter style attribute. This is what applies the funky gradient background.

And now that you've got your image displayed in the IE browser, all you have to do is hit <print-screen> on the keyboard to copy the image to the clipboard and then paste the image into Paint. From there, you probably need to crop off the rest of the window surrounding the icon that also got copied to the clipboard, but that's pretty simple if you've ever used Paint before. Once you finally have your icon cropped to the 48 pixel size you specified, all you have to do is save the image in the file format you would like, and you're done. Voila, you're an artist!