Hello!

JON HICKS : HICKSDESIGN

Pixel Pushing An Introduction to Icon Design

What kinds?

FAVICONS

WEBSITE ICONS

WEBSITE ICONS

DESKTOP ICONS

The Metaphor(The theory bit)

EVERYDAY ICONS

EVERYDAY ICONS

cadenhead.org

WHEN NO CONVENTIONS EXIST…

STANDARDISATION

THE METAPHOR

Keep the idea simple and memorable

If there is a convention - consider following it

If it’s a home icon, make it picture of a home!

WAH! I DONT WANT TO GO!

WHICH METAPHOR?

MAKE IT FUN IF YOU CAN!

APPZAPPER TRANSMIT

Anatomy of an icon(The Techie bit)

MIRO ICON

512px

256px

128px

48px

32px24px

16px

APPLICATION ICON RESOURCE CHART

16 24 32 48 128 256 512

OS X 10.5 .icns • • • • •

OS X 10-10.4 .icns • • •

Windows Vista .ico • • • • • •

Windows XP .ico • • • • •

Windows 95-2000 .ico • • • •

Linux .svg .png • • • • (uses .svg)

Favicons .ico • •

lewisfrancis.com/ud/faviconic/

RESOLUTION

INDEPENDENCE

BITMAPS DON'T SCALE UP

CODA USING PDF

Only suitable for simple icons, not for complicated photorealistic illustrations

๏ Opposite of bitmaps: The more they're reduced, the fuzzier they get

๏ Huge files: 100k vs 3mb

๏ Bitmaps are quicker for GPU to process than vectors

PROBLEMS WITH VECTORS

512px vs 16px

VECTORS DON'T SCALE DOWN!

Create your artwork as large as you can as a vector (×2 or even ×8)

THE SOLUTION (FOR NOW)

Icon Workflow(Finally, the 'how you make it' bit)

RESEARCH

SKETCHES

SKETCHES COLOURED IN PHOTOSHOP

SKETCHES COLOURED IN PHOTOSHOP

SKETCHES COLOURED IN PHOTOSHOP

ILLUSTRATOR

ICONBUILDER

DONE!

Tips for drawing icons

USE CONSISTENT LIGHTING

HIGHLIGHTING EDGES

TURN ON SMART GUIDES

GLOBAL COLOURS

FAMFAMFAM.COM

Applications

AXALIS ICON WORKSHOP

FREE TOOLS

CANDY BAR

CANDY BAR

๏ Inkscape is especially suited to making Linux icons - direct to .svg

๏ Other good free tools like png2ico or online apps like favikon.com

FREE TOOLS

h!p://delicious.com/jonhicks/icondesigntalk

Pixel Pushing An Introduction to Icon Design