By Marko Prljić

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, we are going to show you how to create five killer effects for your site.

 


 

1. Faded Shadow
With a little bit of Blur and Quick Mask we can create shadows that fade out in any direction we want to. With this effect you can make boxes look like they pop out of the background. This example is from mint.com.
fade_shadow

Step 1
First thing first, the background. As usual by now, within New Document same dimensions like previous ones.
faded_shadow_1

Step 2
Draw in a white Rectangle.
faded_shadow_2

Step 3
Create a New Layer and place it under the white rectangle layer. Cmnd (Ctrl) + Click white rectangle shape. Fill the empty layer with Black.
faded_shadow_3

Step 4
Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.
faded_shadow_4

Step 5
Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and carefully mask all
faded_shadow_5

Step 6
Now this was pretty easy, don’t you think? Now you can play around with this technique and who knows what awesome results you’ll get.
faded_shadow_6

 


 

 

2. Depth and 3D Space
More and more interesting 3D elements are being used in web design lately. Here you can see how with just few extra layers, you can create an illusion of 3D space. This example is from mosaiko.com.br.
depth

Step 1
New Document filled with Black.
depth_1

Step 2
With Rectangle Toll draw in rectangle and fill it with #21262a.
depth_2

Step 3
With same tool selected draw in another, this time smaller rectangle and fill it with #191b1d. These two rectangles will create our space on canvas. It will look like a wall is passing through it.
depth_3

Step 4
Cmnd (Ctrl) + Click bigger rectangle shape to get a selection. Create a New layer. Choose 300px Soft Brush, color Black and click few times in top center of the selection.
depth_4

Step 5
Do the same with smaller rectangle but this time click on bottom center part of the rectangle.
depth_5

Step 6
Now, do the same for the background layer itself just use White as Brush color.
depth_6

Step 7
Draw in a 85×20 px rectangle, fill it with #555759.
depth_7

Step 8
Add following effects. Drop Shadow – Color: Black, Opacity: 25%, Angle: 90, Distance: 1px, Size:4px. Inner Shadow – Color: White, Opacity: 7%, Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay, use values provided in the image.
depth_8a
depth_8

Step 9
Choose Pen Tool and draw in a shape like you see in the image. Fill it with #555759.
depth_9

Step 10
With a little use of Quick Mask and some Brushing we will create the illusion of 3D space. First add a Quick Mask to the layer and with 100 px Soft Brush mask the sides of the stripe.
depth_10

Step 11
Next, select the whole stripe and choose 100px Soft Brush again. Create New Layer, set color to white and click few times at the beginning of the path but only with the top of the brush just like shown in the image.
depth_11

Step 12
I added some navigation links, copied few more stripes, modified the perspective a bit and there we have it.
depth_12