Design a Shattered Navigation Interface in Photoshop

1-4-08 Filed under Interface & Photoshop Tutorials

Here is another Navigation Interface tutorial but this time you will learn how to apply a shatter effect on the interface.

Step 1:
Let’s start out by creating a new file. I used a 800×110 pixels canvas set at 72dpi, and I filled my background with a black color. Now select your Rounded Rectangle Tool and set the radius to 20 px and check anti-aliased. Create a new layer and draw a black rounded rectangle, size 664×26 px. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the black rounded rectangle layer.

Step 2:
Create a new layer and draw a white rectangle, size 460×18 px. Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options.

Step 3:
Create a new layer and draw three black circles with different sizes. Set it up as shown below.

Step 4:
On your layers palette select the black rounded rectangle layer from step one. Now add a marquee selection around your rounded rectangle, go to Select > Load Selection, check Invert and leave everything else on default. Once the marquee selection is added highlight or select the black circle layers on your layers palette. Then go to Edit > Cut.

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Gradient Overlay and Stroke blending options to your black circles layer.

Step 5:
Your black circles should now look like this.

Step 6:
Now make a marquee selection of the parts you want to add a shatter effect. Then go to Edit > Copy Merged and then go back to Edit > Paste.

Step 7:
Go to Filter > Stylize > Wind, leave all settings to default. Then set your background color to black on the tools palette and go to Filter > Distort > Glass. Add the Glass Filter settings below and go to your layers palette then set the layers blending mode to Lighten.

Step 8:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 12 pt, none and white for color. Then type your navigation links inside the rectangle structure layer with a lot of spaces between each link.

Step 9:
Now add the same style of black circle on the right end of your navigation interface. Then add your RSS Feed link and its icon outside the rectangle glass.

Step 10:
Here we have a different shattering effect that can be achieve by adding different glass filter settings, the end results can be random but it will always have that glass shaterring effect once you complete all the steps.

---

3 Responses to “Design a Shattered Navigation Interface in Photoshop”

1. Design tips Says:
   January 14th, 2008 at 7:02 am

   nice tutorials i need to copy into my forum
   thanks

2. maulik Says:
   January 24th, 2008 at 10:15 am

   this web menu designing

3. tazar Says:
   March 5th, 2008 at 5:57 am

   I am designer

Add a Comment

Name (required)

Mail (required)

Website