OnMouseOver-buttons, graphic links, groups, free transform specials
Tutorial aspects today:
Working with groups.
Free transform specials.
Making buttons that animate on mouse-hover for your website.
Making buttons/graphics that link to another site.
Html
[
]
A photoshop cs3 tutorial, but any of these effects can be achieved with any of the earlier photoshop versions. I am sure that this tutorial is translatable.
You will not need Image Ready or any other type of animation software.
Notes: Keyboard shortcuts are in the brackets.
Before you start:
If you are only interested in the html codes required to turn an image into a link - the html that is usable in your Livejournal profile - please scroll all the way to the bottom of the tutorial: “Finishing off #2.”
If you are interested in how to create an on-mouse-hover button as shown in the example image above, so you can use it in your website, please follow the tutorial… or the parts of the tutorial you would like to apply to your animated image.
Starting off:
To make a little button with rounded corners:
Open a new canvas (ctrl + n)
I chose 80x40 pixel with a resolution of 244 pixel/inch with a transparent background.
Prepare your canvas and then select the rounded rectangle tool (u) and tweak the settings in the header that appears at the top of your screen.
[
]
Set your crosshair curser to the top left corner of your canvas, then drag it down to the bottom right corner, always making sure the top and bottom outline of the rectangle are touching the top and bottom border of your canvas.
If you aren’t satisfied with the result, you can always undo your last step: edit -> undo (ctrl + z)
[
]
The 3D effect:
Now you’ll need your layer styles [
]
I started off with an inner shadow. Choose a color similar to the base-color of your rounded rectangle, only darker.
Then choose an inner glow, while selecting a color similar to the base-color, only lighter.
Then you’ll select bevel and emboss, and select yet another dark color similar to the base color for the shadow mode.
After that, check the contour box.
Notes: I didn’t change many of the default settings. Most of the time, I reduced the opacity, and toyed around with the individual options like soften, size, and choke.
For each style, I selected the default ‘linear.’ [
]
To create your own unique effect, you might like to choose settings of your own. It’s a matter of personal style and taste after all. ;)
Now you can add some text. I chose a color slightly lighter than the one I used for the shadows.
You can either center your text manually, or let photoshop do that for you. Select everything (ctrl + a) and then go to layers -> align layers to selection -> vertical centers, and then again for horizontal centers.
Then, in the layers window, click on the group icon.
[
]
Drag your button and font layers into the group, and then select the group in the layers window. [how to]
Now you can duplicate your group by going to layer->duplicate group, then shrink your text in the top group. Go to edit -> free transform (ctrl + t). Your text should now be selected and a header should appear. Type in a value to your liking below 100% in your height box. (For a small image/canvas, a small decrease in percentage would work best.)
Readjusting the central alignment should not be necessary this way, unlike when you transform the size manually while holding down the shift button and dragging the box to alter the size.
[
]
Now you can give your button the ‘squished in’ look by reopening the layer style menu. Simply double-click on ‘bevel and emboss’ in the layer window.
Open the ‘contour’ option-window and select the inverted cone option. [
]
Increase the range to your liking and hit enter.
Now save each group individually.
Important!
The rounded button will be your ‘onmouseout’ url in the html code.
The squished-in button will be your ‘onmouseover’ url in the html code.
Upload them to your image hosting site.
Finishing off 1
Now copy and paste the html code into Word or any other text editing program.
http://URL onMouseOver='A.src="http://URLofImageB"' onMouseOut='A.src="http://URLofImageA"'>
http://URLofImageA WIDTH="XX" HEIGHT="XX" BORDER="0" name="A">
What the tags mean:
The ‘a href=’ will link to the image to a certain page, so when it is clicked, the person will be sent to the site you typed in.
‘onMouseOver=’ is the tag that tells your browser what to select when the image is hovered.
‘onMouseOut=’ is the tag that tells your browser what to select when the mouse is no longer hovering the image
‘A.src=’ will insert an image for the tag that came before it (‘onmouseover/out’)
‘img src=’ will insert an image that will always be visible, no matter if the image is hovered or not.
What you have to alter to make it work, line by line
1) Insert the URL you would like to link to. Just replace the ‘http://URL’ with your own.
2) Insert the URL of the image you chose when your image is being hovered and replace the ‘http://URLofImageA’ with your own. Make sure that you don’t overwrite these here: [ " ]
3) Repeat #2 for the ‘onMouseOut’ URL, but this time, insert the URL of the image you’d like to show up when your image is not hovered.
4) Repeat #3, then type in the width and height of your .gif.
5) Leave the rest as it is. You can change the ‘border’ to a higher value, if you like, but then you’ll have an ugly frame around your .gif-link, and that won’t look very nice. ;)
To preview the button I made, copy the contents of the box below, and then paste it in the box. You can, of course, preview your own html code here as well.
http://community.livejournal.com/wtf_tuts/profile onMouseOver='A.src="http://i124.photobucket.com/albums/p38/sudyn/tutorial%20kanji%20fire/onmouseover-button.gif"' onMouseOut='A.src="http://i124.photobucket.com/albums/p38/sudyn/tutorial%20kanji%20fire/onmouseout-button.gif"'>http://i124.photobucket.com/albums/p38/sudyn/tutorial%20kanji%20fire/onmouseout-button.gif WIDTH="80" HEIGHT="40" BORDER="0" name="A">
Finishing off #2
Unfortunately, this type of html does not work at Livejournal. (CSS doesn’t either, apparently.) I checked the FAQs and even asked the lovely syehsreh, maintainer of the community html_slaves, who confirmed this.
Very annoying, but there’s nothing I can do… but offer an html code that will link your graphic to another site.
http://URL OF YOUR IMAGE WIDTH="88" HEIGHT="44" BORDER="0"/>
To see my version of the html code, copy and paste the html code below.
http://community.livejournal.com/wtf_tuts/profile">http://i124.photobucket.com/albums/p38/sudyn/promo%20buttons%20by%20sudyn/promobanner10.gif WIDTH="88" HEIGHT="44" BORDER="0"/>
For instructions, scroll up a few paragraphs and read from “What you have to alter to make it work, line by line.”
Other examples using this method:
[
][
]
I hope this tutorial is useful or helpful to some of you, and that you enjoyed it.
Should you have any questions, feel free to comment here.
Your opinions, suggestions or critiques on this tutorial would be very appreciated. I’d like to improve, and for that, I need your help. =)
Thank you very much for your attention!
Working with groups.
Free transform specials.
Making buttons that animate on mouse-hover for your website.
Making buttons/graphics that link to another site.
Html
[
]
A photoshop cs3 tutorial, but any of these effects can be achieved with any of the earlier photoshop versions. I am sure that this tutorial is translatable.
You will not need Image Ready or any other type of animation software.
Notes: Keyboard shortcuts are in the brackets.
Before you start:
If you are only interested in the html codes required to turn an image into a link - the html that is usable in your Livejournal profile - please scroll all the way to the bottom of the tutorial: “Finishing off #2.”
If you are interested in how to create an on-mouse-hover button as shown in the example image above, so you can use it in your website, please follow the tutorial… or the parts of the tutorial you would like to apply to your animated image.
Starting off:
To make a little button with rounded corners:
Open a new canvas (ctrl + n)
I chose 80x40 pixel with a resolution of 244 pixel/inch with a transparent background.
Prepare your canvas and then select the rounded rectangle tool (u) and tweak the settings in the header that appears at the top of your screen.
[
]
Set your crosshair curser to the top left corner of your canvas, then drag it down to the bottom right corner, always making sure the top and bottom outline of the rectangle are touching the top and bottom border of your canvas.
If you aren’t satisfied with the result, you can always undo your last step: edit -> undo (ctrl + z)
[
]
The 3D effect:
Now you’ll need your layer styles [
]
I started off with an inner shadow. Choose a color similar to the base-color of your rounded rectangle, only darker.
Then choose an inner glow, while selecting a color similar to the base-color, only lighter.
Then you’ll select bevel and emboss, and select yet another dark color similar to the base color for the shadow mode.
After that, check the contour box.
Notes: I didn’t change many of the default settings. Most of the time, I reduced the opacity, and toyed around with the individual options like soften, size, and choke.
For each style, I selected the default ‘linear.’ [
]
To create your own unique effect, you might like to choose settings of your own. It’s a matter of personal style and taste after all. ;)
Now you can add some text. I chose a color slightly lighter than the one I used for the shadows.
You can either center your text manually, or let photoshop do that for you. Select everything (ctrl + a) and then go to layers -> align layers to selection -> vertical centers, and then again for horizontal centers.
Then, in the layers window, click on the group icon.
[
]
Drag your button and font layers into the group, and then select the group in the layers window. [how to]
Now you can duplicate your group by going to layer->duplicate group, then shrink your text in the top group. Go to edit -> free transform (ctrl + t). Your text should now be selected and a header should appear. Type in a value to your liking below 100% in your height box. (For a small image/canvas, a small decrease in percentage would work best.)
Readjusting the central alignment should not be necessary this way, unlike when you transform the size manually while holding down the shift button and dragging the box to alter the size.
[
]
Now you can give your button the ‘squished in’ look by reopening the layer style menu. Simply double-click on ‘bevel and emboss’ in the layer window.
Open the ‘contour’ option-window and select the inverted cone option. [
]
Increase the range to your liking and hit enter.
Now save each group individually.
Important!
The rounded button will be your ‘onmouseout’ url in the html code.
The squished-in button will be your ‘onmouseover’ url in the html code.
Upload them to your image hosting site.
Finishing off 1
Now copy and paste the html code into Word or any other text editing program.
http://URL onMouseOver='A.src="http://URLofImageB"' onMouseOut='A.src="http://URLofImageA"'>
What the tags mean:
The ‘a href=’ will link to the image to a certain page, so when it is clicked, the person will be sent to the site you typed in.
‘onMouseOver=’ is the tag that tells your browser what to select when the image is hovered.
‘onMouseOut=’ is the tag that tells your browser what to select when the mouse is no longer hovering the image
‘A.src=’ will insert an image for the tag that came before it (‘onmouseover/out’)
‘img src=’ will insert an image that will always be visible, no matter if the image is hovered or not.
What you have to alter to make it work, line by line
1) Insert the URL you would like to link to. Just replace the ‘http://URL’ with your own.
2) Insert the URL of the image you chose when your image is being hovered and replace the ‘http://URLofImageA’ with your own. Make sure that you don’t overwrite these here: [ " ]
3) Repeat #2 for the ‘onMouseOut’ URL, but this time, insert the URL of the image you’d like to show up when your image is not hovered.
4) Repeat #3, then type in the width and height of your .gif.
5) Leave the rest as it is. You can change the ‘border’ to a higher value, if you like, but then you’ll have an ugly frame around your .gif-link, and that won’t look very nice. ;)
To preview the button I made, copy the contents of the box below, and then paste it in the box. You can, of course, preview your own html code here as well.
http://community.livejournal.com/wtf_tuts/profile onMouseOver='A.src="http://i124.photobucket.com/albums/p38/sudyn/tutorial%20kanji%20fire/onmouseover-button.gif"' onMouseOut='A.src="http://i124.photobucket.com/albums/p38/sudyn/tutorial%20kanji%20fire/onmouseout-button.gif"'>
Finishing off #2
Unfortunately, this type of html does not work at Livejournal. (CSS doesn’t either, apparently.) I checked the FAQs and even asked the lovely syehsreh, maintainer of the community html_slaves, who confirmed this.
Very annoying, but there’s nothing I can do… but offer an html code that will link your graphic to another site.
To see my version of the html code, copy and paste the html code below.
http://community.livejournal.com/wtf_tuts/profile">
For instructions, scroll up a few paragraphs and read from “What you have to alter to make it work, line by line.”
Other examples using this method:
[
][
]
I hope this tutorial is useful or helpful to some of you, and that you enjoyed it.
Should you have any questions, feel free to comment here.
Your opinions, suggestions or critiques on this tutorial would be very appreciated. I’d like to improve, and for that, I need your help. =)
Thank you very much for your attention!