Time Intensive Button Design

ButtonI’m already on record with the contention that the high-touch, rendered and shaded school of aesthetics — as most prominently represented by Apple’s Aqua — is the inevitable future, probably, of user interface design. For a new Behavior project in which we’re building a series of interactive demonstration modules with Flash, we decided to take a crack at producing some really lush, ornate design comps as a possible visual solution. This is really my first concerted effort at this kind of Photoshop jockeying, so it’s entailed a good deal of extra time trying to learn the ins and outs of making dimensional widgets look convincing. It’s not all that difficult, but it’s not all that easy, either. I’ll tell you one thing, though: when I looked at the clock and saw that I’d spent almost six hours working on two buttons and a slider, I realized that this kind of work takes a long, long time.

+

5 Comments

  1. Eric

    I would be interested in seeing some of your sketches… I too have attempted this sort of thing and have never achieved the sort of “reality” that I was after. If you have any tips, send them my way.

  3. Ben Listwon

    Heya Khoi,

    Been a reader for a while now, figured I would start getting involved. Love the site, btw, and a lot of the work that goes on over at Behavior interests me as well.

    I have made a few buttons, icons and widgets in this manner before. I agree with you statement that User Interfaces will trend in this direction in the future, but I think we will begin to see less pixel based solutions and more vector based artwork, which will change things dramatically.

    That said, a very quick approximation of Aqua’s buttons can be made with the Satin blending option in Photoshop.

    1) Start with a white button shape, then apply the Satin option.
    2) Adjust the Blend Mode to Screen, change the Color to white. You may also have to reduce the Opacity to around 50% or less.
    3) Adjust the Angle, Size and Distance to your liking.

    It takes some fiddling, but it can get really close to Aqua’s look.

    –Ben

  4. Khoi Vinh

    Ben: you make an excellent point about all of this being done in vector-based solutions. I think you’re right. We have a terrific freelancer working with us at Behavior this month; she did some work on the demos I mentioned, but she did them all in Illustrator. Having not bothered to learn Illustrators newer features since roughly version 6, I was pretty impressed that such detail was possible.

Thank you! Your remarks have been sent to Khoi.