SEARCH
 
Join our free newsletter for useful tips and valuable resources in web design industry.
It doesn't look like an e-mail address
  Tutorials Photoshop Web Layout Design a Cool Carbon Fibre Style Inset Navigation

Design a Cool Carbon Fibre Style Inset Navigation

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.

image 1

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

image 2

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

image 3

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

image 4

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.

image 5

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.

image 6

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

image 7

image 8

image 9

You should have something like this.

image 10

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.

image 11

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.

image 12

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

image 13

Creating The Navigation Buttons

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

image 14

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

image 15

image 16

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.

image 17

Creating The Navigation Orbs

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

image 18

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

image 19

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

image 20

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

image 21

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.

image 22

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

image 23

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.

image 24

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.

image 25

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

image 26

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

image 27

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.

image 28

Your finished hover state should look something like this.

Carbon Fibre Style Inset Navigation

Congratulations you have finished the tutorial.

   
subscribe to newsletter