Preview:
Air Combat Theme Navigation Interface Design.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/Result.jpg)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/1.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/2b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/2c.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/2d.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/2e.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/2.gif)
Step 3:
In a new layer draw a large light brown rounded rectangle with #DFD3A1 color shade and 705 x 70 px dimensions.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/3.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/4b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/4c.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/4d.gif)
Pattern:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/Pattern.jpg)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/4e.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/4.gif)
Step 5:
In a new layer draw a large black rounded rectangle with 689 x 54 px dimensions.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/5.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/6b.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/6.gif)
Step 7:
In a new layer draw a thick white vertical line with 3 x 73 px dimensions.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/7.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/8b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/8c.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/8d.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/8.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/9.gif)
Step 10:
Under Layer Style(Layer > Layer Style) add a Drop Shadow and Inner Glow blending options to your website name text layer.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/10b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/10c.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/10.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/11.gif)
Step 12:
Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to the gray button layer.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/12b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/12c.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/12d.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/12.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/13.gif)
Step 14:
In a new layer draw a small black circle with 14 x 14 px dimensions on the rounded rectangle design.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/14.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/15b.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/15c.gif)
![](https://www.psd360.com/tutorial-images/air-combat-navigation/15d.gif)
Result:
![](https://www.psd360.com/tutorial-images/air-combat-navigation/15.gif)
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.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/16.gif)
Results:
Air Combat Theme Navigation Interface Design.
![](https://www.psd360.com/tutorial-images/air-combat-navigation/Result.jpg)