Tutorial Spotlight: Trendy Bevels
In this tutorial l will explain how to create those trendy bevel buttons that you see popping up all over the net.
Must See!
In this tutorial l will explain how to create those trendy bevel buttons that you see popping up all over the net these days, especially on phpBB, and VBB templates. The neat thing about these buttons is that they are extremely easy to create, and look very nice and clean. After completing this tutorial you too will be able to create these trendy bevel buttons and apply them to all sorts of applications, and designs.
Page 1 of 1
Step 1.)
Open an existing document, or start a new one of any size. I'm using 500 x 300 with a simple grid background.
Step 2.)
Create a new layer and using the rectangular marquee tool make a selection as pictured bellow:
and fill this selection with white (#FFFFFF)
Step 3.)
Double click this layer, and apply the following blending options: Gradient Overlay
Because it's difficult to see at this point, l've added a "lime green" highlight around the result, here's how yours should look (less the green highlight of course):
Step 4.)
Create a new layer. Now set your foreground color to: #4A4A4A and get out the 'Pencil Tool'. Draw a 1 pixel line across the top of your box, and down the left side as pictured:
Step 5.)
Finally set your foreground color to: #131313 (dark dark grey) and again with the Pencil Tool, draw a 1 pixel line along the bottom of your box, and down the right side, as pictured:
And that's all there is to it. All you need to do now is add text, and icons and you're finished. Here's what l ended up with after fooling around with it for a few minutes:
Related Tutorials: Render Layout Tutorial vol. 4: Button Creation In this tutorial you will learn how to create an entire layout by using an exsis ... CMS Buttons Learn how to create simple CMS or (Content Management System) buttons, quickly a ... Beveled Control Buttons Learn how to create 3d Control buttons that look like they're popping right off ...