Skip to main content

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!

Comments

Popular posts from this blog

Using the On-Screen Keyboard as an Alternative to Typing with a Physical Keyboard

As an individual with a physical disability who touts speech recognition so much, I occasionally get asked how I ever use the computer without having speech recognition available (since I cannot move my arms well enough to operate a standard physical keyboard)? This is a good question, since speech recognition is not one of the most portable tools around. For example, I've never come across a public computer at a library or hotel that was set up with a good microphone and sound card combo, which are necessities for using speech recognition. So, when the necessary hardware is unavailable, that means I have to look for software to simulate it--in this case, the On-Screen Keyboard . The On-Screen Keyboard is nothing new to Windows; it's been one of the standard accessibility tools for several versions now, not just Vista. It's pretty simple, really, but is extremely useful for users like me who cannot utilize a traditional physical keyboard. Basically, the On-Screen Keyboard a

Talking to the Web

A fellow web development aficionado recently asked me a question I commonly receive concerning web accessibility, so I thought I'd share my thoughts here in hope that others might benefit from my ideas (and hopefully expand upon them). Here's the question: Is there anything in particular in terms of accessibility or even just coding in general that you find to be the most helpful when using the web? This is obviously a very broad question and to limit its response to a single blog post probably does not do it justice. However, it is indeed a very simple, honest concern that deserves a simple, honest reply, so I'll try my best to offer my advice here. Of course, you should keep in mind that my suggestions are focused on my own experience in accessibility. My vision and hearing are actually quite good, so I'm not as familiar in accessibility concerning those areas. But I can tell you a lot about how speech recognition works as far as web pages are concerned. I suppose the

Using the XPS Document Writer as an Alternative to Printing Hard Copies

The other day, a colleague submitted a programming request to me to try to improve the way some of the pages on our company web site print out. Knowing that I had trouble handling traditional paper documents because of my disability, she was polite enough to ask if we could just set up a quick meeting so she could show me the printed examples and flip through the pages for me. Although I appreciated the friendly gesture of help, I like it when I can suggest simpler, more accessible solutions that really end up saving time for everyone involved. So I asked if she could simply just print an XPS document instead of messing with a hard copy at all. And as somewhat expected, I promptly received a confused "What's an XPS document?" in return. So then, what is an XPS document? Well, if you are really technically savvy and want to know the details, then I'd suggest looking elsewhere, perhaps starting by reading all about the XML Paper Specification at Microsoft . But if