How to Create 3D Separators
I’m sure you’ll agree that in the world of website design, every one of us comes across little tips and tricks that will just stick with you and could be called upon at any time. One in particular that springs to mind for me is the if the inset separator commonly used to divide menu items on a navigation, either horizontally or vertically.
This is a very quick and easy way to give your designs a little attention to detail, which I’m sure you could use time and time again.
5 Steps to creating the effect
You can follow this tutorial using the simple steps and how to create the effect using Photoshop or a similar graphics software solution.
1. Firstly, I’d start of by creating the background for your navigation bar, and also include the text for your links, as this will help you to position the dividers with the correct amount of spacing. In this example I will be using a horizontal navigation
Draw in the Single pixel lines using the pencil tool
2. Create 2 new layers and reset your colour palette to the black and white original state.
Reduce opacity settings to create the desired effect
3. Using the pencil tool set to 1 pixel diameter, draw firstly, a black line on the first layer, and a white line immediately next to it on the second layer. The reason for keeping the two lines on separate layers is to ensure that we have control over each independently.
4.Use the opacity control, and adjust according to your preference, gradually bringing down the opacity to reveal your navigation bar beneath. The aim of the effect is to have 1 line, a little lighter than the navigation and the other a little darker, creating the effect of having a slight groove between the menu items.
5. Once you are happy with your opacity balance, you can then merge the two layers together, and repeat and copy for each menu item within your navigation.
You can try experimenting with this to create stunning vertical navigation’s too.
The final result…
Here’s an example of the finished effect as part of my navigation.
Replicate the separator across each of your navigation links
Great tutorial!
I used one of your previous web design tutorials, I think it was the one where you were creating an Apple-Style Navigation Bar, to help me to create the navigation bar itself, and then edited the separators for it a little bit using this tutorial and it looks brilliant, thanks guys. 