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’)
Adobe Photoshop Free Tutorials

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
Adobe Photoshop Free Tutorials

3. Do the same thing to both bottom corners and fill your selection with #ff7f00
Adobe Photoshop Free Tutorials

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.
Adobe Photoshop Free Tutorials

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)
Adobe Photoshop Free Tutorials

6. Change this layer’s blend mode to Overlay and opacity to 50%
Adobe Photoshop Free Tutorials

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

8. Fill it with White and change this layer’s blend mode to Soft Light and opacity to 35%
Adobe Photoshop Free Tutorials

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%
Adobe Photoshop Free Tutorials

10. Now the text, write anything you’d like. I’m going to use Segoe UI, 18pt and White.
Adobe Photoshop Free Tutorials

11. And apply this layer style
- Stroke:
Adobe Photoshop Free Tutorials

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

13. Go to Edit -> Stroke and apply these settings
Adobe Photoshop Free Tutorials

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
Adobe Photoshop Free Tutorials

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
Adobe Photoshop Free Tutorials

16. Now change this layer’s blend mode to Overlay and opacity to 50%
Adobe Photoshop Free Tutorials

17. Now let’s make the inside content, select the white part of the container
Adobe Photoshop Free Tutorials

18. Create a new layer and fill it with #f9f6ee
Adobe Photoshop Free Tutorials

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
Adobe Photoshop Free Tutorials

20. Now add some text links to it, I’m going to use Verdana 12pt and #3888ca
Adobe Photoshop Free Tutorials

21. Put some bullets before each link so it looks less empty, I’m going to use one from famfamfam, and you’re done
Adobe Photoshop Free Tutorials