Havenyi&SKDD Team 从事 RIA项目业务;界面设计；交互设计

Keyfob: Anatomy Of An Icon

Following on from a previous article on toolbar icon design we're going to tackle it's Big Brother, the Application Icon. The two serve slightly different functions within the program but adhere to the same idea. While we could start on an existing application, we’re going to embrace vaporware and produce an Icon for an Application that doesn’t exist. This is simply to show the process. This tutorial will follow the construction of an Icon for an imaginary application called “Keyfob.” We’ll say that it’s an application for locking and unlocking the Mac remotely. This is partly inspired by a process where someone managed to put their Mac to sleep using a mobile phone.

Where Do We Start?
A biro pen, a sketchpad and a cup of tea usually works well for me. However above all these, the most important tool for developing Icons is...? A Dictionary
Every Icon is communicating a metaphor and because you are appealing to a wide audience, the accepted meaning for a term is very important. So the inclusion of a Dictionary with 10.4 Tiger was a boon for anyone who has ever tried to sum up “vertically integrated certification process” in a 16x16 square.

This process may sound a bit silly but every Icon needs to rely on a strong metaphor which is understood by the widest audience. Simplicity always wins out so in this case we will produce a key which looks like it attaches to a chain.


Sketching
Then the process of swirling out your ideas begins. It doesn't matter if the sketch looks like monotone roadkill, you are just throwing ideas down onto paper at the moment. If any aspiring filmmakers ever needed encouragement they should look at the Taxi Driver storyboards of Martin Scorcese. The man has incredible talent in filmaking but would be thrown out of kindergarden art class. Once you have placed some ideas down on paper you can scan them in and dive into your image editor of choice. I'm using Photoshop CS and IconBuilder Pro for this one. The method I use to create icons could be wildly different from someone else so go with whatever method feels comfortable. The end result will be a series of scaled resources that the OS will use in different views.

Blocking In Colours
From my sketch ideas I'm going to take the angled key with a button for operation at a distance. The icon is going to be built using vector shapes and layer styles so there is no need to build a huge source file and scale down as these will scale up quite well. First we draw out the base layer with the pen tool. It's usually helpful to have the sketch on a layer at the top set to overlay mode as you can then check you are following the rough idea. When we have the base layer laid down we can then start to fill in certain shapes with layer styles such as gradients and inner glows to give definition. The pattern overlay tool can be quite useful to give some texture in certain areas.

Highlights And Shadows
When we have filled in the base layers with colour and some effect we can start building up highlight layers for each of these examples. The main concern with the highlight layers is to reinforce the overall shape of the icon, be it a sphere, pipe, or circle. So on this Icon, we use a lighter shade of grey to build up the curve of the rubber. The surface would be quite dull so the edges and highlights would all be quite soft. Lastly some shadow layers complete the overall impression of the icon shape.

If you want to apply a nice edge highlight, try putting an inner and outer glow on a shape and then setting the fill content to 0%. Use a layer mask to knock out the shadowed side. Make sure to click “Layer Mask Hides Effects” in the Blending options palette All through these layers, masks are used to bring down the edges of highlights or bring up shadows in certain areas. If you are unhappy with the angle of something , clicking on the approriate point with the Direct Selection tool and nudging the point with the arrow keys usually solves most issues.

Smaller Sizes & Exporting
While the Icon we’re building may look decent in 128x128, the majority of the time it is going to be viewed in a smaller size in the Dock, sidebar or Column/List view. So we have to think about what we do to make it look well at smaller sizes. Sometimes a simple scale and sharpen will work. Other times, it helps to build a version of the Icon specifically at that size.

The vector nature of this method helps making scaling or style changes at a later date without any loss of quality. This Icon could be scaled up to 256x256 or larger and only the layer effects and masks need a small cleanup to match the 128x128 look. With the 32 and 16 resouces we can zoom in and see what detail if any we can clear up. One tip is to sharpen the edges by judging the overall colour of the icon and applying a very subtle stroke using that shade to harden the edges of the icon. Thus in list and sidebar locations the icon can be more visible. The final step is to build the icon resouces in IconBuilder (using the IconBuilder Photoshop template, you can instantly fill in the various sizes by clicking QuickBuild). For most Application Icons, you will be creating a ICNS file.


Metaphors and Wild Fowl
An Icon is not a turkey. Stuffing it with extra elements will not give it more flavour. If the urge to fiddle is overwhelming, take a break from the Icon for a few hours and come back to it. The Icon can be given extra elements like little light indicators or graphics on the button but are they contributing to the meaning or just an excuse for pixel pushing? Simple is very hard to achieve consistently but it’s something that’s worth aiming for.

I’ve made a little movie of the process so you can see the general buildup of effects. I could have given the PSD but I think it’s better to show the general process rather than the exact settings and layers for one specific piece of artwork.

View Quicktime Movie - 2.7mb
Download the OS X Icon File - 163k

[tutorial and images © Cian Walsh of AfterGlow Design]

收集http://www.redbots.cn/resources/2009/02/12/7673.htm

I've had a few requests for insights into the process of making icons. Instead of answering individually, I've decided to make this the first subject of a range of articles to be authored here at PixelResort.

This won't be a tutorial or a step-by-step walkthrough, more like a general guideline based on my own experience. It's how my workflow crops up. Enough disclaimer, let's see if we can make an icon. To illustrate the creation of an icon, I've decided to redraw my old TextEdit icon from the bottom up.

Sketching

Sketching is an important tool in defining the concepts of your icons infancy. Sketching shouldn't be accurate, it's all about getting your ideas down on paper.

Unconsciously you make alot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you're drawing something completely alien to you.

Where to Start?

When that unceremoniously blank photoshop document is staring back at you, it might be hard to know where to begin. My advice is, start with large and defining elements of the Icon. In this case the wooden pad sets the perspective and works as the foundation of the icon.

The Pen Tool

The Pen tool is the iconists best friend. It takes time to master, but it's the heart and blood of icon creation. Even though your finished work will be raster based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there's no tomorrow.

Blending Options

If the Pen tool is the iconists best friend, blending options is the beer they enjoy together. Blending options are way more powerful than many recognize. The subtle symphony of individual styles can create almost any texture and surface.

I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don't be fooled by the labels adobe has given the individual options - an inner shadow doesn't necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.

Organize!

As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.

Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking alot easier.

Smaller Sizes

As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512????512 pixels (leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).

Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won't be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as it's least attractive size. Make those pixels count!

Packaging

When you've spend a few hours perusing the details and tweaking everything to your satisfaction it's time to pack up the icon. Personally i use Iconfactory's marvelous IconBuilder. It outputs Mac & PC formats without a blink.

Ultimately the creation of each icon is inheretly different. To say that I haven't gone into detail is a mild understatement. There are quite alot of aspects which i haven't covered, but I hope that i've shed some light on the process of making an Icon.

Download

Download the finished icon from the Icons Section.

I'll be happy to answer any questions in the comments.

Author: Michael Flarup
URL: http://pixelresort.com