Preview:

Air Combat Theme Navigation Interface Design.

Step 1:

Let’s start out by creating a new file. I used a 800 x 250 pixels canvas set at 72dpi, and I filled my background with #768B9E color shade. In a new layer draw a large rectangle with 800 x 145 px dimensions and the same color as your background.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Gradient Overlay and Pattern Overlay blending options to the large rectangle layer.

Result:

Step 3:

In a new layer draw a large light brown rounded rectangle with #DFD3A1 color shade and 705 x 70 px dimensions.

Step 4:

Under Layer Style(Layer > Layer Style) add an Outer Glow, Inner Glow, Gradient Overlay and Pattern Overlay blending options to the large light brown rounded rectangle layer.

Pattern:

Result:

Step 5:

In a new layer draw a large black rounded rectangle with 689 x 54 px dimensions.

Step 6:

Under Layer Style(Layer > Layer Style) add a Stroke blending option to the large black rounded rectangle layer. Then set the layer’s blending mode to Lighten.

Result:

Step 7:

In a new layer draw a thick white vertical line with 3 x 73 px dimensions.

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Outer Glow and Inner Glow blending options to the thick white vertical line layer.

Result:

Step 9:

Duplicate the white vertical line design layer and position it on the other end of the rounded rectangle design. Then add a simple search box feature on the right end side. Now select the Horizontal Type Tool, set the font family to Arial, Bold, 30 pt, smooth and #5880A3 color shade. In a new text layer type your website name on the left end side of the interface design.

Step 10:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Inner Glow blending options to your website name text layer.

Result:

Step 11:

Make a new layer set and name it ‘Button’. In a new layer draw a gray rounded rectangle with #7B7B7B color shade and 87 x 30 px dimensions. Then cut the top rounded corners of the gray rounded rectangle.

Step 12:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to the gray button layer.

Result:

Step 13:

Select the Horizontal Type Tool, set the font family to Arial, Bold, 11 pt, none and #7AB1CE color shade. In a new text layer type your first navigation link on the gray button. Then add the rest of your links with its own button design.

Step 14:

In a new layer draw a small black circle with 14 x 14 px dimensions on the rounded rectangle design.

Step 15:

Under Layer Style(Layer > Layer Style) add an Outer Glow, Inner Glow and Gradient Overlay blending options to the small black circle layer. Then set the layer’s blending mode to Lighten.

Result:

Step 16:

Now add more bullet holes by duplicating the black circle design layer from the last step. Finish it off with some military graphics on the interface.

Results:

Air Combat Theme Navigation Interface Design.