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

Pixel Border: Menu Box


1. Start with the Pen Tool from the Toolbar, and work your way across.(Hold Shift Key to constrain to a straight line)

2. Define the shape of your Menu Box as I have done, working your way around to connect to the initial Pen Anchor Point.

3. Once you have made the connection to the initial Anchor Point, right click on the new Path Selection and choose 'Make Selection'.

4. Leave the default settings and click OK.

Try changing the Feather Radius to a higher integer other than the default, and you will notice your corners smooth out.

5. Go to the Layers Palette and Menu Box right click on your layer and choose 'Rasterize'.

6. Ctrl + R to get your Rulers visible on the document. Click and drag from the Rulers bar 2 horizontal and 2 vertical guides as i have done. Go to View and make sure 'Snap' is turn on. Then with the Rectangular Marquee Tool (M) drag a new selection as I have done.

7. Then go 'Select/Modify/Contract' on the top menu bar and choose 2 pixels as I have done. Then hit the 'Delete' key on your keyboard to cut out the Marquee Selection area.

8. Now we'll apply Styles formatting to the layer. Right click on the layer and choose 'Blending Options' and start with the 'Drop Shadow' options that I have set up.

9. Then move down the same Blendings Options palette and choose 'Bevel and Emboss' and match my settings.

10. Then with the 'Color Overlay' options.

11. Then with the 'Stroke' options.

12. Presto! Pixel Border Menu Box. And a few enhancements could really make it look eye pleasing.

Pixel Border: Menu Box



Author's URL: heathrowe
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

No comments yet...
Add comments to "Pixel Border: Menu Box"

Captcha