Glossy & Beveled Buttons – Photoshop Tutorial
Tags:
Beginner,
Photoshop
A few friends of mine have asked me how I add the beveled effects on my buttons so I decided this is a good tutorial for those who would like to know. I am not a fan of heavy gloss, drop shadows, and bevels, but a light touch of each can make a nice effect to a lot of elements on the web. Let’s get started!
Step 1.
Create New File
Open up your Photoshop, and create a blank new document at the size of 300px by 200px.
Step 2.
Creating the Rounded Rectangle
Go to your Photoshop Tool Panel/Pallet and select the Rounded Rectangle Tool. Draw a rounded rectangle (Width: 160px / Height: 40px). A good tip is to always name your layers, let’s name this layer “Button Base”. If you keep your layers organized, it will save time in the long run and will be less of a head ache to make edits later on.
*Note if you are not sure how big your rounded rectangle is, on the top of the menu, go to Windows, then click on Info. You will now see a new box on the right hand side, make sure the Info tab is open, and on the bottom left corner, you will see your width and height specs. You can use this guide as your making your rounded rectangle.
First select the button layer, then on the bottom of the layer palette, you will see an “F” Icon, click on that and choose Blending Options…
We will start by adding a nice red gradient to it. My theory on aesthetic gradients, is that each tone should not be drastically different in the color family. So for example, instead of going from a very light red to a very dark red, we should just slightly change the tone of the color. Click on the Gradient Overlay check box and click on the gradient panel. I chose these 2 color codes: #e61212 and # ca0101 as my gradient. Lets also stretch the scale to 150%.
Let’s now add a hint of inner shadow. Click on the Inner Shadow check box and make your Opacity to 25%, Distance to 0px, and Size to 10px.
Lets now click OK and move on to the next step.
Step 3.
Adding the Bevel Effect
On your keyboard, hold down ‘Ctrl’ and with your mouse, click on the rounded rectangle layer once (You have to click on the Vector Mask Thumbnail which is the middle thumbnail on that layer next to the chain icon). When selected properly, you will see dotted lines around the rounded rectangle.
Now while the rounded rectangle is selected, go to the top menu and go to Select -> Modify -> Contract… You will then be prompted to specify the contracting size.
Make the Contract by 1px. (What this does is, it allows you to subtract 1px pixels from your current selection.)
Now you should still see the dotted lines around your rounded rectangle, with that selected, with your keyboard, hold down ‘Ctrl’ + ‘Shift’ + ‘N’ all at once. (This is a short cut for creating a new layer) It will then prompt you to name this layer, lets name it Bevel. After the layer is created, with your keyboard type ‘Ctrl’ + ‘Delete’. (This is a short cut for filling this layer with your selected background color). Once that layer is filled lets now change the Fill to 0%.
Now let’s double click on the “Bevel” layer we just created and add a Stroke. Make the stroke size to 1px, position it to the Inside and make the fill color white.
By now you should have something like this.
We will now add a mask to it and tone down the bevel. With the “Bevel” layer selected, on your keyboard, hold down ‘Ctrl’ + ‘G’ (This is a short cut for creating folder groups). You now have the “Bevel” layer inside of a folder, lets call this folder “Bevel Mask”.
Next you will select the masking tool (on the bottom of the layers palette, you will see a square icon with a circle in the middle). Once the mask has been added, on your keyboard type the key ‘G; (Short cut for the Gradient Tool), and on the top left corner of your window, you will now see a gradient tool, select that and be sure its selected to the Black to White gradient. Now place your mouse starting on the bottom of your rounded rectangle, and drag your mouse up to the top of your rounded rectangle. (Tip: When using the gradient tool, if you hold the ‘Shift’ key on your keyboard, you will be able to drag on a straight line). Now you should have something like this.
Your almost done! Now with the “Bevel Mask” folder selected, tone down your opacity to about 50%.
From this point on its pretty self explanatory, just add your text and you can also add some gloss or reflection.
Step 4.
Adding the Gloss to Your Button
Go to your Photoshop Tool palette and choose the Rectangular Marquee Tool. Make a selection on the rounded rectangle’s upper half.
We will create a new layer which we will name it “Gloss” (to create a new layer, on your keyboard, hold ‘Ctrl’ + ‘Shift’ + ‘N’)
Now on your keyboard hit ‘G’ (Short cut for the Gradient tool) and select the Forground to Transparent Gradient. It should be a Transparent gradient to white (If the 2ndary color is not white, click out of the popup, and on your Tool Palette, make sure your foreground color is white).
Click your mouse starting at the top of the canvas, and by holding the ‘Shift’ key on your keyboard, drag your mouse downwards to the bottom of the button. If the gradient was too heavy, you can always tone it down by lowering the opacity on that layer.
*Note In addition, I added a reflection and a light shadow to this button. Now its your turn, let your creativity take it from here!
Hope that made sense! If you have any questions or got lost somewhere in between my steps, feel free to ask me anytime.
Related Posts
