Advanced photoshop techniques for web designers- Part 3/3

Sep 30th, 2009 |  No Comments | Twit this! |  delicious |  digg |

SubscribeFacebookFurlStumbleUponTechnorati

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.

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

Step 2
Draw in a white Rectangle.

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.

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

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

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.

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.

Step 1
New Document filled with Black.

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

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.

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.

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

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

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

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.

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

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.

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.

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