Introduction…

In this tutorial you will learn how to create a dark and glossy content box, with a unique navigational menu. If you have any questions, please leave a comment below.



Download the PSD…

Don’t have time to do the tutorial, but would like to see the results? The PSD is available to anybody who would like to use it. You can download it here.

Lets get started…

1. First lets create a new canvas 700×300.



2. Now, we want to go ahead and unlock our background layer. To do so double click, and then we want to change our background to #19191b.

3. Next, lets get out our Rounded Rectangle tool and set the radius to 10px and make a rectangle similar to the following:



4. Now lets input the following blending options on that layer:




5. You should have something that looks similar to this now:



6. Now we want to make a little navigation for our box. So lets get out the Rounded Rectangle Tool again and make sure its set to a 10px radius, and make a selection like the following:



7. Now, enter these blending options onto that layer:





8. Next, we want to add a shine to it. So, with your tool of choice, we need to create a shine. I used a rounded rectangle with a radius of 10px.



9. Now lower the opacity to 22%, and set the layer style to Soft Light.



10. Now lets add some text that will serve as links. For our active link, make it #01c6fd. For all the other links, use this text color #8e959d. This is how I set mine up:



11. Now, the next step is optional. I put a slight inner shadow on the text layer. If you wish to do so, input the following blending options on your text layer:



12. Next thing we want to do is add some dividers between each link to set them apart from each other. Use your marquee tool to create a 2px wide selection similar to the following, and fill it with black:



13. Now, we want to add some blending options to that divider layer, so input the following:




14. Lower the opacity of the layer to 50% and it should look something like this:



15. Next thing you need to do is duplicate that divider layer and place it in between every link and your result will look like the following:



16. Next, we need to get out our polygonal lasso tool and create a selection like the following. This will be the arrow indicating that this link is active:



17. Create a new layer and fill that selection with #ffffff, and then input the following blending options on that layer.




18. Your results will look like this:



19. You could stop here, but what’s the fun in that? The last thing we want to create a sort of ‘glow’ under your active link. To do so we need to use the Elliptical Marquee tool with a feather around 15px. Make a selection similar to the following and fill it with your #01c6fd:



20. Now, we want to get rid of everything outside the navigation. Find the layer that is the back of your navigation and CTRL+Click it to select it. then go to Select > Inverse, and then choose Ediit > Clear and it will look like this:



21. Now lower the opacity to around 31% and hopefully you’ll get something that turns out similar to this:



22. That is, your done! Now all you have to do is add some content, and you’ll have something that looks like this:



**If you have any problems, or have any questions about this tutorial. Please leave your comments and I will get back to you. Also, remember the PSD to this tutorial is available for download.

If you enjoyed this tutorial, why not check out our other Adobe Photoshop Tutorials?