Carbon fiber style plug-in navigation menu

This is a ​ ​HV-Designs​​ Designer Richard Carpenter Should be HV-Designs Readers' design works .

By convention , First, let's take a look at the final rendering ：

After completing this tutorial ,Richard Carpenter Will continue to publish, such as converting to CSS Code tutorial ,​ ​ Here it is ​​…

Richard Carpenter Also see a ​ ​Flash menu ​​ after , This inspired design .

Production background

newly build 1200 x 600px, Documents with transparent backgrounds . Set the foreground color to #bebebf, The background color is #d2d2d2.

selection ” Gradient tool ” Make a linear gradient from the top of the canvas to the bottom .

Use the following settings to add ” Variegated filter ”（ Filter -> Variegated -> add noise ）

Then add ” Blur filter ”（ Filter -> Fuzzy -> Dynamic blur ）

There is too much dynamic blur effect on the left and right edges of the canvas , This is not what we want , Simply use the cutting tool to cut , Remove the bad dynamic blur effect areas on both sides .

In this way, you will get a soft metallic background , You can adjust the dynamic blur settings again to make the metal look more harmonious .

Create navigation

Select the rounded rectangle tool , Set the radius to 10px, Drag the rectangle shown below in the center of the canvas （663*136）.

After completion , Set the following layer styles ：

Inner shadow

Gradient overlay

Stroke

The effect is as follows ：

Next , We will make carbon fiber patterns , newly build 4 x 4px Documents , Zoom in to 3200%, As shown in the figure below 8 Each grid is filled with different colors .

（ Tips ： With the help of a ruler , Divide the document into 8 Lattice , New again 2 x 1px Documents , Fill with the following colors , After filling, copy to 4 x 4px Documents , In this case, copy 8 Next time ）

After the pattern is finished , Go to the menu ” edit -> Custom patterns ”, Name the new pattern , Then go back to making ​ ​ The navigation bar ​​ In the document .

choice ” rectangular ” Layers , The mouse points to the rectangular ” Vector mask thumbnail ”, Hold down ctrl, Click , The entire rectangle is selected , Now create a new layer , Keep the selection unchanged , choice ” Paint bucket ”, Fill the selection with a new pattern , The effect is as follows ：

Then change the blending option of the new layer to ” Difference value ”. The result is different , It feels like carbon fiber ：

Create navigation button

choice ” Font tools ”, Write navigation links at the bottom of the rectangle .

Then set the following layer style for the font .

shadow

Color overlay

Add a separator between links , Two article 1px The straight lines of are adjacent , The one on the left is black , The one on the right is white , Set the transparency of this layer to 50%, The blending option is ” Soft light ”.

Create a navigation ball

selection ” Elliptical Marquee Tool ”, New layer , Drag a small ellipse above the first link . As shown below ：

selection ” Gradient tool ”, Drag one from the above oval selection （#000000） To ash （#828282） Linear gradient of . As shown below ：

Use again ” Elliptical Marquee Tool ”, Create a new circular selection in the ellipse just created . As shown below ：

By color #8e8e8e Fill this circular selection , Keep this selection active , And create a new layer on the gray circle layer , Set the foreground color to white , Use the gradient tool to drag a radial gradient from white to transparent from the upper left corner . As shown below ：

Change the gradient type to linear gradient , Keep the selection active , Then create a new layer , Drag this gradient up from the bottom . As shown below ：

Change the transparency of each layer and the position of the gradient , To increase the highlight of the sphere . As shown below ：

Copy the sphere above each button .

Create button activation status

Select a button to add activation status , Simply add gradient overlay to the sphere of this button （ I didn't do this , Just merge all the layers that create the sphere , Then add adjustment layers -> Hue / saturation , And coloring ）, Choose the right color for you . As shown below ：

Use ” Rectangular marquee tool ” Select this button , Do not include divider . As shown below ：

Create a new layer , Keep the selection unchanged , By color #dddddd Fill this selection , Then set the layer blending mode to ” superposition ”.

Last , Use ” Polygonal Lasso Tool ” Create triangles , The color of the triangle is the same as the background , Then add layer style shadows , As shown below ：

Last , The effect of button activation status is as follows ：