Skip to content

Categories:


Create Drillkit-style Navigation Tabs for your Website

Preview: Drill Kit Navigation Tabs.
drillkit-navigation-final
drillkit navigation tabs
drillkit-navigation-1
Step one: Start with a large black canvas. Make a new layer set titled Drill Kit Navigation Tabs. Choose the rounded rectangle tool and set the radius setting to 4px and anti-aliased checked. In a new layer draw a black round rectangle using the rounded rectangle tool. (width: 163 x height: 27) Add the following layer styles: Inner Glow, Gradient Overlay, Stroke.
drillkit-navigation-2
Step two: Add your first navigation using font Veranda, bold, 7pt, sharp and #FFFFFF for color. Add the following layer styles: Stroke.
drillkit-navigation-3
Step three: Add the following layer styles: Inner Shadow, Inner Glow, Satin, Gradient Overlay, Pattern Overlay, Stroke.
drillkit-navigation-4
Step four: Choose the custom polygon tool and choose the third arrow shape found on the palette. Now in a new layer add a white arrow. (width: 29 x height: 21) Cut out the top and bottom part of the arrow. Add the following layer styles: Gradient Overlay.
drillkit-navigation-5
Step five: In a new layer draw a white rectangle inside the tab. (width: 154 x height: 13) Add the following layer styles: Gradient Overlay, Stroke. Set the layer’s blending mode to Soft Light.
drillkit-navigation-6
Step six: Again in a new layer draw a white rectangle inside the tab. (width: 154 x height: 13) Add the following layer styles: Pattern Overlay. Create a new layer and merge with the white rectangle layer.
drillkit-navigation-7
Step seven: Move the white rectangle layer inside the tab. Set the layer’s blending mode to Color Burn.
drillkit-navigation-8
Step eight: Duplicate the end part structure from step four. Go to Edit > Transform > Flip Horizontal.
drillkit-navigation-final
Final: Drill Kit Navigation Tabs.

Posted in Photoshop.

Tagged with .


3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. GarykPatton says

    I think I will try to recommend this post to my friends and family, cuz it’s really helpful.

  2. CrisBetewsky says

    It’s a masterpiece. I have never thought people can have such ideas and thoughts. You are great.

  3. Lacnette says

    I use Adobe Photoshop on my Webpage making business at home. Photoshop got all the features i need to make some really great graphics and banners. #



Some HTML is OK

or, reply to this post via trackback.