Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Sleek Gaming Navigation Interface

Sleek Gaming Navigation Interface


Step 1:

Let's start out by creating a new file. I used a 1000x180 pixels canvas set at 72dpi, and I filled my background with white color. Now create a new layer then draw a long rectangle with #0069BD color shade and 1000x32 px dimensions at the bottom end of your canvas.

Sleek Gaming Navigation Interface image 1

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to your long rectangle layer.

Sleek Gaming Navigation Interface image 2

Sleek Gaming Navigation Interface image 3

Sleek Gaming Navigation Interface image 4

Step 3:

In a new layer draw a long black rectangle with 1000x40 px dimensions on top of the blue rectangle design.

Sleek Gaming Navigation Interface image 5

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your black rectangle layer. Then set the layer's blending mode to Lighten at 58% opacity level.

Sleek Gaming Navigation Interface image 6

Sleek Gaming Navigation Interface image 7

Sleek Gaming Navigation Interface image 8

Step 5:

Select the Horizontal Type Tool then set the font family to Arial, bold, 12 pt, none and white color shade. In a new text layer type your first set of navigation on the blue rectangle design.

Sleek Gaming Navigation Interface image 9

Step 6:

Make a new layer set and name it 'Tab'. In a new layer draw a small rounded rectangle with #0077DB color shade and 100x40 px dimensions. Then cut the bottom corners of the rounded rectangle layer, this will be the tab/button design.

Sleek Gaming Navigation Interface image 10

Step 7:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your tab layer.

Sleek Gaming Navigation Interface image 11

Sleek Gaming Navigation Interface image 12

Sleek Gaming Navigation Interface image 13

Step 8:

Type 'Latest News' on the tab using font arial, regular, 12 pt, none and white color shade.

Sleek Gaming Navigation Interface image 14

Step 9:

Now add the rest of your navigation tabs by duplicate the original then just edit the text.

Sleek Gaming Navigation Interface image 15

Step 10:

Select the Horizontal Type Tool then set the font family to Bookmark Old Style, bold, 12 pt, none and white color shade. In a new text layer type your website name above the navigation interface. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Sleek Gaming Navigation Interface image 16

Sleek Gaming Navigation Interface image 17

Result:

Sleek Gaming Navigation Interface Tutorial: Final Result



Author's URL: PsDeluxe
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Sleek Gaming Navigation Interface"

Only registered users can write comment

No comments yet...