Process
2011
Description
A description of my production processes
Fields
User Interface Design, Production
  • Process
    How I approach UI production
  • In order to get the most out of my time, I employ as many techniques as I can to shorten my production time.  Luckily for me, Photoshop has all kinds of amazing tools for accomplishing this.  Most notably, I use both an action library and a style library.
  • The Action Library

    Actions are completely vital to my work.  Any time I think I may have the need to do something mo    re than once, I go ahead and hit the     record button.  Creating useful actions is something of an art form.  I have the full Photoshop CS5 keyboard shortcuts document within arm’s reach at all times.  

    I would love it if Photoshop had some kind of action inheritance built into the framework.   Instead, I try and fake it by creating actions in an increasingly specific group structure (for example: “General > UI > Project”).  Project specific actions are incredibly useful to me.  Recently I worked on a project in the Unity engine, which uses “GUIskins” to theme the entire UI at once.  For that project I created an action which populated a chosen adjustment layer (of any kind) out to the all of the skin files, so that I could create color variants.  Then I had another action which would save all the appropriate skin files out to a new folder.  

    Photoshop actions save a ridiculous amount of time for me, and enable me to test more options than I would ever have the time to see through on my own.  Plus… making them is just… fun.  Makes me feel like a programmer ;)
  • The Style Library

    I’d like to think that my time as a programmer has had some effect on my processes as a UI artist.  For every project I take on, I try to keep a library of associated custom photoshop actions, styles, brushes, and shapes.  In this post I’m highlighting the idea of a style library.

    Many artists will turn their noses up at Photoshop layer styles.  I’ve found them to be absolutely invaluable in my work.  Layer styles fall into a loose category of “procedurally generated art.”  You can create whatever shapes you need, and with the click of a button, VOILA!  Suddenly you have that perfect, super shiny button.  You can make incredibly robust styles by incorporating patterns; this can allow the artist to mimic all kinds of awesome materials without having to meticulously paint each element separately.

    I’ve found this technique is PARTICULARLY helpful when you have more than one UI artist on a project.  Your lead UI can crank out a ton of these styles and then say to the other artists, okay now make me compositions of the following screens using these styles and these wireframes.  
    Layer styles. For the win.