I should begin by explaining why I’m doing this guide in the first place. I believe that every designer has a right to know what many of us have learned via trial-and-error and word-of-mouth teachings. I’m quite aware that this is not the first UI guide that has ever been published, nor do I expect it to be the last. I do believe it might be one of the first to really attempt to explain the why in parallel with the how.
Probably the most crucial thing to understand is that simply knowing how to make and style these elements does not make one a designer. Rather, these styles are merely a shell; the equivalent of putting lipstick on a pig. One must understand why using a particular element and styling it in such a fashion makes it work (or, conversely, not work). A designer must understand that without utilizing design fundamentals and giving careful consideration, such elements are meaningless on their own.
I’ll be covering several different types of elements, and each post will be continually updated as I receive more suggestions for content and as I get more time to develop the article. I’ve also included a few general Photoshop tips that will make your life a little easier. Instead of including all the screenshots of the layer styles I used, I’ve attached a .PSD with everything you see in this tutorial.
General Photoshop Tips
- Global Light: Make sure your Global Light is set to 90 degrees, rather than the default 120 degrees. Your objects will look more natural, and it will save you headaches later on.
- Remove “Copy” on Layers: If you are using Photoshop CS5: in the LAYERS window, click this icon and select “Panel Options”. Deselect “Add ‘Copy’ to Copied Layers and Groups”.
- Snap to Pixels: Select the Rectangle tool, click the dropdown arrow in the top toolbar, and make sure “Snap to Pixels” is checked. Do this for the Rounded Rectangle tool as well.
- Perfect Circles: To make perfect circles, select the Rounded Rectangle tool and set the radius to some ridiculously high number – then press and hold “shift” while dragging to create your shape. Because the Rounded Rectangle tool has “Snap to Pixels,” the shape will be crisper than if you had used the Circle tool.
There are many, many different ways of styling buttons but I am going to focus on a few that I think are quite effective and useful to have in one’s toolkit.
Ah yes, the old standby. This style of button is pretty much everywhere right now, and is likely the easiest to pull off. One thing I recommend is to make sure the gradient is subtle and not blatantly contrasting, otherwise it looks cheesy and ridiculous.
Glossy with glow
A slight modification of the original glossy button, this tends to have a less linear-feel to it. This is due to the added “Inner Glow.”
If used correctly, this style can look really sharp. One major change to this button is the addition of a raster layer (as opposed to vector) – the texture layer which requires use of the brush tool.
Nothing more to the button than the layer shape itself, but if there are a lot of CTAs in the design this style can be quite effective if used correctly. One site that comes to mind which uses this in a stunning manner is Kickstarter.
This is a bit of a touchy subject, but I’m throwing caution to the wind and just going to state what I think people are doing wrong, and why it is wrong.
Hover styles for buttons should generally follow one of 3 basic rules:
- The button should get lighter
- The button should get darker
- The button should change color
Follow these three, and you can never go wrong. Of course, there are more what I would call “experimental” additions to hover styles, such as adding an outer glow. With the widespread adoption of CSS3 you’ll see these become more prevalent (and, as always, overused).
Too often I see the following styles across on the web, and it frustrates me to no end.
- The button should not reverse gradient
- The button should not move
If your button has a gradient, and that gradient is reversed upon hover – you’re doing it wrong. Not only is it hideously ugly, it doesn’t even make sense logically. If you imagine your cursor hovering over a button, why would the direction of the light source change from the top to the bottom? Secondly, if we assume a user hovers over a button with intention to click through, why would the element move 1-2px downwards/upwards (away from the cursor)? Sometimes it is so bad that you have to practically chase the button around the page. Please, just, no.
“The user will die if they discover, a gradient reversing upon a hover.”
Similar to Hover states, Active styles should pretty much fall within 3 categories:
- The button should move down 1-2px
- The button should reverse gradient
- The button should get even darker
The gradient should be reversed, and the lighter side of the button (the bottom) should be darkened up a bit so the lighting doesn’t look unbelievable.
The next part of this series will be on Backgrounds. Once I go through most of these elements, I will explain and show how they all tie together. Additionally, I’ll go through some exercises that demonstrate best practices and techniques to combine various styles effectively. If you have any suggestions for elements and styles you would like to see, sound off in the comments and I’ll be sure to consider them for the series.