All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-glassy-navigation-interface-in-photoshop

Design a Glassy Navigation Interface in Photoshop

12-27-07Category Filed under Interface & Photoshop Tutorials

Step 7:
Your half rounded rectangle should now look like the picture below. When you place your tab into your gradient rectangle make sure its set-up as shown on the picture below. This is important to achive the glassy effect.

Step 8:
Create a new layer. Using your pencil tool with a 1 px brush draw a #A4CAC1 colored line right at the bottom edge of your tab. Also have your line going over the tab.

Step 9:
Again create a new layer, draw a 1 px white line on the center of your tab. Then go into your layers palette and set the opacity level of your line layer to 65%.

Step 10:
One more time create a new layer, draw a 1 px black line below your white line. Go to your layers palette and set the blending mode to Color Burn and opacity level of 10%.

Step 11:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 13 pt, none and #FF0000 for color. Then type one of your navigation link inside the tab.

Step 12:
Add more tabs by duplicating your ‘Tab’ layer set.

Pages: 1 2 3
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

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

  1. Plantillas para Blogger, recursos y herramientas » Hyper-Enlaces de diseño a 30-12-2007. Says:
    December 30th, 2007 at 9:40 am

    […] Barra de navegación con estilo vidrioso. Fantástico manual para diseñar la interface de una barra de navegación con un aspecto cristalino único. […]

  2. Plantillas para Blogger, recursos y herramientas » Hyper-Enlaces de diseño a 30-12-2007. Says:
    December 30th, 2007 at 9:40 am

    […] Barra de navegación con estilo vidrioso. Fantástico manual para diseñar la interface de una barra de navegación con un aspecto cristalino único. […]

  3. Ritsuka Says:
    December 31st, 2007 at 2:07 pm

    The nav. interface looks great but the font choice you used kind of ruines it.

Add a Comment