Textual.

Iconresource.net Documentation

Introduction:

Welcome to IconResource! I am Sebastiaan de With, a full-time visual interface and icon designer from the Netherlands. I have made this video set to help you and any other intermediate computer user learn how to make their own icons. Im an enthusiastic Mac user, but these videos are equally useful for users of other operating systems. In these rst couple of videos, I will learn you a bit of theory behind icons. Dont worry, it wont be boring! Ill touch on icons in general for a while, and then move on to the History of icons. After that, to prepare for actually making some icons, I will discuss icon standards and guidelines. In the package, you can nd sample les and project les for the videos. Also, basic textual versions of the theory videos and resources like links to websites are included in this documentation you are reading now. If you feel the need to contact me with questions or comments, see this document for contact information and links to my websites. I value your input highly, and I am quite sure that this will not be the only IconResource video set if interest allows it.

About Icons:

It is hard to dene icons exactly. No online source describes a denitive, waterproof description of what exactly constitutes an icon. Fortunately, the real-world examples of graphical computer icons lets us distill a quite accurate denition that all icons t into. Icons are generally images, either directly or metaphorically representing a function or object in a certain context. Icons may be as simple as a glyph, like the Safari toolbar buttons, or they can be a pictogram that helps users navigate an application, like this iPhoto icon, or they can be a clean and simple utility icon, or as complex as a Mac OS X application icon. The gamut of icons and pictograms is very wide. If you are watching this screencast, you probably interact with computer icons on a daily basis. They allow you to navigate your way through a veritable forest of functions that your computer offers you. Icon design, although being a small branch of visual interface design, potentially inuences the lives of all computer users, in the same way that typeface design can inuence the lives of every person that reads. Icon design is often erroneously referred to as "iconography", but icon design and iconography have little to do with each other. Iconography is the study of describing, analyzing and identifying the meaning of images - often of older classical artworks. If you design icons, you are not practicing iconography; the correct term is icon design. Designing icons for your own products - whether they are websites, desktop applications or something else, can be a challenging but fun personal assignment - and I hope to help you out with that as best as I can. We'll get a solid start in this video pack, and after we're done, you will be able to design your own basic icons. Lets jump into the history of icons now, briey, before well touch on the guidelines of making icons. Feel free to check out the reference documentation now for relevant information you might nd interesting during the course of the last theory videos.

History of Icons:

Welcome to the third theory video of Iconresource. Lets take the Time Machine! And go back over 32 thousand years, to the birth of cave drawings, or pictographs. Our early ancestors decided to draw depictions of real-life objects to communicate concepts to others. A medium was born. In the tens of thousands of years that followed, pictographs would evolve from single concept illustrations to writing systems, symbols, and visual identities. With these two images, you can already see a signicant development from primitive drawings to an actual symbol writing system. These continued to be rened in the thousands of years that followed. Hieroglyphs The ancient egyptian hieroglyphs are a beautiful example of what these writing systems evolved into. The symbols are now stylized depictions of objects also relating to fundamental elements of the spoken language, like the letters of our alphabet are today. These systems, however, did not last very long. The Great Split the great split between pictograms and writing systems occurred, and in the western culture, pictograms were no longer the de facto standard with which information was communicated. Fortunately, this didnt happen instantaneously. Our Alphabet You might not expect it, but our very own alphabet is mostly derived from these early pictograms. Our capital A, for example, has evolved from a glyph that represented an ox head. You can see how it was developed into something more in line with our other letters. After the advancement to letter-based writing systems, pictograms became increasingly rare.

