Corrosive Online

Shiny 'HD' Buttons With Photoshop

Introduction

Almost everything now has gone all shiny and 'HD'. I received my weekly e-mail from Sky Movies today and I noticed the button which you can see on the right. The effect works really well on websites and in HTML e-mails, giving some depth to the page and really encouraging the user to click. These buttons are actually really easy to create using Adobe's Photoshop software so I thought I'd produce a quick guide in how it is done.

Creating the button

The first thing you will need to do is to create a new file in Photoshop. I usually work big (and at 300dpi) and then reduce the image size later. This means my poor old eyes don't suffer and it is easier to resize the image to suit my needs should I want to use it again.

Select 'File' and 'New' and then set the file up as shown below with a width of 800 pixels and a height of 200 pixels;

Next, select to use the Rounded Rectangle Tool and set the Radius to 10px;

Now draw a rectangle that starts in the top left hand corner and finishes in the bottom right hand corner of your image space. In this case I have chosen to create a black button but most colours will work just as well;

Add the text you would like to appear on your button. A bit cheeky I know, but I have gone for 'Corrosive HD'. I've also split the word 'Corrosive' from the 'HD' and made it a different colour. The reason for this will become apparent at the end of the tutorial but you don't have to do things my way;

Now to add the shine effect to the button. Still with the Rounded Rectangle Tool, change the Radius to around 120px. Bear in mind that this Radius measurement can change depending on the size and proportions of the button you are creating. You can always experiment to get the look you are after. Using exactly the same colour as the first shape, draw another Rounded Rectangle that sits up above the button you have already created. You can always 'Nudge' the shape into the correct position later so don't get too hung up on getting it spot on;

If you have never used gradients in Photoshop before then you'll now begin to see how they are a really good tool for adding some depth to a web page without resorting to 'Bevels' which tend to look very 2003!

Select the 'Add Layer Style' button (it looks like a small 'f' at the bottom of the 'Layers' panel) and then to use a 'Gradient Overlay';

Open the 'Gradient Editor' (this can be done by double-clicking on the gradient itself in the 'Layer Style' panel) and set your gradient. The Gradient Editor has a few options but we are interested in the 'Stops' section. The stops work with the top of the bar showing the opacity of the gradient and the bottom of the bar showing the colour of the gradient.

For the purpose of creating the shine effect we want you will need to make the colour of the gradient all white and then set the opacity from 100% down to about 10% until it looks right in your image. If you are following my example closely then you will see that I have set the opacity at 100% at 52% along the bar;

You may have spotted that I have nudged my second Rounded Rectangle up until the base is in the middle of the 'e' of 'Corrosive'. As I said earlier, you can always experiment with this. To give my button a final twist I have used the 'Free Transform' option on the 'HD' text. Selecting the 'Skew' option;

By clicking and dragging the top right hand corner of the text I have made it lean to the right.

Conclusion

Here is a copy of my final button with a digital/film based surround. I have reduced it in size quite a bit but that is how this effect tends to look best. It isn't exactly a life-like rendering of a shine on a glass button so it doesn't stand up too well under close scrutiny (or when the image is too big) but, at a glance, it gives a glossy feel to an otherwise flat looking button image. This should make users want to click it and getting people to click buttons is what we are all about!

I hope that you enjoyed this tutorial and that it was nice and easy to follow. Now that you understand how simple it is to make shiny buttons using Photoshop you might also want to try some nice round ones as well.

This particular 'Stop/Start Button' (to the right) example was created in virtually the same way as the 'Corrosive HD' button but using the Elipse Tool rather than Rounded Rectangle. Then outer casing effect is achieved using a gradient designed to look like metal and a drop shadow and an inner shadow to make the button itself look like it is inside the casing. These effects can all be found in the Layer Styles list that we covered earlier. Why not give it a try and see how you get on?

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details. If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.