HV-Designs.co.uk

March 9th, 2010 in Photoshop Tutorials by Richard Carpenter

Carbon Fibre Style Inset Navigation

• Share

Hello, welcome. Today i’ll be showing you how to create a carbon fibre style inset menu. This tutorial comes after a request from one of hv-designs readers, which i was more than happy to oblige.

What We’ll Be Creating

Once you’ve completed the tutorial you should have something like this.

In a later tutorial I’ll also be showing you how to code the navigation into a working CSS navigation, so stay tuned for that.

Inspired By Hugo

The result of this tutorial is inspired by a flash template located here. Lets get started.

Making The Background

Create a new document 1200 x 600 pixels with a transparent background. Set your foreground color to #bebebf and background color to #d2d2d2, then select the gradient tool with a linear gradient.

Once you’ve selected your gradient drag the gradient from the top of the canvas down to the bottom.

Once you’ve filled your canvas add some noise by going to “filter > noise > add noise”, use the settings listed below.

Now blur the background by going to “filter > blur > motion blur”, use the settings below.

Around the left and right edges of the canvas you should see the motion blur, blurred too much. Simply make a selection around the best half of the canvas excluding the over blurred edges.

Once you’ve made the selection crop the canvas. You should now have your lightly brushed metal background, you can fine tune the metal strokes by adjusting the motion blur settings.

Creating The Navigation

Select the rounded rectangle tool with a radius of 10px, drag out the navigation rectangle in the middle of your canvas.

Once you’ve created your rectangle add the following layer styles.

You should have something like this.

For this part we need to make our own custom carbon fibre texture. To do this create a new document 4 x 4 pixels then copy the image below.

Once you’ve created the carbon fibre pattern go to “edit > define pattern”, then head back to your navigation.

Load a selection around your navigation by selecting the navigation rectangle layer then going to “select > load selection”. Create a new layer above your navigation, select the paint bucket tool then find your carbon fibre pattern from the patterns menu. Once you’ve found your pattern select it and fill the loaded selection.

Set your carbon fibre pattern layer blend mode to “difference”, you should have something like this.

Creating The Navigation Buttons

Select the type tool then type out your navigation links towards the bottom of the navigation.

Once you’ve completed adding your textual links add the following layer styles to your text.

In between each link add two vertical 1 px lines next to each other, the lines should start from the very top of the navigation and end at the bottom. Color the first line in black and the second line white. Once you’ve created your lines set the layer opacity to 50% and blend mode to soft light.

Creating The Navigation Orbs

Select the elliptical marquee tool then drag our a small ellipse above one of your navigation links.

Select the gradient tool with a linear gradient, drag a black (#000000) to gray (#828282) gradient over the ellipse selection.

With the elliptical marquee tool once more, create another circular selection inside your last selection.

Fill your selection with the color #8e8e8e. Keep your selection active and create a new layer above your gray circle. Set your foreground color to white (#ffffff) then select the gradient tool with a radial gradient, change the gradient type to “white to transparent”.

Zoom into your selection the drag the radial gradient from the top left corner of the ellipse. Keep the drag short as you don’t want the radial gradient too big.

change the gradient type to linear also keeping the selection active. Create another new layer then drag the linear gradient from the bottom upwards.

Keep adding the highlights changing the layer opacity’s of each layer and the position of the gradients, eventually you should have something like this.

Duplicate the orb and all the highlights then move it across to the next button. Continue to do so until all buttons have there own orb.

Creating The Hover State

To one of the buttons were going to add a hover state, i’ve chosen the portfolio button. Simply add a gradient overlay to the orb using your chosen colors.

Make a selection using the rectangular marquee tool, the selection should be made around your button in between the dividers.

Once you’ve made the selection around the button fill the selection with the color #dddddd then set the layers blend mode to “overlay”.

Finally using the polygonal lasso tool create a triangular shape, fill the triangular shape in the same color as the background, then add a drop shadow using the settings below.

Your finished hover state should look something like this.

Congratulations you have finished the tutorial. In part two i’ll be showing you how to code the navigation into a working HTML/CSS Document.

Continue To Part Two…

Learn to code this navigation into a working HTML/CSS Document. Click Here

• Share