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.
First thing first, the background. As usual by now, within New Document same dimensions like previous ones.
Draw in a white Rectangle.
Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and carefully mask all
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.
New Document filled with Black.
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.
Do the same with smaller rectangle but this time click on bottom center part of the rectangle.
Now, do the same for the background layer itself just use White as Brush color.
Draw in a 85×20 px rectangle, fill it with #555759.
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.
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.
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.