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).
nav

 

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.
nav_1

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

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

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.
nav_4

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
nav_5

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

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.
nav_7

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

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.
nav_9

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

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
nav_11

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

 

 

 

 

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.
type_inset

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

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

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

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

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