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).
For the purpose of this example I added few clouds
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.
Choose 600px Soft Brush and carefully mask bottom of the rectangle os that top line stays visible across the document.
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.
Do the same with bottom part just change the Brush color to Black.
With Line Tool draw in a line just the same width as small rectangle. For color choose #8dd1fe.
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.
I added some floral brushes just to recreate the same background from the example 🙂
Add Inner Shadow filter and use settings like shown in the image.
Done! What, that’s it? Yes, that’s it! Simple and effective.