Eliminate Frustration in Icon Creation

Web Designers, Graphic Designers, and Graphic Art hobbyists, if during your time “ In front of the monitor ”, you’ve tried to create an icon, but found yourself unsatisfied with the results, then this article is written specifically with you in mind.

What is an Icon

What is an Icon? According to TheFreeDictionary.com,

icon – a visual representation (of an object or scene or person or abstraction) produced on a surface

By contemporary definition, we see icons everyday which are meant to represent
[ read more ]

the things from our environment we interact with regularly. An icon might be designed to represent a person– as in the many avatars you know in forums, web logs, and other web sites, we know the icons which refer to several corporations or a business or company. We also see generic graphics imprinted on control buttons, meant for communicating to the user what action might be performed, should they press that button. Button icons are all over our world, for example, on our Television and Entertainment Component remote controls, Video-Game controllers, Kitchen Appliances, plus the products we use everyday– such as soaps and shampoos, dental care products, and the list goes on, and on, but one thing is true: somewhere, at the start of that product, person, or company’s existence– an artist took on the responsibility of creating the graphical image– the iconic representation of whatever thing it means to represent. That is what I mean, in this article and throughout this web log, i’m sure, when I use the word: Icon.

Why are so Many People Focused on Icons, and Icon Creation?

Graphic Design Artists who work for Web Hosting or Web Application Development companies, Market Research Analysts and Marketing Professionals in Corporate Branding, and Product Branding, and Software Developers– from the little-guys, or that dude from Austria who makes that Widget you like, all the way to the names which are all over the Operating System running the browser through which you receive this page have ventured to swap one of your desktop icons for something you made– no matter the purpose– whether bourne of practical, or aesthetic desires, we will agree upon certain outstanding points:

  • the Icon, as a visual image, exists to serve a primary purpose: visual representation; a memory cue;
    e.g. a caricature sort of drawing, depicting a pencil. the image is 20 pixels x 20 pixels, alpha channel at 100 percent this icon-sized pencil may be used for showing someone where the act of writing (as with a pencil) may be performed
  • Icons are needed by software developers who seek a method by which the operation of their software might be more easily understood through familiar imagery
  • The Silk icon set, designed by the benevolent artist, known as famfamfam, is available at no cost to any user who wishes to download the vast set of common, useful images. Since the popularity of Silk has risen– likely by sheer knowledge of their availability– we have seen them in use in countless freeware and payware software applications, server-side software apps, personal web sites, and the list goes on.
  • Icons make a practical commodity for a graphic design artist who wishes learn to peddle his wares on-line, or who simply sees Icons as an outlet for creative expression with little risk to his ego. It’s unlikely that any consumer-grade user would show much appreciation for such icons, enough to critique their quality– excepting perhaps when the design is so poor that the user is confused about the thing which the icon is meant to identify, and therefore finds difficulty in using the product or web site wherein the poor design is used.

Got Art? Spin-up the Icon Press!

Why not try your hand at creating something which may be useful to very many people? all you need to do is create your own, original artwork, the subject of which is easily identifiable in what it means to represent. Start simple (i.e. the pencil example above), and think practical. Give it a shot! Once you design your image, however, you will need a way to shrink it down to size without its legibility being greatly affected, or diminished into a small blob which is difficult to identify. (my own commentary here has been inspired by do’s and don’ts I’ve learned through trial and error. indeed, there is a uniquely challenging aspect to manufacture a quality icon! Consider the number of icons in the Silk package, and the ratio of practical usability to legibility, and the work of famfamfam must really be considered as most astonishing; a truly incredible accomplishment– assuming it is the work of one individual. (does anyone know for certain? who, or what is famfamfam?)

Success in the Mini-Environment of Icon-size

In order to create a high-quality icon, you’ll need some type of graphical design software. If you want to create an original work, I recommend you express your creativity using a vector art application, such as the Open Source, freeware software, Inkscape.

If you wish to create an icon from an existing image, all you need to get started is any software designed to view and manipulate images. For example, a popular software available for both Windows and Linux, XnView, includes both zoom and crop features, allowing the user to select a certain area of an image, and crop the image to only that portion of the total visible area.


software - Icon Processor
Once you have the image you want to use as an icon, if the desired size for that icon is anywhere from 32×32 pixels, the common desktop icon size– all the way down to the popular web site favicon size of 16×16 pixels, I recommend using software designed specifically to create images in those small dimensions. Of the many icon creation specialized software apps I’ve used, I recommend you try Icon Processor, available at IconEmpire.com.

Icon Processor, in my opinion, is the product of highly skilled engineering, and attention to detail. From the results obtainable by the user, to its intuitive ergonomics, my icon creation needs have been satisfied by Icon Processor many times since I discovered it only a few months ago.

For the developer who is determined for originality in his or her software icons, web applications, web site navigation, or when a Marketing Agent must create a unique, Branded Logo Icon for the top Client’s latest Product Documentation files, or even for the casual users who enjoy custom icons for common Places; to identify Custom Shortcuts created for command syntax needed to launch a particular Firefox profile, or for easily identifying (the otherwise identical) Icons of Firefox 2 and Firefox 3), Icon Processor is PRECISELY the tool the Graphic Design Artist has sought after in frustration of the steps necessary to create a true-color + alpha design.

Not only can Icon Processor create 32 bit, TrueColor + Alpha, but it provides options to output in a complete array of bit depth, including an “As-Is” option fo

r non-technical users who just want an Icon version of the image at hand. Icon Processor, available to try WITHOUT ANY LIMITATIONS, as a FREE DOWNLOAD at CNET, and did I mention that it ‘just WORKS’?

But wait, there’s more! In addition to it having literally a “browse-to-target, one-click-processing, save-as-ICO” 3-steps ease-of-use, Icon Processor even includes its own Editing area, allowing the user to further tweek the resulting icon. The folks at IconEmpire.com have thought of everything, because the Editing area is complete with template overylay previews, including a ‘padlock’, ‘red-x [delete]’, and a ‘green checkmark ‘. With these intuitive features, a designer can create virtually everything required for several elements of application functionality– all from one master image!

I just can’t say enough good things about this product. For under $20 US, you should be ashamed to waste the extra time in icon creation, when 2 hour’s minimum wage will buy your own license for this wonderful design tool. I hope you find it to be useful too. Good luck!

Note: much of the content here was written by simply placing a transcription of my review of Icon Processor, available at Download.com, into this article. There is more content here, however, as a prelude to discussion.

Icon, the Free Dictionary, available at http://www.thefreedictionary.com/icon. Accessed 2008-06-05

Whatchu do

Leave a Reply

Your email address will not be published. Required fields are marked *