1. Hello!

2. Icon Design Explained
(quickly)
JON HICKS : HICKSDESIGN

3. Anatomy of desktop icon
(The Techie bits)

4. 48px
MIRO ICON
128px 32px
24px
16px
256px
512px

5. SCALED DOWN REDRAWN

6. SCALED DOWN REDRAWN

7. 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 • •

8. Tips for creating icons

9. THE METAPHOR
Keep the idea simple and
memorable
Don’t feel you have to be too
literal…but…
Don’t be abstract for the sake
of it - if it’s a home icon, make
it picture of a home!
Make it fun if you can!

10. EXAMPLES OF ‘FUN’
APPZAPPER TRANSMIT

11. USE CONSISTENT LIGHTING

12. My Workflow

13. RESEARCH

14. SKETCHBOOK

15. VECTOR SKETCHES

16. ADOBE ILLUSTRATOR or FIREWORKS

17. ICONBUILDER

18. DONE!

19. FREE TOOLS
๏ Inkscape is especially
suited to making Linux
icons - direct to .svg
๏ Other good free tools
like png2ico or online
apps like favikon.com

20. Icon Design Explained
(quickly)
h p://del.icio.us/jonhicks/
icondesigntalk