Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Pixel Style Navigation Box

Pixel Style Navigation Box


Learn how to make a navigation box with a unique pixel style.

1. Start by making a 210 * 260 px file. Create a new layer, select the Rectangular Marquee Tool, set a fixed size of 200px * 30px and place your selection in your document. Go to Select -> Modify -> Smooth and apply a 3px radius(be sure that your selection isn't touching any of the borders of your canvas, if it's touching them tehy will not be 'smoothed')
Img

2. Zoom in your document and select the Rectangular Marquee Tool(without any fixed size), press Shift and hold it while you select the bottom rounded corner of your selection
Img

3. Do the same thing to both bottom corners and fill your selection with #ff7f00
Img

4. Now Ctrl+Click over the first layer thumb to select it, then create a new layer and go to Select -> Modify -> Contract and apply 1px. Now go to Edit -> Stroke and apply a 1px White(#ffffff) border.
Img

5. Zoom in again and delete the bottom line of your border, and with the Pencil Tool, using White, fill the space between the border and the end of the orange thing(1px only)
Img

6. Change this layer's blend mode to Overlay and opacity to 50%
Img

7. Create a new layer, select the Rectangular Marquee Tool and make a selection over the orange part like this
Img

8. Fill it with White and change this layer's blend mode to Soft Light and opacity to 35%
Img

9. Repeat step 7 but making the selection a little smaller and placing it inside the other selection, change this layer's blend mode to Soft Light and opacity to 25%
Img

10. Now the text, write anything you'd like. I'm going to use Segoe UI, 18pt and White.
Img

11. And apply this layer style
- Stroke:
Img

12. Create a new layer, select teh Rectangular Marquee Tool and set a fixed size of 200 * 210px
Img

13. Go to Edit -> Stroke and apply these settings
Img

14. Now place again the selection over the border you just did(same size selection) and go to Select -> Modify -> Contract and contract it by 1px, now go to Edit -> Stroke and add a 1px White stroke
Img

15. Zoom in and delete the top part of the border, and place a 1px dot at the end of it with the Pencil Tool, do this to both sides
Img

16. Now change this layer's blend mode to Overlay and opacity to 50%
Img

17. Now let's make the inside content, select the white part of the container
Img

18. Create a new layer and fill it with #f9f6ee
Img

19. Create a new layer, Ctrl+Click over the last layer's thumb to select it. Go to Select -> Modify -> Contract and contract it by 1px, go to Edit -> Stroke and apply a 1px #9c9c9c stroke
Img

20. Now add some text links to it, I'm going to use Verdana 12pt and #3888ca
Img

21. Put some bullets before each link so it looks less empty, I'm going to use one from famfamfam, and you're done
Img



Author's URL: avivadirectory.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: