Creative Button Animations with Sprites and JQuery (Part 1: Photoshop)
This tutorial will show you how to build creative hover animations for buttons using sprites. The particular effect illustrated in this tutorial is inspired by the “Download” buttons on Tutorial9.net. Part 1 of this tutorial explains the design process in Photoshop. In Part 2 we will convert it to XHTML + CSS and as a bonus we will also use jQuery for a fading hover effect.
View Demo: Button Animation Demo
Skip to Part 2: Click Here (Demo files available for download)
Step 1 – Create the shape
Create a new document in photoshop fit to your needs. In this instance, I’ll be creating a 570px wide button. The height of the new canvas should be twice the height of the button needed (explained later, but for now just use the top half of the canvas).
We’re going to make a rounded button. Use the Rounded Rectangle Tool with a radius of 5px. Keep in mind that we will add a border and shadow, so leave some white space around the button.
Step 2 – Add layer styles
We will use a pretty basic color scheme for the initial state of the button. The surprise (I call it the wow-effect because of the contrast) will be added in the color scheme of the hover state button.
Note from Editor
The diagrams shown are not in English, but the diagrams will apply to English versions of Photoshop as well. We apologize for any inconvenience.
Drop shadow
Gradient overlay
Stroke
Step 3 – Highlights
Select the the shape of the button: Ctrl (Cmd for Mac users) + Click the Layer Thumbnail in the Layers Palette. Now add a new layer and fill the selection with the color #fafafa (use the Bucket tool). Select the selection tool and move the selection 1px to the right. Now click backspace and the selection will be deleted. Now you need to move the selection 1px up and delete the selection. The last step is to move the selection 2px down and delete the selection. What remains is a sleek highlight effect on the left side of the button.
Apply the same trick on the right side of the button.
Step 4 – Button text
Type the text "Send" or "Submit", or whatever you wish:
- font: Helvetica Neue Bold
- font-size: 35px
- color: #343434
Add also the following layer style:
Final image
Step 5 – Prepare the canvas for a sprite
We’re going to make a sprite of the buttons. Why sprites and not single images? Why combine all those images? Isn’t it quicker to have smaller images?
Using CSS sprites allows you to greatly increase your websites speed by using single image files that contain multiple graphics. In other words, when you have many images to be used, instead of having them as different individual files, we combine them into one. Therefore, the client computer only downloads one image for all the different graphics to be displayed.
Measure the height of the button. My example has a height of 64px. The link hover button will have the same size as the link button so my Photoshop canvas needs to have a height of 128px (= 2 x 64px). Use Ctrl/Cmd + Alt + C to change the height of the canvas.
Step 6 – The link hover button
Select all layers in the layers palette and place them in one group. Duplicate this group and move it down to the empty space. Now you have the same two buttons in the sprite.
Change the color of the copied text to #fffff and change the drop shadow:
Add the following layer styles on the copied button shape:
Drop shadow: don’t change it.
Gradient overlay
Stroke
Final touches
We’re going to add some gloss to the link hover button. Select the the shape of the button: Ctrl/Cmd + Click the Layer Thumbnail in the Layers Palette. And fill a new layer with the color #ffffff using the Bucket tool. Cut Away the bottom part with the Selection tool and change the opacity to 7%.
The final touch is changing the opacity of the highlights to 30% (which is already applied in the image above), because the original ones are too strong for the green button.
Final image
Save the image/sprite for web and you’re finished with the design part. It’s time to move on to the development part!
Continue: Continue to Part 2 »
Ending Design Note: Create your own buttons
Use colors that fit into your design. To create a simple 3D effect for the link hover button, you can also flip (the background of) the link button vertically. This works fine if you’re using a simple gradient.
Don’t use too many buttons like these on your website. If you wan’t to use several buttons on one page it’s better to create small buttons.
70 Comments
Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
Flag as inappropriatehttp://lernphotoshop.co.cc
Great work thanks for sharing
now i got idea for my design thank you.
Flag as inappropriatethanks for information. nice tutorial good web site
Flag as inappropriateeverything you want in Thailand
Love you Tutorial9.com
Flag as inappropriateLol
nice tutorial
Flag as inappropriatemaar je pc had wel engels gekunt
Thanks
Haha, zo erg is het toch niet? Mijn Photoshop-versie is Nederlands, dus al zou ik mijn OS op Engels gezet hebben, dan zou het ook niet geholpen hebben.
Flag as inappropriatethanks for expression
Flag as inappropriatethanks for information.good web site
Flag as inappropriatestep 3 I can’t understand.could you do it deatil? Thank you~
Flag as inappropriate1. Just copy the button shape and remove all layer styles, and make the button white.
Flag as inappropriate2. Select the shape of the button (ctrl + click on the thumbnail in the layers palette)
3. Move the selection/the dotted line (and not the shape) 1px to the right… etc.
thanks for information
Flag as inappropriateits amazing thank you v much
Flag as inappropriateI like your tutorials!
Flag as inappropriateDownload60s.com is a graphic designing website. photoshop tutorials.
Flag as inappropriatehttp://download60s.com
Thanks for this detailed tutorial. The technique is clean and easy to apply.
Flag as inappropriateThanks much for the tut! Love the effect. Using it all over. But png trans as button element don’t seem to be good juju for guess who….? Yup, IE. Any recommended fixes?
Flag as inappropriatethats a great tutorial, i was looking for longtime for such thing
Flag as inappropriatethank you very muchhhhhhhhhh
Great tutorial! Thanks alot !!
Flag as inappropriateje bent nederlands?? cool buddy!
Flag as inappropriateInderdaad ; )
Flag as inappropriateCool!! I mean it! Absolutely cool! I’ll definitely follow this blog!!
Flag as inappropriatetoo bad not in english but..thanks anyways for sharing :)
Flag as inappropriatewow this is awesome stuff keep it up
Flag as inappropriatenice and good article
Flag as inappropriateThanks Khalid.
Flag as inappropriatevery nice tutorial thanks..
Flag as inappropriateThis is an best tutorials which any web designers can take a look at to get awesome buttons for the websites and blog while designing.. :)
Flag as inappropriateThanks again for the positive comments, guys.
@Yakim: eindelijk iemand die niet klaagt.. haha
Flag as inappropriateI use sprites a lot. Seems like it takes two or three attempts to get the positioning right every time I do it though. Having to go back and implement on a bunch of old sites.
Flag as inappropriateKhalid, that was awesome tutorial. Very easy to understand and apply. Thanks a lot Khalid. :)
Will apply soon on my blog. Still learning about CSS Sprites.
Flag as inappropriateHi Khalid,
very nice tutorial.
Thanks Kahlid.
Flag as inappropriateHe jij bent een Nederlander, ook leuk.
P.S. ik kan de screenshots wel lezen! ;-)
Flag as inappropriateI was looking for this jQuery tut long time :) Thanks so much
Flag as inappropriateVery nice but when u disable CSS the links are gone. lets see if I can fix that :)
Flag as inappropriateHello Hugo,
I guess you’re referring to Part II of the tutorials. I do not have a png fix, because I really don’t care about transparency problems in IE6 as long as the site works properly. But there are two options if you persist on a fix: (1) add a background to the image that has the same color as the site or (2) use a png fix.
Flag as inappropriateHi Khalid,
Great tutorial!
For some reason, you can see that png transparency in this case is not working properly in internet explorer…
Do you have a version with a png fix included in it ?
Thanks in advance,
Hugo
Flag as inappropriateThanks Khalid, awesome tutorial.
Flag as inappropriateGuess this is pretty much the only tutorial in Dutch out there. Would be neat if it would be in English though :) -because most people speak English on the interwebs-
Flag as inappropriateHi Yoshua,
Flag as inappropriateI’ve seen tutorials on internet that were written in English but with screenshots in other languages (like this one). Following those tutorials wasn’t difficult, because the settings in Ps are exactly the same. Commenting a screenshot wasn’t necessary, only in cases where you need to understand a word (e.g. In the layer style ‘Stroke’ I wrote ‘Outside’ in English because people will not understand ‘Buiten’, which is Dutch). Please read my comment(s) above for an explanation.
Thanks, will be using this sometime!
Flag as inappropriateGreat tutorial!
Flag as inappropriateThanks guys.
Flag as inappropriateGreat pratical tutorial .. Thank you Kalil
Flag as inappropriateAwesome tutorial, the graphics for this 2 part tutorial are really smooth
Flag as inappropriatehello i want to make a web side,
Flag as inappropriateif you are from bangladesh plez call me ,,01191573654…
Awesome .. Thanks :)
Flag as inappropriateGreat but it would be nice if it was in English! (:
Flag as inappropriateThe tutorial is written in English. The screenshot do have a title with the layer style in English. But even without that title you should be able to apply the same effects, because all the settings are placed the same order in other language versions of Ps. =)
Flag as inappropriateAn addition: if you download the source file, you can open it and check the layer styles in your own language. But this isn’t necessary, because you should be able to follow the tutorial as I explained above.
Flag as inappropriate