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

Bevel Lines


Bevel lines is the opposite of inset lines. It's a really good interface technique that all should know! Step-by-step instructions proceed...

1) Open up a new image, about 350x50 for best results. Create a new layer and fill it in with a medium gray. Create another new layer now. Select your pencil tool, making sure your foreground is white, and set the opacity to 30% (this option is in the tools menu at the very top). Hold SHIFT and draw a line straight across the image.



2) Now, duplicate the layer (Layer>Duplicate Layer). Hit Ctrl+I to inverse the colors. Select your move tool and move the inversed layer DOWN ONE PIXEL.



3) Ok, we're all done! Pretty easy, huh? You can keep adding on and expanding to get what you like. I went a little further..

Bevel Lines


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

No comments yet...
Add comments to "Bevel Lines"

Captcha