Lo-Fi: So Am I

Web design education, gathering web video, css and xhtml

Photoshop: use gradients sparingly


Where would I be without Photoshop?

Flipping burgers, probably. I’ve spent years mastering the tool of my trade, and even today I’m still discovering cool new things in Photoshop.

Something that I love doing is creating interfaces, and this includes creating buttons. There has been a buzz in recent years with the whole “Web 2.0” thing, and user interfaces often looked shiny and modern. This was achieved, in part, with stunning graphics such as nice push buttons adorning the pages…

Now for some simple tips

  1. Use gradients effectively. Gradients, when used subtly can look great. Try adding a small, light gradient to the top of your button to create that shine effect. Don’t go overboard and make sure you select the right colour – a lighter tone of the button colour is perfect.
  2. Rounded corners are more pleasing on the eye. 90 degrees square corners, unless your interface calls for it, are ugly. Rounded corners have been around for ages now, and with CSS3, you don’t actually need to create them in Photoshop! I’ve found that if they’re TOO rounded though, they look a little fat. Keep the corner radius to about 5/6 pixels for rounded perfection!
  3. Use shadows sparingly. And keep them minimal. Drop shadows can be an instant aesthetic killer if overdone. My favourite way of creating a button with a drop shadow is to set the distance to 0, the size to about 3 and the opacity to 50%. This creates a dark “glow” around the button giving the impression that it’s lifted slightly off the page.
  4. Save as PNG files. Most browsers can handle transparent PNG’s these days, so take advantage of it. If you save in PNG format, they can sit comfortably on any background you want without looking silly.
  5. Avoid bevelling. I was going to suggest using bevelling carefully, but to be honest; nobody has used the bevel tool for about 7 years and with good reason. Bevelled corners just look naff, so avoid them at all costs!

Interface design doesn’t stop at button creation, and I will probably write an accompanying article in the near future. Just keep in mind the above tips when creating buttons using Photoshop. It’s relatively easy to make something that looks out of date so you must be careful with the tools at your fingertips. If you get stuck simply take a look around the web and see how other modern websites have designed their buttons, there is a lot of inspiration to be had out there. Good luck!

One Comment

So, what do you think ?