Tutorial
Click on thumbnailed images to enlarge
Link buttons are little 88 x 31 pixel graphics designed for people to place on thier sites, linking to another site. You can view some buttons I've created for my Xanga, [url=http://xquizit.cbstaff.com/buttons]here.[/url] and Createblog, [url=http://www.createblog.com/forums/index.php?showtopic=11031]here[/url].
Examples:
[url=http://xanga.com/xquizit_442]
[/url]
This tutorial will show you how to create a simple button for your website like the one shown below:
----------------------------------------------------------------------
1) Create a new document size 88 x 31 pixels with a transparent background: File >> New.
2) Find an image that you would like to use as a background for this button. I'm going to use the following image that I created with my [url=http://www.createblog.com/forums/index.php?showtopic=47912]Shockwave tutorial[/url]:
3) Paste the image into your new document (CTRL + V).
You should see the top left corner of the image you pasted on the document.
4) Select the move tool by pressing V on your keyboard and drag around the image until you find a good looking area.
5) Create a new layer: Layer >> New >> Layer. Give this layer a fill by pressing SHIFT + F5 and then hitting OK. Go to the layers pallette and lower the fill to 0%.
6) Lets add a border to our image: Layer >> Layer Style >> Stroke. Use the setting shown below and click OK:
7) Your image should look something like the following:
8) Now let's add some text. Select your text tool by pressing T on your keyboard. Pick a font and size you like best. I chose the following:
9) Now click anywhere on the image that you want your text. Type whatever you want and adjust the settings as you wish.
10) If you'd like, you can also adjust the hue of this image: Layer >> New Adjustment Layer >> Hue/Adjustment. Click OK. Adjust the Hue slider as you wish until you achieve desired results. Here's what I got:
----------------------------------------------------------------------
That's it, at least enough to get you started. You can combine this tutorial with others featured on this site to add different effects and animation! Hope you guys have fun with this.
----------------------------------------------------------------------
Ready to put your link button out there for people to grab? Use this script:
[url=http://www.createblog.com/forums/index.php?showtopic=52424]Link Button Codebox[/url]
----------------------------------------------------------------------
Copyright © 2004 Xquizit
You are not authorized to copy or distribute any content from this tutorial.
Examples:
[url=http://xanga.com/xquizit_442]
[/url]
This tutorial will show you how to create a simple button for your website like the one shown below:
----------------------------------------------------------------------
1) Create a new document size 88 x 31 pixels with a transparent background: File >> New.
2) Find an image that you would like to use as a background for this button. I'm going to use the following image that I created with my [url=http://www.createblog.com/forums/index.php?showtopic=47912]Shockwave tutorial[/url]:
3) Paste the image into your new document (CTRL + V).
You should see the top left corner of the image you pasted on the document.
4) Select the move tool by pressing V on your keyboard and drag around the image until you find a good looking area.
5) Create a new layer: Layer >> New >> Layer. Give this layer a fill by pressing SHIFT + F5 and then hitting OK. Go to the layers pallette and lower the fill to 0%.
6) Lets add a border to our image: Layer >> Layer Style >> Stroke. Use the setting shown below and click OK:
7) Your image should look something like the following:
8) Now let's add some text. Select your text tool by pressing T on your keyboard. Pick a font and size you like best. I chose the following:
9) Now click anywhere on the image that you want your text. Type whatever you want and adjust the settings as you wish.
10) If you'd like, you can also adjust the hue of this image: Layer >> New Adjustment Layer >> Hue/Adjustment. Click OK. Adjust the Hue slider as you wish until you achieve desired results. Here's what I got:
----------------------------------------------------------------------
That's it, at least enough to get you started. You can combine this tutorial with others featured on this site to add different effects and animation! Hope you guys have fun with this.
----------------------------------------------------------------------
Ready to put your link button out there for people to grab? Use this script:
[url=http://www.createblog.com/forums/index.php?showtopic=52424]Link Button Codebox[/url]
----------------------------------------------------------------------
Copyright © 2004 Xquizit
You are not authorized to copy or distribute any content from this tutorial.
Tutorial Comments
Showing latest 6 of 6 comments
how to do the code???
By MissPiggy2007 on Jun 13, 2007 11:11 pm
http://www.createblog.com/forums/index.php...538&hl=animated
By ZapatoDelFuego on Jul 12, 2006 12:55 am
hey hum... do u have a tutorial to make them animmated ??
By 83RN15 on Jul 11, 2006 10:34 pm
Well it says right on the tutorial that it was made for photoshop...
By misswynne on Feb 25, 2006 2:36 pm
it could be imageready or animation shop.
By Jeng on Feb 24, 2006 10:24 am
wat program did you use to make this?
By iwannabeedatgurl on Feb 22, 2006 6:53 pm
