Design a Glassy Navigation Interface in Photoshop

12-27-07 Filed under Interface & Photoshop Tutorials

Step 13:
Now make a gray, color code #D0D0D0 half rounded rectangle at the beginning of the whole design. Same size as the rest of your tabs.

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

Step 15:
Add a link on the tab.

Step 16:
On your gradient rectangle add the sub links for your first tab, in this case the categories of our photoshop tutorials. Use font Arial, regular, 12 pt, none and black for the links and white for the pipe bars.

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

Name (required)

Mail (required)

Website