RSS Feed About Tutorials Blog

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

Learn to make a stylish glassy navigation interface using layer styles and vector shapes.

Step 1:
Let’s start out by creating a new file. I used a 800×220 pixels canvas set at 72dpi, and I filled my background with a white color. Then on your tools palette set the foreground color to #BDD2CC. Create a new layer and draw a long rectangle, size 800×24 px. Note, the images on this tutorial are cropped to fit the content area.

Step 2:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your rectangle layer.

Step 3:
Create a new layer, right above your gradient rectangle draw a thick line, color code #CBE1DC and an exact height of 6 px.

Step 4:
Under Layer Style(Layer > Layer Style) add a Drop Shadow blending option to your thick line from step three.

Step 5:
Make a new layer set and name it ‘Tab’(Layer > New > Layer Set). Now select the Rounded Rectangle Tool from your tools palette then above your screen under options palette choose Fill Pixels, set the radius to 8 px and check anti-aliased. Create a new layer and draw a #C0DAD4 colored rounded rectangle, exact size 147×40 px. Then cut the bottom half of your rounded rectangle.

Step 6:
Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin, Gradient Overlay and Stroke blending options to your half rounded rectangle layer.

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