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 Tutorial: Final Result


Author's URL: Havenfx.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Bevel Lines"

Only registered users can write comment

No comments yet...