Zymic

Webmaster resources

Follow us on Twitter!

Hosting status updates - Click here

Adobe Photoshop

Free Tutorials » Adobe Photoshop » Link Me Buttons 88x31

Create your site a "link me button".

Step 1

When I make a 88x31 button I tend to get a cool textured background to work from. Below is a texture effect I created for this tutorial. Enlarge the image and when the larger main image loads save or copy it in to photoshop.

Step 1 diagram

Step 2

Now you should have my enlarged image in photoshop.

Select the "rectangular marquee tool" and at the top of the screen select fixed size from the style drop down box. Put in a width of 88 and a height of 31. This tells the marquee "man" to select a size of 88x31 when making a selection!

Step 2 diagram

Step 3

Now click any where on your image. This will make a selection of 88x31. Keep re-selecting different parts of the image until you think you have found a bit you like.

Now copy your selection and paste it in a new document with (your document should be 88x31 pixels in size).

Step 3 diagram

Step 4

Press CTRL + U and "check" "Colourize" and play around with colours until you find which colour you like best, I choose a light blue colour, as show below:

Step 4 diagram

Step 5

Make a new layer and grab the pencil tool and select white as your foreground colour.

With your pencil tool draw a line with a height of 7 pixels and as wide as your image:

Step 5 diagram

Step 6

Now we need to give the white bar a black border, select black as your foreground colour and with your pencil tool draw a 1px border above and below the white bar:

Step 6 diagram

Step 7

To make the bar blend in and look better we are going to change the layer opacity to around 41%. Your white bar should be faded now:

Step 7 diagram

Step 8

We need to put the text into the button, select the type tool and pick a font you like best, I used 04b_09 pixel font (get it or ones similar from dafont.com).

Now type in your site name into the middle of the white bar below! And lastly give your text a 1px stroke to get a result like mine.

Step 8 diagram

Tutorial comments

09.08.2008 -

samerhouri says …

step 1 image is not enlarging

15.03.2008 -

Blackout-RO says …

Where i can change the pixel of font?

24.12.2007 -

Punk-Code says …

Nice, Berry Nice!

View all user comments for this tutorial.

Tutorial statistics

Date added:
11.10.2004
Author:
Zymic
User rating:
4/5
Rate tutorial:
Total views:
10228
Total comments:
3

Advertisements