Photoshop Tutorial – Paint Splatter Navigation Interface Design

Paint Splatter Navigation Interface Design.

Preview

Step 1:

Let’s start out by creating a new file. I used a 900×400 pixels canvas set at 72dpi, and I filled my background with #8A7676 color shade. In a new layer draw a long rectangle with #EE3E02 color shade and 686 x 41 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to the long orange rectangle layer.

Result:

Step 3:

Using your Eraser Zool with a hard pastel brush erase parts of the long rectangle to create a splatter effect.

Step 4:

Select the Horizontal Type Tool then set the font family to Arial, bold, 10 pt, none and white color shade. In a new text layer type your sub navigation links on the right end of the rectangle design. Then in a seperate text layer add your website address on the splatter.

Step 5:

In a new layer draw an orange rounded rectangle with #E63C00 color shade and 142 x 52 px dimensions. Then cut the bottom corners of the rounded rectangle.

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to the cut out orange tab.

Result:

Step 7:

In a new layer draw a white rounded rectangle tab next to the orange tab. Then under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Satin blending options.

Result:

Step 8:

Add more white tabs. Then select the Horizontal Type Tool then set the font family to Arial, regular, 15 pt, strong and #FF2E00 color shade. In seperate text layer add your main navigation links on the tab. Use white color for the orange tab.

Results:

Paint Splatter Navigation Interface Design.

Source: newtuts.com

you may also like:

• Photoshop Tutorial – How to Create Dark Web Design
  I’ve been seeing a lot of Dark Websites lately, and it inspires me to make one. Today we will create dark web design which we will do in Photoshop. I will show you how to achieve the look of dark webs...
• Photoshop Tutorial – Classic navigation menu
  Step 1. Start off with a new document sized 500×80. Fill it with a cream colour. Create a new layer and using the rectangular tool with the colour code below create a shape: Step 2. Add...
• Photoshop Tutorial – Clean White Navigation Bar
  Simplicity is the key to beautiful web layouts. Learn how to draw a beautiful navigation bar in Photoshop. Preview of Final Results   Step 1 To start off with, create a...
• Photoshop Tutorial – Create Clean and Fresh Button
  Step 1 Create a new document size 750px * 400px (size doesn’t really matter here) and fill this background layer with White. Create a new layer on top of the background layer called “gradient”, grab ...
• Photoshop Tutorial – Apple Navigation menu
  Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px ...

No Responses to “Photoshop Tutorial – Paint Splatter Navigation Interface Design”

1. Photoshop – Paint Splatter Navigation Interface Design - Ziarul toateBlogurile.ro says:

   October 19, 2010 at 10:21

   [...] Photoshop – Paint Splatter Navigation Interface Design Tue Oct 19, 2010 9:30 am Paint Splatter Navigation Interface Design. Preview Step 1: Let’s start out by creating a new file. I used a 900×400 pixels canvas set at 72dpi, and I filled my background with #8A7676 color shade. In a new layer draw a long rectangle with #EE3E02 color shade and 686 x 41 px dimensions. Step 2: Under [...] [...]