Wrap Around

Wrapping elements around your design can create a lovely 3D effect to your design. Lets say you have a situation like this:

And you want to add a bit of pop to it. First of all, grab the rectangular marquee tool and make a shape like below. Fill that with a nice color, anything will do really, as long as it looks right. I’m going to go with #6492c0. Rename tis layer to “Rectangle”

Set your foreground color to something like #36516b (a darker color) and pick your pen tool up. Then it’s just a case of drawing a shape like below in the left hand bottom corner of your shape.

Then drag it down to below your white rounded rectangle layer in the layers palette. Rename this layer to “3D Effect”.

After that it’s just a case of adding some finishing touches to your 3D effect. Duplicate the “Rectangle” layer, and rotate it as shown below.

Hold ctrl and make a selection of this rotated “Rectangle” layer by clicking on it’s thumbnail. Fill it with black, and go to Filter » Blur » Gaussian Blur. Set the amount to around 3.8, and click OK. Then all you have to do is lower the opacity on this layer down to around 20%. You can mess around with the rotation too, until you get the desired effect.

Finish off with a few gradients. I also outlined the “Rectangle” layer just be making a new layer, grabbing the pencil tool (1px) and drawing round the edge in #719cc8.

Which will give you a final result of this:

Perspective

Perspective is another great way to add depth to a website. With the use of color to create shadows, and angles you can make it seem as if your web layout is sitting off the page.

Using the pen tool and rectangular marquee tool to make simple shapes is easy. Here’s a little look at a very basic perspective styled layout

Now obviously you could make this a lot more complex, and my example is just a very basic one. If you’re a bit rusty with the pen tool, why not check out our lovely tutorial on it which you can find here.

Pixel Lines

Pixel lines are another great way for you to add a tiny bit of depth to your design. Although tiny they can really make your design seem more defined.

Pixel Indents

Pixel indents amount to two 1px lines beside each other. One is usually lighter than the other (i,e. black and white). This creates the illusion of an indent into the layout.

Here’s an example of two colors: a dark green and a lighter shade beside one another.

To make the line between the two more defined, we can use the pixel indenting effect. Just draw two lines, one black and one white on the divide between the colors so that the black is on top of the darker color and the white is on the lighter one.

Then it’s just a case of lowering the opacity down a tad so that you get a result you’re happy with. I’ve lowered mine down to about 50%, and ended up with this:

Of course, this is a very basic example, but it should work in most situations.

Pixel Lines

This time we’ll just be looking at simple pixel lines. Adding a lighter sharp line to a design can really make it pop. Here’s an example of a shape I just made.

To get the effect we so desire we’re going to have to use a drop shadow. If this was just a rectangular shape we could just draw a 1px line with the pencil tool. So right click on this layer and select “Blending Options” and go to Drop Shadow and give it these settings:

You should end up with something like this:

The effect is very subtle, but it can create a really nice finishing touch to your design. One pixel shadows themselves can help add depth to a picture or object, and you should try messing around with them to see what results you get. (See section on shadows below)

Gradients

Gradients can add depth to your design too. They’re especially useful on buttons and stuff like that, as they can give the user the feeling that they’re actually clicking on something if you have a hover over effect enabled. Just for simplicity lets use the same shape we used in the last example. Here it is with no effects, just a shape:

And here it is with a gradient:

The gradient helps the shape to seem as though its sitting off the page a bit.

Shadows

Shadows are the classic way to add depth to an element or object in web design. It gives the illusion that the object is sitting off the page in some way, or floating as it were. First of all you have to realize what a shadow is: it’s basically just the shape blurred in a darker tone than the background it’s on, and that’s the premise you will be working on when making shadows for your shapes.

Classic Shadows

These are just your regular every day shadows with no added bells and whistles. You can get these just by messing around with the default drop shadow settings in blending options.

One Pixel Shadows

There are a few types of shadows. First of all is the one pixel shadow we utilized earlier when trying to outline our shape. This can be used in more than one way however, and can add a nice embossing effect to objects:

Which uses these settings:

“Stuck down” Shadows

These shadows give the illusion that one or more of the edges is glued to the page. We did this before in the “wrap around” example at the top, where we simply duplicated the shape we wanted to have a shadow, rotated it a bit so that it appeared to be coming from a certain point on the shape and blurred it.

That’s about it for this nail biting tutorial, hope you’ve learned something new. Maybe you’ll even be able to put some of these techniques into place around your own website. Thanks for reading and happy photoshopping!