Making computer icons

Concept

• What is an icon? What is a computer icon? What should a computer icon do? Why do we use them?
• Like fonts, icons can be closely tied to the OS. Think about file types. Most make sense, but fonts and icons are on a different level.
• Icons can also simply be graphics used in print, web, presentations, games, etc. In these cases, there are far fewer technical restrictions.
• In all cases, icons are a mosaic of squares. Pixels are still visible, although they probably wont be in the near future.
• For now, we are forced to design icons that may potentially be seen with 1 bit or 8 bit transparency.

Icons are everywhere

• http://www.famfamfam.com/lab/icons/
• http://iconshoppe.com/
• http://www.firewheeldesign.com/sparkplug/2006/April/icon_design_bitmap_vs_vector.php

Bit depth

• 16x16
• 32x32
• 48x48
• 128x128
• Interpolation-Allowing the computer to determine the color of a pixel
  

Platform

• Windows
• Mac

Tools

• Graph paper
• Photoshop
• 1 pixel pencil tool
• Graph paper
• Iconographer

Formats

• bmp, ico, png
• Copy/paste
• Favicons

Techniques

• Aqua: Watch the tutorial
• Brushed Metal: Watch the tutorial
• Layer Effects
• New window for icon
• Creating the system icon: Watch the tutorial
• Larger canvas size, guides and mask to show work

HANDS ON

• Create the following icons, at 16x16, 32x32, and 128x128, in both 8bit and 1bit transparency formats
  • home
  • email
  • key
  • music
  • search
  • users