lek01042005's Guide to Making Link Buttons!

Links

Introduction
Making your Button
Making Your Button an Animation
Uploading your Button/Animation
Coding Your Button

Introduction

This is an easy to follow guide to making your very own link buttons so other Neopians can place your button on their user lookups, in shops/galleries ect and so you link is more easily seen.

For this guide you will need the following tools:

1. Pictures you would like to put on your link.
2. Photo Shop Pro (PSP)~ if you do not have it you can download a free trial version of it just google "Free Photo Shop Pro Trial
3. Animation Shop 3~ if you do not have it you can download a free trial version of it just google "Free Animation Shop Trial
4. Image Hosting Account~ if you do not have one you can open a free account at Photobucket either google "Free Image Hosting" or "Photobucket

If you have any comments or problems with this guide please feel free to neomail me here

Return to top
Making your Button

Okay now that you have all the tools you will need for the guide let's begin.
For this guide I am making a button for loveywovey Advent Calendar Page.

1. Find pictures you think go with your petpage theme.
Right click on the image and click the option 'Save Image As

Okay now that you have you found and saved the picture/s you want to use go to your desktop and open Paint Shop Pro.

2.Go to 'File' and click 'New' either choose a size for your button from the 'Presets' or type the number values you want to use. For this guide I am making a '88x31 Micro Button' from the 'Presets' menu and press 'Ok'.

3.Now you have selected your button size select the 'Flood Fill Tool' from the side bar.

and then select the colour you would like your button to be by clicking the colour in the 'Materials' toolbar on the right.

After you have selcted you colour hover your mouse over your button it will look like a paint can and press the left mouse button this will flood your button with the colour you chose.

4.Now go to 'File' and selct 'Open

This will open up your saved files and locate the picture you saved

Open the file (don't worry you wont lose your button) and go to 'Edit' and select 'Cut

After you have cut the image you should see the shape of the picture but no image.Then go to 'File' and select 'Close' it will then prompt you to 'Save Changes' select 'No

5.Now go to 'Edit' and select 'Paste As New Layer

This will put your picture on top of your button.
Now on the toolbar on the left click the 'Magic Wand Tool' and select 'Magic Wand

Click on the white part of you picture with the Magic Wand and you will see dashed lines outlining the white. Then go to 'Edit' and select 'Cut

Once you have removed all surrounding white go to 'Selections' and click 'Select None' this will take the dashed lines away.

6.Now on the left toolbar select the 'Move Tool

and postion your picture where you want it to sit on your button.

7.On the left toolbar again select the 'Text Tool

This will make a text box pop up where you can add the text you want on your button.
When you are happy with what you have written select 'Apply' and then position your text where you want it to sit.

8.If you want to add a border go to 'Image' and select 'Add Borders' then select which colour and thickness you would like your border to be and select 'Ok

9.If you would like you button to be raised go to 'Effects' select '3D Effects' then select 'Buttonize

This will pop up a box where you can see the Before and After views of you button and you can adjust the Height,Width and Opacity and Edge settings.

After you have found the values you are happy with select 'Ok

10.Now to the final step using Paint Shop Pro is to go to 'File' and select 'Save As

Save the button as a JPEG or GIF file.

Okay now that you have saved your button you can either make it into an animated button or upload it as it is.
If you are go to animate your button you need to make another one following the steps above.

When you have your two buttons made you can close Paint Shop Pro and Open Animation Shop 3.

Return to top
Making Your Button an Animation

1.Go to 'File' and select 'Animation Wizard

2.This will open a box where you will select 'Next

On the following screen select 'Next' again

And the same again for the screen after that.

3.This will take you to the fourth screen where you will set if you want the image to loop and how long each frame will be displayed.After you have done this select 'Next

4.On the following screen you will select 'Add Image' this will open your saved files.

Select the first button you want to use and select 'Open' then select 'Add Image' again and find your other button and select 'Open
If you have more then two pictures you want in your animation just repeat the step until they are all in the list

Then select 'Next
Then select 'Finish

After you finish you should end up with something like this

5.Now go to 'File' and select 'Optimization Wizard' and just follows the prompts to enhance your animation.

After you have done these three steps you will be shown an 'Original' and an 'Optimized' view of your animation.
Finally press next again to finish.

6.The last step is of course to save your animation go to 'File' and select 'Save As

You will want to save the file as a GIF file.
After you have saved your animation you can close Animation Shop 3 and go to your Image Hosting site.

Return to top
Uploading your Button/Animation

1.Open your account and either create/select the album you want your button to be placed in.

2.Select 'Browse' and again this will bring up your saved files.

Find your button/animation click on it and select 'Open' this will put the file name in the bar next to 'Browse' then select 'Submit

3.After you have uploaded your button/animation locate the URL and click on it

Then press your right mouse button and copy the Url so you can display your button on Neopets.

This is the finished result.

Return to top
Coding your Button

The code to display your button is:

The code to link your button to your petpage:

The code to allow others to copy and paste your code:


Remove the space between text and _area for the code to work correctly.

Did you find this guide helpful?Why not link us so others can learn how to make their own buttons too!

Counter started on 23rd Febuary 2006.

Return to top

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2008.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions