Date post: | 16-Jun-2015 |
Category: |
Technology |
Upload: | hicksdesign |
View: | 5,810 times |
Download: | 0 times |
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