This set of custom icons was designed for a payment processing system by Cogon AG, a leading German provider of corporate cash management services.
Jun 092010
Aug 192009
Your website is in for a complete makeover with these great free icons. Make sure you understand the licensing agreement before you use them, though.
Communication technology has definitely boomed over the last couple of years, and now there are lots of cool 3D icons you can use to keep up. For both commercial and personal use, the standard sizes and the 3D Max versions are on the web for free downloading.
Aha-Soft has brought out a whole line of free androids. Just about any space creature or robot is there. All you have to do is go find them.
Large, Free Icons for Business
No longer do you have to do all the hard work of providing icons for your business. These freebies are well-suited to any project and very professional.
Free Desktop Icons for Business
Anything you could possibly want to advertise I there in a number of formats and sizes.
Grungy Aesthetica Sets of Icons
Although it’s not the only one out there, this set of Aesthetica icons is a definite winner. These icons will really animate the right websites and blogs. Best of all, they’re all free, although you can buy commercial licenses, too.
Want some new faces around your website? Check out these four weirdly attractive squares. They come in ICO format in 128-pixel and 48-pixel sizes.
These 177 icons will help designers with a number of concepts. They’re available in 48 pixel size.
All kinds of things need icons- bar graphs, calendars, clocks, contacts, mail, etc. These icons come in PBG format and they have vector files for Firefox.
The delicious icon in every variation possible- that’s definitely something you might like to incorporate into your website.
These 79 256×256 pixel blogger icons are available in both GIF and PNG along with vector files.
A real estate agency website will look more interesting and garner more popularity with these impossibly realistic icons.
Lots of Muslim art and architecture for Windows, Linux and Mac operating systems are found here. Do not use these icons in a way that could be offensive, directly or indirectly.
Here are all those familiar web icons, except now they look earthy and textured. They are in PNG format at 320×320 pixel resolutions.
Here you’ll find other popular icons in a hand-drawn format- Gmail, Heart icon, Furl, Google, Flickr, Feedburner, FriendFeed, Facebook, Blinklist, Linked IN, Last FM, Newsvine, Magnolia, Paypal, Sphinn, Twitter, Skype, Yahoo, YouTube and Vimeo.
Bag and Box Tele-charger Icon Pack
In PNG and ICO formats, these bags and boxes can be very useful for your webpage.
All things city are available here, from hot dog stands to movie tickets. The city can now exist in cyberspace.
If you like Irish things, even if you aren’t Irish, these are the icons for your blog.
512×512 pixels in resolution, these stamp icons are attractively old-style.
Construction Icons Vista-Style
With these icons, you make a website that’s still being built look cool. Your visitors will return, even if it’s just to see these icons again.
Your website should reflect who you are, and if that’s a diehard fan of Vista aero styles then you should get some of these 135 Vista aero icons for your personal use.
All 135 of these elegant Japanese-style icons could be yours. “Yoritsuki” refers to a fictional Japanese inn.
All of the major services and applications available on the web are illustrated with these round icons.
If your website is more on the playful side, then you might want to look into these fairy-tale-like icons. Otherwise, you’ll just have to have them for fun.
Everything is no-nonsense and to the point with these icons, which are available in PNG format.
These are all the best-known social networking sites’ logos on leaves with both PNG format and vector sources.
Free Set of Web Applications Icons
These 20 icons are designed for web apps like profile, add, search and delete, and they can be used both for personal ancommercial uses.
Cold blue and semi-transparent, these nine icons are formatted in PNG and you can utilize them however you like.
Let the designer know how you decided to use them and you can use these twenty-three icons, posted in both PNG and ICO formats, wherever you like.
These metallic icons will illustrate the most common web apps. Their resolution is 256×256 pixels.
It’s time for a new Twitter bird, don’t you think? Everybody has the round one. You can step out of the mainstream with these four cubical birds in resolutions of up to 256×256 pixels.
Jul 272009
An absolutely new and free icon pack is released! See it here:
Free 3D Social Icons
Apr 292009
The technicality of designing icons
1. Lines and Angles
The basic linear alignment of an icon is very important, one of the most important because it defines the icon, setting it apart from its background. With larger graphics, highlighting with extra lines is not necessary and rarely ever considered, but with pixel graphics like icons you either need to create a contrast in color or use outlines, the latter being what I would like to discuss.
With large-scale graphics, any angle, border or Bezier curve can be employed and it will look fine with the aid of anti-aliasing. However, pixel graphics are too delicate and every portion too much of the whole for anti-aliasing to work. Therefore, the angle of the line you use becomes very important. When you choose an angle in pixel graphics, you’re actually talking about the step. Every computer graphic line is made up of steps, although this is only critical on a smaller scale.
An example would be the 18 degree angle line, which is made up of multiple 3-pixel lines, each one connected at the corner to the next.
Although you can’t tell, every line looks like this, and it takes certain arrangements to make a line aesthetically pleasing. Examine the twenty-five and twenty degree lines here.
You should notice that one line is smoother than the other. This is because the twenty-five degree, smoother line is made up of equal 2-pixel parts, while the twenty degree line is formed from an incongruous 3-pixel, 3-pixel, 2-pixel formation. Without anything else in the graphic, it becomes unacceptable to the sensitive human eye.
Therefore, the simpler the angle the better it looks to the human eye. This makes zero- and ninety-degree angles ideal. These are followed by those with 1-, 2-, or 3-pixel segments with a downshift of 1-pixel. Although these lines are not even, they are perceived as such by the brain, and therefore are effective means of communication. Less pleasing but generally acceptable to the human eye are the unequal lines, those with more than one basic composite line, shifted by more than 1-pixel. (Example Below)
Earlier, I singled out lines containing composite elements with integer values of 3 or less. This is because, as you increase the length of the lines’ segments, you lose integrity. Consider this line with composite lengths of 10-20 pixels. However, as your angle gets smaller and smaller, your line will approach a straight line, and thus the composite elements will be longer. Don’t use small angles unless you absolutely have to.
Lastly, there are better and worse forms of the same angle. I gave the better form of the twenty-five-degree angle above. Compare that with its worse form. The difference is that the smoother line consists of all 2-pixel lines while the rough one has three lengths- 3, 2, and 1. Whenever you’re drawing a line, simplify it as much as possible to improve its appearance.
2. Colors
Color, color, color- it is the most important aspect of pixel graphics. Poor balance will not just affect the overall image- it will ruin it. There is a basic rule used in graphic design saying that any image, when reduced to grayscale, should still look sharp if you’ve chosen the right colors.
It is advisable to use RGB color in your pixel graphics. Although some may say use internet colors, those will bar you from some of the useful effects such as gradients, dithering and shadows.
Flat space is also a key because it allows your colors to run uninterrupted and clarifies your graphics. The use of excessive special effects in something as small as an icon will make it look dirty.
In moderation, however, effects can be good. For example, gradients will rid your graphics of broken lines, those lines whose base elements are too long. Besides disrupting flat color, however, too many gradients can also keep your image from conforming to the GIF palette, so, once again, use them in moderation.
I have nothing special to note about shadows and flares in icon design that’s different from what you would already expect from general graphic design, except that it should all be done by hand. Start a different layer for your shadows and flares. The only thing you should be doing automatically is changing the transparency. The reason is that filter commands are just too unpredictable, and that’s a big deal in icon design.
Lastly, use increases in saturation to make colors look more like what you intended. Small objects will lose some of their color potency, so you need to compensate. As an example, if you have a blue eye with RGB values of 0, 131, and 159 in icon graphics the eye will just look gray. However, the adjustment from those values to 71, 195, and 242 will have the desired effect.
What we perceive when we look at an object changes with its size. It is your job as an icon designer to make sure we see what you want us to see. Don’t let anything be visually inconsistent.
Consider this orange juice box, which exhibits flat colors, broken line-gradients, nuances, shadows and flares.
3. Font
It’s a good thing I’m only covering icon design. That really simplifies things in every aspect, including the font specifications.
No matter what the icon, if it is not almost completely consumed by text, then the size of the text must be drastically reduced. Having pretty words becomes secondary to having them legible.
Most design studios make their own fonts just to be individual and make sure they have a good text. Creating a font is just a matter of hours, so it’s a fairly simple project. However, instead of investing those hours, you can also get any of a number of equally acceptable fonts. I recommend the DS Pixel, Seventeen 7 from Vedi’s website, and all the fonts from the Lakmus Lab’s website. Arial and Verdana fonts are also fine.
I discourage drawing your own letters unless you have a good reason, but should you do so there are some guidelines to follow, as with everything else.
Most importantly, do not make your letters less than 5 pixels tall or 3 pixels across. At right is an example of minimum measurements.
Never use anti-aliasing in icon design or you’ll end up with a senseless mix of pixels. 5-point Arial text is one of the exceptions to the rules of fonts in icon design, but if you stick to them you’ll get more consistent results.
Summary
Icon design is an art form, but it’s almost a scientific one. There are very specific ways to improve the visual appearance of icons, and you come out with better results by adhering to them.
Feb 032009
We’ve talked about interface icon sets’ styles and sizes, so now we’re ready to create them.
For the most part, this article will go over the most basic concepts involved in computer drawing. All icon stamps have been systemized in outline and meaning to the best of my abilities. This is a good resource for novice artists and web designers alike.
There are two basic situations in which an icon designer finds his/herself: A picture or object is given from which the icon will derive or a description in words. Don’t be daunted by any seeming lack of information. With the proper training, you’ll be able to jump right into any project with complete confidence.
1. Visualize the Image
Although it may seem like the logical thing to do to just start drawing the icon as soon as you have a rough idea of what it should look like, it’s actually better to make sure you have complete details before you ever draw a single line. There are some serious misconceptions you can end up with when you get ahead of the project. Just take the simple case of a phone. You wouldn’t draw the same phone when marketing to businessman/woman as you would for a housewife. One would identify with a cell phone while the other would more readily receive a household phone. How well your audience relates to your icon is very important, so always get as many details as possible before you start a project.
It’s not always as easy as that, though. One other important point to consider would be the website style. On an antique shop’s page, you wouldn’t use a cell phone, not because your audience wouldn’t relate as much as because it’s just plain incongruous. You might consider using some other icon or none at all in this case, since there aren’t many phone designs that really look antique without being ineffective.
Site style and user preferences should be what guide your icon’s design, and not so much your own imagination.
2. Compose the Icon
Once you’re ready to move beyond the look of the icon, it’s time to shut off your computer for a while. Photoshop, Illustrator, and CorelDraw are not needed at this point. Believe it or not, a good, old-fashioned pencil and paper still have their applications in graphic design.
At this junction, you just want to relax and let your hands take over. Keep drawing until you have the variation you want, keeping the website’s style in the forefront of your mind.
There are true artists and those who really don’t know why they’re in icon design, but both hit a brick wall every now and again. It’s not a problem with the individual as much as with people in general. When it comes time to render one’s surroundings, the details just don’t come pouring out, except with those few hopelessly observant people. What I mean is that when you think of a street you probably just see a general paved road. Chances are you don’t think of its character marks- fissures and cracks, uneven spots and slightly crooked lines. The left hemisphere is responsible for observation, and it will replace specifics with the general.
It is only through acute observation that you can translate your left-brained interpretation of your surroundings into something more individualized and artistic, something right-brained, the right hemisphere being where your subconscious resides, your inner psyche. One of the things the right hemisphere controls is speech, and you know you don’t think about grammar and mechanics when you’re talking. Most of the time, though, graphic designers of all types get caught up in the “proper technique” and such, and they can’t seem to make a graphic work. Look at it this way: A graphic is just a representation of reality. A circle and some lines summarizes the way a lot of people draw humans, but that’s not how they really appear. It’s just one interpretation.
Approach all of your drawing as an interpretation, while also keeping in mind some points specific to icon design.
3. Determine the Details
Speed drawing can help you figure out what the most important elements of an object are. Since icons are so small, you don’t have space to try to be a flowery artist; you want to be an efficient one. Consider the example at the right of the human form reduced to a 16×16 pixel and 100×100 pixel spaces, respectively.
The first man is 7×37 pixels while his larger replication is twice that size. Icons can get even smaller than these, but they serve the purpose of an example. You see that the man is wearing a suit, and therefore he’s probably a businessman. The only facial feature is a one-pixel eye.
As you draw icons, you need to learn to recognize the basic details that identify an object.
4. Be Minimalistic
Lest you think that small scale is all it takes to make a good icon, examine the reduced photograph on the right. Believe it or not, this man has the same dimensions as our little businessman. The only difference is we had complete control over what went into the businessman while this photograph is everything there was for the camera to see. This inevitably means many unnecessary details, and that’s how come, although our graphic was very simple, it was clear, while this reduced photo is grainy and ineffective as a communicational device.
After you recognize the basic elements as we discussed in the former section, you can then draw using a minimalist technique. Good icon designers effectively eliminate unnecessary details and thereby produce communicational aids that work well. It is possible to have balanced, small images that are drawn according to these guidelines, like the phone pictured on the right.
5. How to Show Action
You can expect to have to deal with motion at some point in your icon designing career. Animation might seem like a good option, but I only advise it for onMouseOver JavaScript, and even then sparingly.
The dynamics of motion are well-explained in the “Book of Recreational Physics.” I will give you the basics below.
First of all, let the user complete the graphical illusion. In the example graphic, we have two sets of parallel lines. The first one is vertical and the other horizontal. Curiously enough, the horizontal lines look more dynamic, even though it is exactly the same as the first one, except for the fact that it’s rotated 90 degrees. That is because all action, all forward motion, occurs in the horizontal plane. Vertical lines are subconsciously grouped with rest. Just to see this concept in action, try applying motion blurs in Photoshop. I guarantee that the horizontal motion blur will be the one that makes the object appear to move.
Any icon that has principally horizontal components will look more like it’s active.
“Traditional Animation” by Walter Croft talks about another aspect of creating motion in icon or any other type of graphics. The idea is that there is something called “notice,” where every action is preceded by another action. If you want your icon to appear active, you must capture a moment where notice can be observed and the aftermath of it construed. For example, someone about to throw a ball draws their hand back, and one preparing to jump first squats. The user knows this as well as you do, so it is very useful in icon design.
There are other aspects of dynamics that go beyond the action of living things. Suppose you have a pen writing on paper, or a door swinging in on its hinge. Stretching and contraction can effectively render your objects in a realistic light. The principle that guides stretching and contraction is that objects retain their volume as they are manipulated. Therefore, in the case of a door, when a force acts near the handle, you can decrease the volume around this area but the volume must increase in some other area to compensate for this. If the volume leaves from the center, then it goes to the edges, and so you have a thick middle and think edges when your door is in motion.
The dynamics of motion are good guides, as long as you don’t take them too far, in which case your object will just look distorted.
There’s really not much more I can say to coach your drawing. Feel it out and scan the graphic when you finish drawing it.
6. Transfer the Image
Once you have the image on your graphics editor (any raster graphics editor), it’s time to create the graphics file that will be your icon.
The main thing to remember is that you should still be observing the rule of depicting only a minimum in details.
Secondly, keep your image proportionate. Every change in scale should mean that all portions of your object are changing at the same rate. If you want half scale, every dimension should decrease by half.
The last rule is to leave all the effects- dithering, shadows, and filling- until after you have straightened out the details. Contours should be your start, then you can edit them as necessary and mark up the primary details.