Adding Some Depth

The pressed/embossed look is something that has taken off lately. My technique for achieving this is super simple and can add some extra depth to any design that is feeling a little flat.

Start in Photoshop

This all starts in Photoshop with color. I start by picking 4 colors that are slight variations of each other. Similar to the monochromatic studies of my youth. I do this by adding my base color to the art board and then overlaying 3 gray layers with a low opacity, like so:

Then I individually pick each of these colors with the eyedropper tool and add them to my swatches panel.
Now I can erase my color study and get to work.

For print

In print I usually use this effect in Photoshop layouts so I’ll just explain that.
My first step is always add the second-to-lightest tone as a background layer.

Then I add my object(a box in this example) with the 2nd darkest color as a fill on a new layer.

Then I will go into the layer style and add bevel and emboss. This is an “inner bevel” that has a direction of “down,” with “size” and “soften” set to 0. Then I set the highlight color as the lightest of the 4 colors and my shadow as the darkest of the 4.

Now you can copy that layer style and add it to other elements. Like text with the same fill color as your box.

For Web

Now I grab all of these colors and apply the same technique to CSS when creating content for the web. In this example I will add this to a simple div. First I’ll set up an html document and add the div with an id with a div id.


div id="pressed"

Now that I have that div on my page I can style it the same way I styled my photoshop layer. I will grab all of the same hex values for these colors I used in my photoshop layout. To add the height, width and background color I will do this:


#pressed {
    width:300px;
    height:100px;
    background-color:#002c2e;
}

After that I will add the darkest color to the top and left borders of the div to create the shadow.


#pressed {
    width:300px;
    height:100px;
    background-color:#002c2e;
    border-top:solid 1px #001818;
    border-left:solid 1px #001818;
}

Then I’ll add the lightest color to the bottom and right side to create the highlight of the div and center it within its parent element with “margin”.


#pressed {
    width:300px;
    height:100px;
    background-color:#002c2e;
    border-top:solid 1px #001818;
    border-left:solid 1px #001818;
    border-bottom:solid 1px #01a2a6;
    border-right:solid 1px #01a2a6;
    margin:10px auto;
}

Finally I add the background color to the parent element. In this case it is the body, since this is the only element on the page.


body {
    background-color:#015759;
}

After all of this I end up with an element that looks like this:

On Your Own

I’ve attached the html file and photoshop file for you to play with and modify. Feel free to do what you want with these. Enjoy!

Download Files

  • http://twitter.com/YesImAaron Aaron Cochran

    Hey there! Found this through a comment of yours on Smashing Mag. Nice tutorial. The only thing I would change is in your code. Really not anything to do with the effect itself, but I would use a class rather than a id on your div. That way you can apply it to any element on your page! With such a nice effect, you wouldn’t want to limit it to just one div element

  • http://twitter.com/wesleyterry Wesley Terry

    Aaron,

    Thanks for the comment. I’ve transitioned over to this technique recently. It’s funny because everyone like IDs as selectors in the past because they were supposed to be easier to work with in javascript. Now that “SMACSS” and “OOCSS” have become ubiquitous I think “modular” classes might be the way to go. I’ll be starting to write a couple things in SASS, so we’ll see how this all plays out. It’s cool to see how my approach to writing CSS changes in a year.