• Choose a category
• All
• Classic-Fiction

By Root 371 0

have specific design guides (you will find web links in the "Appendix: Resources" section of this book). Guidelines help manage the countless number of designers working on icons and elements for their specific platform. The aim of the guidelines is to help designers and software developers create interface elements and icons that seamlessly integrate with the workspace. If a program is ported for multiple platforms it's common to see subtle differences between each version.

Apple vs Microsoft Icons

While the aesthetic of Apple and Microsoft may be second nature to many, there are a number of subtle differences between icon versions. For example, it's common knowledge that Windows icons have soft tones with plenty of blue shades, but what you may not know is that Windows 7 icons face to the left where, as we mentioned earlier, the icons in Windows Vista point to the right. With a small change like that, it's tempting to ignore the guidelines, but once your icon is part of a larger set the difference in design will stand out significantly.

Using a consistent color palette and viewing angle is a good way to create a coherent and pleasing set of icons. Icons by webiconset.com.

Modern icons are used in a variety of contexts, including computer software, smartphones, web sites and games. With so many styles there's a variety of specifications to keep in mind. Below you will find a breakdown of the icon sizes and specifications for each popular platform. Use this as a quick reference, but remember that icon specs can quickly go out of date, so always refer to the online style guides for further information.

File Formats and Terminology

A good knowledge of file formats and icon specifications is key to successful icon design. Before beginning an icon or icon set, you should be familiar with the format(s) required for your project. Knowing the format will help you determine which programs are needed to create your design and how many sizes you will need to create your icons in.

.ICO

Platform:

Windows, Web Browsers

Programs:

Axialis Icon Workshop, Microangelo

The .ICO file format is a file format for icons used in Microsoft Windows. .ICO files contain one or more images at multiple sizes and color depths. You can use programs such as Axialis Icon Workshop and Microangelo to save images in the .ICO file format. When making an .ICO file for the Windows platform, be sure to read the icons specifications (included in the "Popular Platforms - Guidelines and Style Tips" section of this book) to get a better understanding of the sizes and color spaces required for viewing on the versions of Windows the icons is intended to be used with.

Some technical knowledge is useful to have when making an icon file, as you may come across some quirks when viewing them across operating systems. For example, Windows 2000 has a small quirk where it doesn't support more than 10 images embedded in a single .ICO file, where Vista has a requirement for more and a compressed PNG for the 256px icon.

These days it's unlikely that your icons will be required to be seen on old operating systems, but it is always good to check. The .ICO image format can also be used with programs such as Mozilla Firefox.

An example of the sizes that are used to make an .ICO file.

.ICNS

Platform:

Macintosh

Programs:

Axialis Icon Workshop, Icon Builder

.ICNS is the icon format used for Mac OS icons. Like the .ICO file format, the .ICNS format contains one or more images at multiple sizes and color depths. .ICNS can be made using a program such as Axialis Icon Workshop or the Icon Factories Adobe Photoshop/Fireworks plug-in, IconBuilder. When making an .ICNS files, be sure to read the Macintosh Human Interface Guidelines and the Mac OS icon specifications (included in the "Popular Platforms - Guidelines and Style Tips" section of this book) to get a better understanding of the sizes and color spaces required.

.PNG

Platform:

Web browsers, Software development kits.

Programs:

All Graphics Software

.PNG stands for Portable Network