So I thought it might be a cool idea to write up a tutorial on how I created the Glossy looking buttons that I have on my site. Keep in mind there are many different ways this can be done, but for the most part it all has to do with gradients and what you want you final product to look like. This tutorial assumes that you are somewhat familiar with Photoshop (Note: I use PS CS4) and if you have any questions please comment below.
1. Create a new file of any size you choose. For mine I chose to go with 400px wide by 100px tall. This size gave me a good amount of workspace for the size button I chose to make, again this can be any size you choose. Make sure to fill the background with a solid color of black on the first layer you see.
2. Next you want to make a new layer by clicking the button shown in Figure 1.
- Figure 1
After making your new layer we want to create a rounded rectangle. First choose the color you want the button to be. Then select the rounded rectangle tool found grouped with the line tool. Once selected, at the top of the screen we will change its settings so that the radius of the corners is at least half of the total height you want the button to be. Also I find it is easier to make the button using fixed size and choosing the size it should be. Figure 2 shows an example of these settings (Note: Click to enlarge these pictures). Again keep in mind that the sizes are irrelevant and the ones I have used were for the example.
- Figure 2
3. Now that we have created this shape we want to start adding effects to it. To do this first right-click on the layer itself and choose to rasterize it, this will allow us to work with the layer more, and it may not even have to be done, I just choose to do it. Next we set the layer so it has an inner glow, this will help make a more 3 dimensional look to it. To set the inner glow we double-click on the layer itself and on our new pop-up menu choose inner glow. I found making the size 10px and the glow a solid white it adds the necessary effects, feel free to play with it if you like. Figure 3 displays settings.
- Figure 3
4. So now we have 2 layers: a background layer, and a shape layer with a white inner glow. Feel free to name these layers respectively by right-clicking them and choosing properties. Again we want to create a new layer which will be our gloss layer. For this layer we are going to to create our selection in which we will add a gradient that will make the glossy effect. To do this we need to Ctrl+Alt+Shift click on the shape layer shown in our layers tab. This will select just the shape. Then either choose the elliptical marquee or rectangular marquee tool. Either is sufficient and will each create a different look. At the top of your window you will see some settings which will allow you to change how the marquee tool makes its selection. Choose Subtract. Then click and drag to make an appropriate size for the area which will have the gradient. The next couple pictures will show you these steps.
- Ctrl+Alt+Shift click this.
- This is what will be selected.
- This is what we want selected.
5. Now that we have the area, in which the gradient will go, selected it is time to add the gradient. First we select the gradient tool, and make sure that your background is the same color as the shape and foreground is white (Figure 5).
- Figure 5. This is the gradient we want.
With our gradient chosen we then want to start it somewhere just below the selection then hold shift and click and drag up just past the top of the selection. Holding shift will allow us to draw this in a straight line to keep the gradient equal on both sides. The following pictures help explain this.
- Click and drag like this just past the top of selection.
- This is what the gradient should look like.
(Note: I hid the shape layer to show in more detail what the gradient looks like.) After creating your gradient we then want to make this Gloss layer more translucent to add a better effect. To do this we simply change the Opacity of the layer. I set the opacity between 20% and 50%, depending on the colors chosen, to get the desired effect.
Once this has been done you have officially created a glossy button. I added text over the button and gave the text an embossed effect so it looks more dimensional. Feel free to play with it and add your own styles to it. It is a very simple process and after making two or three buttons you’ll have it down pat.
Just for reference I have included below what my layers all look like for the sample image at the top.
- I grouped the layers so I can move the whole group around without disturbing the effects.
- Final Product
I have had thoughts of some material I'd like to post, I just haven't had the time to actually work on it.
I stumbled across your blog, and think it's fantastic, keep us posting
Hey thanks for the comment
Great stuff