Monday, April 13, 2009

From a blank canvas to cool icon, a Expression Studio tutorial that even I can follow… (Greg != Graphic Designer)

Designing for .NET - Creating Great Looking Icons with Expression Studio

“Before I start this tutorial, I would just say that there are a lot of aspects to consider when creating great user interface elements and iconography. I will  walk through an example in creating a standard icon using Expression Design. However before doing so I have compiled a list of reference links that I believe you should spend the time reading through and understanding. It is also necessary to have some historic perspective on icon design in the past and how it applied to different versions of operating systems.

Where to start…

Let’s look at some design tenants that were introduced with Windows XP via the XP user experience team and later expanded with Windows Vista..

  • The angle and perspective should be equal between the images (and objects within the image)
  • Edges and corners of objects are soft and slightly rounded
  • Light source is coming from the upper left-hand corner
  • The images should have a drop shadow
  • Outlines provide definition, objects should be drawn in a stroke pen of sufficient thickness that outlines the objects.
  • Use colors from the primary icon color palette (not such a requirement anymore at least inside of a WPF or Silverlight application), more related to backward compatibility with older versions of Windows and windows OS icons.)
  • The icon color palette is luckily fully documented as a set of 31 RGB color specifications
  • System Icons need to be provided in standard system sizes and palette colors (see the MSDN article I referred to above).

Expression Design

Let’s open up Expression Design and create some layers..

 ED1

ED18

Anyway that’s my tutorial on creating ICONS. With a little background and some really quick and easy tools you can have top notch UI elements quite quickly..”

I’d love to be able to craft/design graphic’s, but it just doesn’t click for me. Funny how the mind works. So anyway, any time I find a cool tutorial I like to capture it and work through them, just to see if it’s the spark I need.

Also make sure you click through as Don has included a number of links to related and like resources.

 

(via Visual Studio Hacks - Visual Studio Links #111)

No comments: