I’ve created this tutorial to show how to create some more graphical looking “containers” or “boxes”, usually intended for a web page. Five times out of ten, using simple solid colors on a web page is a better choice. However, the other 5 times you may need something with a little more style or fanciness. This tutorial will cover how to create a slightly more fancy box to be split up for a web page, but nothing over kill. Being subtle, especially when text is involved, is extremely important. You never want your user interface to be so flashy it distracts from the content. This “style” is a little trendy and may go away in the coming years, but it’s not nearly as trendy as several Web 2.0 styles that are going around right now, such as gloss highlights.
First we start with our image. For this example I created a 350×350 px image and created a rounded corner box (with 10 px rounded edges) with a fill color of #ececec on a background of #b5b5b5. I picked these colors arbitrarily, but it’s important that there is a contrast between these two colors so that the foreground “pops”. If these were closer in luminosity/value, it would strain the eye some and it wouldn’t “pop” as much.
Next, we open the layer styles of the rounded rectangle and add a “Gradient Overlay” style. You can do this by either double-clicking on the right side of the layer in the “Layers” window and then selecting “Gradient Overlay”, or by going to menu toolbar and selecting “Layers”, then “Layer Style”, then “Gradient Overlay”.The default settings should be correct for this, but in case you don’t have these settings, you should have a Normal Blend mode, a 100% opacity, a Linear Style, Reverse Unchecked, Align with Layer Checked, a 90′ angel, and your scale at 100%. The actual gradient we’ll edit in the next step. Right now your box should look like a solid white to black gradient, that’s ok.
Now we’ll add some very subtle highlights and shadows to the top and bottom. I’ve made these subtle, as I find that works best for anything with text, but feel free to make these color values as contrasted as you need. In the next step, you’ll be changing the color values of the gradient, and adding two color keys. First, click on the little box that is farthest to the left solid black, and on the bottom of the gradient (the top boxes control opacity). Once you have this selected, click on the “Color” box, and put in a color value of #e0e0e0. Next click below the the gradient bar to add a new color key box. Once you have this box selected, edit a location value of 10%, and a color value of #ececec. After this, repeat this step and add a third color key box by clicking right below the gradient bar, and enter a location value of 90% for this box, as well as a color value of #ececec. Lastly, select the fourth color key box which already exists, farthest to the right. Leave the location at default value of 100%, and just change the color value to #f0f0f0. You should have something that looks similiar to the image below. The reason we added these two keys at 10% and 90% is because if we were going to cut this image up for a web page and make it so it can resize via CSS, we’d want three image strips: Top, a Middle that tiles along the Y-Axis, and Bottom. If you were adding simliar highlights but just had a straight gradient with no solid color in the middle, your middle image would not tile correctly and would look weird.
At this point your image should be looking like this:
Next we’ll add a subtle highlight strip along the top of the image. In the Layer Style window where we added “Gradient Overlay”, click on “Inner Shadow” and make sure the checkbox next to the name is highlighted. Once you click this, you’ll see a default black shadow on your image. We’re going to change most of these values. Make sure the “Blend Mode” is set to “Normal”. Change the color to #f9f9f9 (just below white). Make sure the “Opacity” value is set to 100%. Uncheck the “Use Global Light” box and set the “Angle” to 90′. Change the “Distance” to 2px, the “Choke” to 100%, and the “Size” to 0px. Make sure “Anti-Aliased” is unchecked.
Once you do this, you should now have a subtle top-rim highlight along your box. Again, I’ve made the color contrast for this image very subtle, feel free to exaggerate the contrast as much as you’d like by changing the color values. For the highlight, it’s important that it be the same RGB value as the color you used at the very top of your “Gradient Overlay”, but you can adjust the Luminosity & Saturation values to exaggerate the effect. For anything that may have text on it at some point, remember subtle is usually better as not to distract from the text itself. At this point your image should be looking a lot like this:
Now let’s add a soft shadow around our box to make it pop a little from the background! From the layer styles menu, click on the “Outer Glow” option and make sure the check box next to the name is checked. When you first add this, a fuzzy yellow outline will appear around your rectangle. Let’s change some of these options to make our shape pop a bit!First change the “Blend Mode” to Normal. Then push the “Opacity” value up to 100%. Choose the “Color” box and change the color to #919191. Make sure “Spread” is 0, and then change the “Size” to 4 px. Make sure the “Range” is 50%, and “Jitter” is 0%. Leave “Anti-Aliased” unchecked.
You should now have a nice, subtle popping shadow around your box that looks like this:
This shadow is different than a normal drop-shadow because it’s universally equal in width and value around the entire edge. A normal drop-shadow works of an angle, and can create inconsistent results, especially when trying to cut up and image to tile it inside a web-page.
This next step isn’t always necessarily, but will be shown here for sake of this example. We are going to further pop our shape from the background by adding a very subtle stroke around our box. By doing this, go to the “Layer Styles” window and select the “Stroke” option. Again, be sure the checkbox next to the name is checked. When this is first added, you’ll see a thick red line appear around your shape. Let’s tweak some of these values to make it look more along the lines of what we would want.Firstly, change the “Size” to 1px. Make sure the “Position” is set to Outside, and the “Blend Mode” to Normal. Push the “Opacity” to 100% if it isn’t already, and change the “Color” to #7d7d7d.
Once you do all this, your image should be looking more complete, like the image below:
If you prefer a softer, more subtle edge, skip this step (5) and leave the results as in step 4. If you need to pop the window because of color choice or a busier background, you can use this step to create a nice extra layer of seperation from whatever you have going on in the back.
I hope this tutorial has been helpful. It’s fairly open ended, and you can change the colors and values to whatever you need. You can downloading the final Photoshop PSD below. It was created with Photoshop CS3.
[download#1]