Tumbleweeds and thus, well take a short journey through time again. Fast Forward were in the year 1900, and the visual culture is starting to become saturated with an old hero in new clothes; pictograms, in the shape of logotypes, signage pictograms and icons. New Era it was a whole new era for the pictogram. In the years that followed, vast pictogram systems were designed, and internationally standard styles popped up in our cities. Other systems that were using pictograms soon followed, with standardized cartographic symbols, and public building signage. The Computer Age When the rst computers were invented, nobody expected they would become the habitat of a whole new wave of pictograms. No wonder; computers had nothing to do with graphics for several decades. But all that was about to change. Graphic Revolution In 1973, Xerox invented the Alto, the rst computer to have a graphical user interface and what we know today as a mouse. The Alto was conceived as a research experiment, and it took a long time before someone came along who wanted to use its ideas in a commercial product. But that happened in the eighties. Apple made the Macintosh, the rst commercially successful computer with a graphical user interface. The graphical user interfaces of today still borrow a lot of concepts from these pioneers. The GUI was Born You can see that the look and feel of Xeroxs Alto was considerably different than Macintosh System 1, which you can see on the right. In this screenshot you can see the icons many consider to be the rst computer pictograms, made by Susan Kare. Yes, indeed... ...So Were Icons. Icons were born with the interface. The graphical user interface started changing rapidly, with its pixelated icons becoming more detailed and directly relating to real-life objects as a metaphor for making computer functionality seem more accessible and friendly to users.

Within several years, the rst color icons were made, with increasingly realistic metaphorical objects depicting software functionality. However, any average user would still consider them pixel pictograms; the metaphorical relation to the real world was left to your imagination. As with the rst computers and the Xerox Alto, the world of the graphical user interface was about to be revolutionarily transformed. The Inception of Aqua With Apples Mac OS X, Aqua was born. It changed interfaces in a revolutionary way; it bore no resemblance to the pixelated icons and interface graphics of its predecessors. Icons, in particular, got a radically new design direction; photorealistic depictions of applicable metaphors related the complex tasks of the modern operating system to what users would encounter in daily life. Everything was made visually attractive and accessible, and this helped people accept this paradigm shift. Aqua: Born in a 3D World it is no wonder Aqua lacks icons with a clearly pixelated motif like its predecessors - it is one of the earliest interfaces with three-dimensionally rendered icons. In these obscure images from Apple, one can see the process of designing the rst icons for OS X. They were made in a 3D studio application. Even more revealing is the right image, which shows the basis for the Aqua application icon guidelines. Notice that the perspective of standard Mac OS X application icons is derived from observing an object as if it were lying on a desk in front of you. This logical and human representation of objects made for an exceptionally realistic and intuitive interface. Rapid Evolution If Aqua goes to prove anything, it is that the world of graphical user interfaces is one of revolutions and moving with giant leaps of technology. Not only do the aesthetics of our operating systems evolve, so do the capabilities of the software and devices we interface with. In the evolution of graphical user interfaces, one can clearly see the parallel development of computer hardware and methods of interfacing with devices. If you consider how major developments like Aqua have been, you can begin to imagine what the future holds. Desktop Customization Since the graphical user interface was invented, there has been an urge to customize it. Websites like the iconfactory have developed from small-scale freeware icon outlets to massively visited cornucopias of eye candy. You can clearly notice that with our evolving interface, our tendency towards customization grows with it.

Evolution of the new Aesthetic Although new by all standards, Aqua is not stagnant either. Just like the other user interfaces out there, it is constantly in motion, and its aesthetic is evolving to an even more realistic yet idealized representation of the world around us. In order to make icons that are consistent with the look and feel of the interface they are shown in, look around; Im sure you can form a notion of what ts in and what doesnt. Interface Icons today Which brings us to the here and now. Interface icons on our computers today can be separated into three basic groups; The application icons, which are most often seen in the Windows Start Menu or the Desktop, or in the Mac OS X Dock. They function not only as illustrative pictograms, but often double as a visual identity of a software product. Interface icons, which are generally used to describe features of an application or help the user navigate. and, usage-specic icons, like for websites, games, specic devices, or other multimedia. The Future of Icons The future of icons is unclear, as is the future of electronic devices and computer interaction methods.With the world of icon design being as small as it is, people like you and me determine the aesthetic of tomorrow. Aqua will probably seem outdated in less than ten years form now, yielding to new interfaces and technologies that help humans more effectively (and perhaps beautifully) interact with computers.

