Sleek Gaming Navigation Interface


In this photoshop tutorial we will show you, how to make nice blue navigation bar for your website. At the end of tutorial you can download Psd file of this tutorial

Final Image Preview

Sleek Gaming Navigation Interface

Step 1

Let’s start out by creating a new file. I used a 1000×180 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 1000×32 px dimensions at the bottom end of your canvas.

Sleek Gaming Navigation Interface

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

Sleek Gaming Navigation Interface

Result:

Sleek Gaming Navigation Interface

Step 3

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

Sleek Gaming Navigation Interface

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

Sleek Gaming Navigation Interface

Result:

Sleek Gaming Navigation Interface

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

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 100×40 px dimensions. Then cut the bottom corners of the rounded rectangle layer, this will be the tab/button design.

Sleek Gaming Navigation Interface

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

Sleek Gaming Navigation Interface

Result:

Sleek Gaming Navigation Interface

Step 8

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

Sleek Gaming Navigation Interface

Step 9

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

Sleek Gaming Navigation Interface

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

Result:

Sleek Gaming Navigation Interface

Result: Sleek Gaming Navigation Interface

Sleek Gaming Navigation Interface

 Download Sleek Gaming Navigation Interface Psd file

Dainis

About the Author

Dainis is Webmaster of Psdeluxe - Design related website, where you will find newest photoshop tutorials, inspiration for designers and free design resources.

Subscribe to Psdeluxe feed


blog comments powered by Disqus

Sponsored by

PSD to XHTML

Grab Psdeluxe Rss feed

PsDeluxe rss feedGet nicest photoshop tutorials, design resources and articles directly in your email. Subscribe to Psdeluxe Feed and stay be informed about latest design news.

Subscribe by email:
Subscribe by Rss: Add to Google Reader or HomepageAdd to Yahoo pageBookmark Add to Netvibe

Community News

There are certain design elements that all blogs should have to keep readers happy and engaged in your content. With the evolution of blogs and social media sites, the expectations for a blog are much higher.

Amazing black and white portrait photography by Alessandro Russino, fashion photographer based in New York , United States and lived in Milan, NY, Athens, Paris.

There are certain design elements that all blogs should have to keep readers happy and engaged in your content. With the evolution of blogs and social media sites, the expectations for a blog are much higher.

The sense of our work was not simply creating another pack of attractive icons for Windows 7 or Mac OS . We undoubtedly understand that those colorful and exotic icons are greatly attractive to the people nowadays . But making something simple and elegant

There are some important things that i learned from being a graphic design blogger since months ago. I hope that this article will help every graphic design bloggers to grow their blog rapidly.

Thanks to...

Content Delivery Network Search Engine Optimization Suite for Joomla

The Best Fans on Facebook