Okay, so everyone is doing it. And that probably means you should too. (Isn’t that what Dad used to say?) Adobe uses the look for their application splash pages. Apple uses the look through out their Leopard UI for both type and graphical elements. Heck, I use it on this site. And if I use it, it must be good!
We will be specifically talking about the “beveled” look, or whatever you want to call it. It’s essentially the look that gives a nice clean feeling of depth, without making the type or text look clunky or overweight. UI’s or GUI’s can often be quite complex. There is no need to burden the eyes with flashy in-your-face graphics. A good user interface is there to present and locate information and data being requested by the user. The UI shouldn’t be the center of attention.
Some examples
Examples of the bevel
You’ll notice that the Apple finder window and icons/buttons make use of the bevel. In the center Adobe is using the bevel look on type. On the right, Yahoo is even using the bevel look on it’s search bar.
The basics
Okay, so what are we really dealing with here. Let’s start with an extremely simple example. We’ll just be creating a horizontal bar that could potentially house some navigational elements.
Open Photoshop and create a new document with dimensions 800×40. Select the Rounded Rectangle Tool and enter in a corner radius of 5. Set your foreground color to #999999. Then starting in the upper left hand corner drag out your rectangle to be the full width of the document and slightly taller. Your result should look like this:
Step 1
After you have your shape, you’ll need to apply a gradient. I do this by applying a layer style. It’s the little fx at the bottom of the layers palette. Once you click on that, enter the following settings:
Step 2
Next comes a stroke. This provides the outer most contrast when it sits above other things. This is important in a UI like an operating system when you can have many windows on top of each other. Here are the settings:
Step 3
Finally, while we are still in our fx palette we’ll apply an inner shadow. This will provide the contrasting highlight, which is essentially what creates the bevel. Use the following settings:
Step 4
At this point we are starting to look pretty good. Your document should look like the following:
Step 5
Next Steps
Okay, so we’re doing pretty well. We have the advantage of applying our bevel via layer styles so they can actually be transferred to other elements to retain the same look and feel. Copying layer styles is easy. Just right click the fx on your layer and select Copy Layer Style. Then just paste it to whatever layer you need it on.
If we were going to add some visual element beneath this, we would want to manually draw a 1px highlight with the pencil at the very bottom in a dark grey. This make the next corresponding highlight really pop.
Type
The treatment for type is nearly the same. And we can accomplish the whole thing through layer styles again. I’ll just model the type after the Adobe Illustrator application splash.
Open up Photoshop, if it isn’t already, and create a new document 200×200. You can just fill it with a solid orange. Or play with a radial gradient like they have. The background is not important here as we are focusing on the type.
Go ahead and type “Ai” into your document. I don’t know that I have the actual typeface that they use, but I just used Myriad. It lacks the little “serify” thing off the top, but oh well.
Next, go into your layer styles and select Drop Shadow. You’ll need to enter in the following settings:
Step 6 - Drop Shadow
To add the subtle depth Adobe uses, you’ll want to add an inner shadow. Settings:
Step 7 - Inner Shadow
That’s really about it. Your final image should look something like this:
Adobe Type
Looks pretty nice! This may or may not be the way they actually do this. I personally like this approach because of it’s flexibility. For instance, if you need to change it to say “Ps”, you just need to type in the new letters and the layer styles are maintained. And, as mentioned before, you can copy the layer styles across multiple elements to maintain consistency.
Go ahead and use the technique to work stuff up in your own GUI’s. It’s clean, fast, and sexy. And that’s just how I like ‘em ;)
Saaaaweeeeeet!
Yeah, it’s pretty cool.