Standards and Guidelines:

Welcome to the last theory video of Iconresource. The Internet is your friend. Everyone wants to make it easy on you: check out the freely available and elaborate documentation by these big players. Links are in the documentation. With these resources you can make things look truly good on each platform, so study them well. Im sure at least -some- areas will strike you as interesting. Differentiate icons An important rst step in understanding guidelines is understanding the logical groups that you can separate icons into. To take Mac OS X as an example, you can divide the icons you use on a day-to-day basis in several groups; Theres your system icons, like the device icons of the Finder. Interface icons, typically found in toolbars and sidebars, occupy another group. And of course, application icons, the gurehead of any application on the OS. But look closely; theres more to differentiate in these groups. For example, application icons can be separated into normal application icons, player or viewer icons, and utility icons. Notice how each has a distinct set of styles of its own, that communicates to the user what kind of an application it is. Making these distinctions when creating your own icons is crucial.

Know your Platform Perspectives As you have just seen, theres written guidelines for different types of icons. Take a look at the extensive interface guidelines by Apple or Microsoft to get an idea of what convention your icon or icons should t into. Are you making an application icon? Keep the desk perspective in mind, and although nobody is forcing you at gunpoint to use it, stick as close to it as possible. The same applies if your icon belongs in a different group. Check the guidelines - what do they say about it? This gives you a starting point for making your icon, with the added bonus of consistency with the rest of the operating systems graphic design once youve nished it.

Size Matters Icons come in all shapes and sizes. However, most of the sizes have been standardized. For all common desktop operating systems, icons come in 16, 32, and 48 pixel sizes. Mac OS X has additional sizes of 128, 256, and 512 pixels, whereas the latest incarnation of Windows, Windows Vista, has icons up to 256 pixels in size. Its important to use these sizes and optimize your icons if necessary. You can see here that the 16 and 32 pixel icons have been redrawn to be crisp and representative at their small dimensions and to retain a detailed look. This is crucial for making a proper icon. Icon Weight Although clearly described in all guidelines for making icons, it is imperative that you determine the visual weight of your nalized icon. As all icons have to t into a square box, icons that occupy too much space or too little may give the impression of being visually out of balance with the other icons in its environment. This is an example of an icon that is too optically heavy for the other icons. This, on the other hand, is an example of an icon that seems too light; it gives the impression of being suspended in space and breaks the composition of the three icons. This is the correct way of placing a rounded rectangle into the icon square, making it in balance with the visual weight of the other icons. While this may seem like an issue thats only present in the Mac OS X Dock, its important for icons in any environment to correctly use the square space they are assigned. Absorb the Unwritten Guidelines arent everything. Theres a lot of little gotchas and unwritten rules in icon design that youll have to notice and absorb at times to make something that looks really in its place. Take these icons from Mac OS X - theyre all designed by Apple. Its obvious they share the same unwritten rule for application icons... can you spot it? Right! Its the negative 9 degree angle they use. Unwritten rules may be as clear as these, or much more complex, like the look and feel of icons in Aqua or Aero. Looking at your interface will help you form a notion of whats tting in what aesthetic. Guidelines are not Rules Although the guidelines are very wise to follow, some of the best icons have been made by not following them by the letter. You can see three examples application icons here that match the Aqua aesthetic perfectly, but dont adhere to the guidelines.

Resources.
Apple Human Interface Guidelines. http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/ XHIGIntro/chapter_1_section_1.html

Icons Guide for Aero by Microsoft. http://msdn2.microsoft.com/en-us/library/aa511280.aspx

GNOME Human Interface Guidelines. http://library.gnome.org/devel/hig-book/stable/

IndieHIG. http://www.indiehig.com/

List of Icon tutorials on the internet: http://del.icio.us/search/?fr=del_icio_us&p=icon+tutorial&type=all

Iconfactorys IconBuilder and other nuggets: http://www.iconfactory.com

Contact.
Id love to hear your thoughts on IconResource and its future. Feedback? Requests? Let me know at info@cocoia.com.