Advanced photoshop techniques for web designers- Part 2/3

Sep 28th, 2009 |  1 Comment | 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. Navigation Menus
The most important part of a website: the navigation. I’ve chosen the example that uses some transparency and fade out effect (taken from legacylocker.com).

Step 1
Open a New Document, same dimensions from previous example. Create a New Layer and fill it with Gradient Overlay using the color hex values you can see in the image.

Step 2
For the purpose of this example I added few clouds

Step 3
Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.

Step 4
Add a Quick Mask to this layer. Choose 200px radius Soft Brush, set the color to Black and mask the ends of this rectangle, like you see it in the image.

Step 5
Draw in another Rectangle, but much higher. Put it under the small rectangle. Use the same color and Opacity. Again add a Quick Mask to this layer

Step 6
Choose 600px Soft Brush and carefully mask bottom of the rectangle os that top line stays visible across the document.

Step 7
Now we can play a bit with the small Rectangle by adding some light and shadows. Cmnd (Ctrl) + Click small Rectangle to make a selection out of it. Go to Select>Modify>Contract and enter 1px. Create a New layer and set Mode to Overlay. Choose 200px Soft Brush, color white and click few times the top part of the rectangle just like you see in the image.

Step 8
Do the same with bottom part just change the Brush color to Black.

Step 9
Here you can see how this looks like. It’s really a subtle effect of light and shadow which you can use wherever you want.

Step 10
With Line Tool draw in a line just the same width as small rectangle. For color choose #8dd1fe.

Step 11
Mask the ends of the line just like we did in Step 4. Copy this line and shift it to the bottom of the small rectangle

Step 12
Finally I added some Navigation items and that’s it!

2. Typography Inset
Even though we’re used to seeing this technique now, it’s still a good skill to add to your toolbox. Please use it only if you have to The example was taken from forabeautifulweb.com.

Step 2
I added some floral brushes just to recreate the same background from the example

Step 3
Choose Type Tool, set font to Times New Roman. Choose color #591e0d and type something.

Step 4
Add Inner Shadow filter and use settings like shown in the image.

Step 5
Add 2px Outside Stroke with color set to #bc9f6c.

Step 6
Done! What, that’s it? Yes, that’s it! Simple and effective.