Hello!
Icon Design Explained
(quickly)
JON HICKS : HICKSDESIGN
Anatomy of desktop icon
(The Techie bits)
48px 128px 32px 24px 16px
MIRO ICON
256px
512px
SCALED DOWN
REDRAWN
SCALED DOWN
REDRAWN
APPLICATION ICON RESOURCE CHART
16 24 32 48 128 256 512 OS X 10.5 OS X 10-10.4 Windows Vista Windows XP
.icns .icns .ico .ico
• • • • • • • • • • •
• • • • • • • • • • •
• • • •
•
•
•
Windows 95-2000 .ico Linux Favicons
.svg .png .ico
(uses .svg)
Tips for creating icons
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!
EXAMPLES OF ‘FUN’
APPZAPPER
TRANSMIT
USE CONSISTENT LIGHTING
My Workflow
RESEARCH
SKETCHBOOK
VECTOR SKETCHES
ADOBE ILLUSTRATOR or FIREWORKS
ICONBUILDER
DONE!
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
Icon Design Explained
(quickly)
h p://del.icio.us/jonhicks/ icondesigntalk