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!
Labels:

Comments

Post a Comment

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...
2 comments
Read more

"Start Typing" with Windows Speech Recognition

As a software developer with a physical disability that makes using a keyboard practically impossible for me, one of the most important capabilities of speech recognition that I always look for is keyboard emulation.  And by keyboard emulation, I’m not talking about entering a bunch of common words and phrases like I’m doing while writing this article.  This is called dictation.  Rather, I’m referring strictly to the ability to key short (or not-so-short) sequences of characters and/or key combinations like myVariableName or myFile.doc .  Words like these aren’t easily understood by the built-in speech recognition dictation engine because they are not in any dictionaries I know of (nor should they be), so another speech recognition mechanism is needed.  This is called typing. Vista’s speech recognition tutorial and the what can I say Windows help documents suggest one good way to type single keyboard keys— Press X .  For example, you can say Press a to t...
1 comment
Read more

Shoot Ghosts with Windows Speech Recognition

Sorry about the lengthy blogging hiatus. I've been extremely busy at work and just have not found the time to spend on fun things like my blog. I know that's a lame excuse, so I'll give you another one. In what little free time I've managed to find, I've actually been playing a game. :-) And, guess what, I've been using Windows Speech Recognition to help me win. What game have I been playing, you ask? Well, my current game of choice happens to be Desktop Tower Defense , a relatively simple but strategically complex game. In fact, I would have never known about it without reading Text Services Framework guru Eric Brown's blog . Thanks, Eric! Now, I'm addicted, too. The object of this free Flash-based game is pretty simple. Shoot all the little ghosts before they escape the maze of towers that you create. It sounds simple enough, but it can get extremely difficult as the game progresses. In fact, a lot of the challenge involves managing and upg...
Post a Comment
Read more