User Interface Design – Button Styles

I’ve recently been tasked with creating some banner ads for a new multimedia campaign, including email blasts and banner ads, so I thought it might help some others to see a little tutorial on button creation. Obviously there is a lot more to User Interface Design than creating cool looking buttons…but…cool buttons drive user interaction.

If you pay attention out there on the internet, there are a lot of different styles of buttons. Most of what you see these days include a number of effects to make them “POP”. Often they are using rounded edges, sometimes the pill shape. The “glass shine” effect is super prevalent too. We all know the glass shine effect now, courtesy of Apple and their icon system for OSX, the iPhone, and iPad.

Camera RAW Post Production

Sucky photography aside, I’ve worked on so many projects where image post-production becomes a seriously time consuming issue. Sometimes there’s just no way around it…you’re working on a web site or a catalogue where you inevitably have hundreds of images to process. Or maybe you’re working on a personal project and you only have a handful. Either way, one of the most overlooked details out there in design is the production process. Your web site or catalogue is only as good as the images look. When you’re trying to sell a product, it’s paramount that the images look as good as possible.

If it’s food, you want people’s mouths to water. If its products, you want the images to pop from the page and shout “buy me!”. If it’s tech gadgets, you want nerds to oggle and bite their finger nails. You get the point.

So how do you get the best image possible? What’s the best technique for image correction and color reproduction? Unfortunately, there is no single formula that will get all your images to look their best. Here’s some basics that relate to photography first:

Custom Warped Drop Shadows

We’ve all seen plenty of media out there that uses the drop shadow to help highlight the products that a company is offering. The drop shadow is perhaps one of the oldest little enhancements to designs of the digital age. With the advent of PhotoShop layer styles, it’s really easy to create drop shadows on elements of your designs.

But does that mean that a drop shadow will always make your element look better? Most certainly not. Just like typography, where there are good fonts and bad fonts, there are good drop shadows and bad ones. If you’re going to use a drop shadow, I suggest that it looks much more classy and elegant to use drop shadows that are light, soft and understated. Dark and heavy drop shadows rarely look good in my opinion. But like everything in design, there is alway an exception.

If you’ve visited my design projects page, you may have noticed the drop shadows and reflections of the images I created as a way to make the projects “pop”.

Warp Drop Shadow Method

I use a process of combining multiple methods to customize my drop shadows. Using strictly the layer style drop shadow is probably not as professional as making a well thought-out custom shadow. Here’s a quick tutorial on what I call the warped drop shadow. I like it because it helps really pop items that are on a flat plane, like pictures, etc. Follow me on my step by step here:

Valentine’s Background Pattern Tutorial

Yes, it’s that wonderful (or dreaded) time of the year again. Valentine’s day is upon us. I’ll spare my sarcastic musings on the consumerist nature of this holiday, and instead I’ll leave you with some design tips for this seasonal event that most retailer’s will want to promote.

1. First, you want to find some imagery to work with. I went ahead and did a google search for “grunge brown paper” to get some gritty paper. You can use all sorts of other ways to find images, but this is probably the quickest. I also like going to the art store and buying some really nice handmade papers, then I scan them to get a nice texture.

Making Custom PhotoShop Brushes

This is a pretty cool tip that can really add to your designs. Here’s my process for creating custom PhotoShop brushes from photographs.

1. Open a photograph that you want to use in PhotoShop. Try and pick one with some good texture you want to use to create a brush. I’ll give you one of my kick ass texture photos to play with here.

Sans-Serif Typography

So what’s the best family to use for sans-serif fonts? This is an age old debate with designers around the globe. Some will swear by Gotham, others will poo-poo Myriad, and idolize others still. If you want to pick from some of the fonts that are strongest in this category, below is a list of some of the best in my opinion:

• Univers
• Gotham
• Frutiger
• Knockout
• Chalet
• Myriad

It’s all about the family, baby. Personally I like to pick a sans-serif font that has a depth of faces in the family. Take the design comp I recently made for the Rincon Classic surf competition. I chose to use Univers Ultra-Condensed for the title. I like the Univers font family, because it has lots of faces, from ultra-condensed, to a the book faces that are clear and readable for body text.

While Univers is a favorite, I also like Gotham. Gotham is a nice high-end font, with several faces, and several condensed versions. From coffee table books to catalogues, Gotham is everywhere, and it says “Modern, Clean, Metropolitan”.

Hello world!

Death of HTML

I guess editing HTML and table layouts may now be a thing of the past. This is my first experience with WordPress, and I’m on a crash course to learning design and modification of WordPress themes as a side reel.

In the process, I hope to take some of my old school, analog design skills, and create some very cool tutorials for other up and coming graphic and web design jedis in the world. So this is my first post…up for debate. I think I’ll upload an image for my first design tutorial topic. It’s one of my favorite topics in design right now…creating custom PhotoShop brushes for use in your designs from your own photographs. Here’s a sample of a design I did using custom brushes made from photos of bamboo…Cheers -
MUZZE