Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [18]

By Root 381 0
with a “brainstorming tree.” This is a list of related words all linked together. So you may start with “emotion,” then under that write down the emotions you can think of. Emotions may be “happy”, “sad” and “angry.” From the sub list you would then add further categories, so you may write “amused,” “excited” and “in love” as an offshoot of happy. Continue on until you have a full list of emotions you want to draw. If you're including items in your set, think of items people might use in conversation such as, a love heart, flower, star and thumbs up symbol. Emoticons will need a bit more planning and refining than regular icons as the key to their communication is in the expressions. Draw your emoticons on a piece of paper and ask your friends or family to tell you what each one is. If people are having trouble guessing the meaning of a particular icon it could mean that the expression isn't exaggerated enough and you will need to add some more personality to the design. If you let your personality and creativity guide your work, emoticons can be lots of fun to share and create.

Rendering Styles


There are four main styles for icon rendering:

Hyper Realistic

Clear and Simple

Creative and Informative

Pictograms

Let's take a look at these icon styles and the best way to approach them in your workflow.

1. Hyper Realistic


When reading style guides such as the Apple Human Interface Guidelines or the MSDN Icon Design Guidelines, you will be asked to render in a style that's "Gorgeous [and] artistic" or "better than photorealistic." I like to call both of these styles “Hyper Realistic.” What this essentially means is that anything that's rendered should appear to be "better" than real. If you look closely at a photo you will notice that it looks real, but the tones become muddy in the shadows and the texture may be uneven. Icons should be just as real as photos without looking dull or “normal.” When you begin to design an icon think of emotive words such as rich, delicious and attractive. The icons from both Aqua and Aero have been designed to create an emotional response in the viewer. Whether this is achieved or not is up to your interpretation, but the theory is a good place to begin.

* * *

Seventy Seven by Luis F. Moreno


This retro replacement icon set was inspired by the seventies, the decade I was born, 1977. References to pop culture and strong communicative images to serve as a replacement for some system icons.

* * *

A Hyper Realistic icon is easy to recognize, but there's a few points to take into consideration when creating your own.

Keep the elements to a minimum. Remember that you're creating an icon, so the meaning should be clear and easy to understand.

Taste applies to icons too. Don't go crazy with the special effects; one or two should be enough to make the icon look great. Any more than that and it will look over-baked.

Stick to the brief. Even if you love a particular aesthetic, keep to the style of the platform you're working on. Your icons should be a balance between brilliant design and matching the icons around it.

A pixel in time saves nine. Don't rush in and render before the design is perfect, if changes need to be made it will cost you time and effort.

Don't let reality get in the way of a great concept. Have you ever looked at the transparent recycle bin in Windows 7 and thought, surely a bin such as this doesn't exist! (perhaps I'm the only one who thinks this much about icons, but I digress.) You have come across one of the great rules of Hyper Realistic icon design. Go with the "wow" and forget about reality. If you need to render a padlock, why not make it a super lock from the future with neon lights a massive chrome dial and a halo of light? Surprising metaphors and design concepts make the icon memorable — drawing in this style is pretty exciting too.

2. Clear and Simple


One of the most successful styles of icon design is the clear and simple approach. Each icon in a set is designed to have a visual balance so that the icons look harmonious

Return Main Page Previous Page Next Page

®Online Book Reader