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’)
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
3. Do the same thing to both bottom corners and fill your selection with #ff7f00
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.
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)
6. Change this layer’s blend mode to Overlay and opacity to 50%
7. Create a new layer, select the Rectangular Marquee Tool and make a selection over the orange part like this
8. Fill it with White and change this layer’s blend mode to Soft Light and opacity to 35%
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%
10. Now the text, write anything you’d like. I’m going to use Segoe UI, 18pt and White.
11. And apply this layer style
– Stroke:
12. Create a new layer, select teh Rectangular Marquee Tool and set a fixed size of 200 * 210px
13. Go to Edit -> Stroke and apply these settings
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
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
16. Now change this layer’s blend mode to Overlay and opacity to 50%
17. Now let’s make the inside content, select the white part of the container
18. Create a new layer and fill it with #f9f6ee
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
20. Now add some text links to it, I’m going to use Verdana 12pt and #3888ca
21. Put some bullets before each link so it looks less empty, I’m going to use one from famfamfam, and you’re done
