Button Tutorial
What you'll need for this tutorial;× An image-editing programme such as Photoshop.
× An image.
× A texture or some brushes.
× Some pixel fonts.
Step 1
Open your programme and open a new canvas (File > New) and make sure it is 88px wide and 31px tall. This is the standard size for web buttons.
Drag image into your address bar to view a bigger version.
Step 2
Now we'll need to move your texture over to the blank canvas. You can do this by opening your texture in the image-editing programme (File > Open). Once you've got it open, press Ctrl + A to select it, then Ctrl + C, and click to open your blank canvas. Once you're there, press Ctrl + V to paste your texture. Move it around depending on how you want your button to look.
How your button should look now.
Step 3
Your texture might not be the same colour as you want your button, but it's okay, we can change that. This is quite a handy tool.Make sure the colour you want your texture to be is selected in one of the colour boxes. Now go to Image > Adjustments > Hue/Saturation and if, for example you were making it the same colour as I am, adjust your dialog box to the same as the image below.
Just make sure you have the 'Colorize' box ticked.
Drag image into your address bar to view a bigger version.
Step 4
Now we've got the colours sorted, I like to add a border. You can do this by selecting the Rectangular Marquee Tool and pressing Ctrl + A. Once you've got it selected, add a new layer and go to Edit > Stroke.If you're using blue, you can use the same settings as I'm using on mine.
Drag image into your address bar to view a bigger version.
How your button should look now.
Step 5
To add a bit of definition, I always like to add a white border inside the blue one. You can do this by selecting the Magic Wand tool and clicking within the blue border we just put on.
Drag image into your address bar to view a bigger version.
Now repeat Step 4, except making sure you change the colour to white.
Step 6
Now our button is really coming together it's time to add our image! I find playing around with the layer types to be a really good tool when designing. Images can look a million times better if they are Overlayed, or something similar. You don't just have to paste your image and roll with it.Now, in order to get your image into your picture, you'll need to find your image (I'm using a Blukiti) copy it, from wherever it may be and paste it onto your button as per the steps above.
Step 7
If you're using an image from Subeta, or something similar, you may notice that it's pasted with that ugly white background! All you need to do here is get your Magic Wand tool and select the white bits. Pressing delete until they're all gone and we're left with only a Blukiti.
Drag image into your address bar to view a bigger version.
Step 8
Now position your image wherever you like.I think my Blukiti looks a bit dull so I'm going to add an Outer Glow to him, to jazz him up a bit! If you want to add one, go to Layer > Layer Style > Outer Glow.
You can use the settings I use below, to get the same effect, but I always recommend playing around with as many options as you can!
Drag image into your address bar to view a bigger version.
How your button should look now.
Step 9
Now I'm going to add some text. Do this by selecting the Text tool and choosing a pixel font from the relevant menu. The pixel font I'm using in this tutorial is 04b_24 - a quick Google should find this for you. Make sure that you're using the same settings as me for best results.
Drag image into your address bar to view a bigger version.
Step 10
After typing whatever you fancy - I opted for the simple, Blukiti, position it wherever you like on the button and click the tick on the text bar.You should now have your very own button!
How your button should look now.