Sign In  |  Join Now Become a member to add links and start earning points!

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).

shape of the button

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

Drop shadow

Gradient overlay

Gradient overlay

Stroke

Stroke

Step 3 – Highlights

highlight, gloss

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:

Text with layer styles

Final image

Text with layer styles


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.

Sprite image

Change the color of the copied text to #fffff and change the drop shadow:

Drop shadow text hover button

Add the following layer styles on the copied button shape:

Drop shadow: don’t change it.

Gradient overlay

Gradient overlayhover button

Stroke

Stroke hover button

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%.

Gloss effects

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

Final sprite

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

  1. Add point Subtract point

    Photoshop tutorials, from beginner to advanced. photo manipulation, icon design, text effects, interface, layout, painting, photo effects, psd tuts, maxon cinema 4d, designing.
    http://lernphotoshop.co.cc

    Flag as inappropriate
  2. Add point Subtract point
    webbeshop (3 Points) November 19, 2010 at 3:21 am

    Great work thanks for sharing

    now i got idea for my design thank you.

    Flag as inappropriate
  3. Add point Subtract point
    iconthai (0 Points) November 18, 2010 at 8:12 pm

    thanks for information. nice tutorial good web site
    everything you want in Thailand

    Flag as inappropriate
  4. Add point Subtract point
    black.friday.boys (4 Points) November 10, 2010 at 9:57 am

    Love you Tutorial9.com

    Flag as inappropriate
  5. Add point Subtract point
    ArtSlayer1480 (1 Point) November 9, 2010 at 1:09 pm

    Lol

    nice tutorial
    maar je pc had wel engels gekunt
    Thanks

    Flag as inappropriate
  6. Add point Subtract point
    klima yetkili servisi (2 Points) October 19, 2010 at 5:07 am

    thanks for expression

    Flag as inappropriate
  7. Add point Subtract point
    siemens servisi (2 Points) September 30, 2010 at 7:16 am

    thanks for information.good web site

    Flag as inappropriate
  8. Add point Subtract point

    step 3 I can’t understand.could you do it deatil? Thank you~

    Flag as inappropriate
  9. Add point Subtract point
    siemens servisi (2 Points) September 6, 2010 at 2:10 am

    thanks for information

    Flag as inappropriate
  10. Add point Subtract point
    semo (2 Points) July 16, 2010 at 2:44 pm

    its amazing thank you v much

    Flag as inappropriate
  11. Add point Subtract point
    Сoder-MaX (0 Points) July 13, 2010 at 3:33 am

    I like your tutorials!

    Flag as inappropriate
  12. Add point Subtract point
    Gebel Scarduzio (-2 Points) June 19, 2010 at 5:30 pm

    Download60s.com is a graphic designing website. photoshop tutorials.
    http://download60s.com

    Flag as inappropriate
  13. Add point Subtract point
    Levinson (1 Point) June 11, 2010 at 1:02 pm

    Thanks for this detailed tutorial. The technique is clean and easy to apply.

    Flag as inappropriate
  14. Add point Subtract point
    Randy (1 Point) June 10, 2010 at 2:09 pm

    Thanks 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 inappropriate
  15. Add point Subtract point
    walidplus (1 Point) June 7, 2010 at 3:34 pm

    thats a great tutorial, i was looking for longtime for such thing
    thank you very muchhhhhhhhhh

    Flag as inappropriate
  16. Add point Subtract point
    Texture plus (1 Point) May 29, 2010 at 9:40 pm

    Great tutorial! Thanks alot !!

    Flag as inappropriate
  17. Add point Subtract point
    Kevin Lee (1 Point) May 2, 2010 at 8:58 am

    je bent nederlands?? cool buddy!

    Flag as inappropriate
  18. Add point Subtract point
    Kevin Lee (0 Points) May 2, 2010 at 8:56 am

    Cool!! I mean it! Absolutely cool! I’ll definitely follow this blog!!

    Flag as inappropriate
  19. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 7:29 pm

    too bad not in english but..thanks anyways for sharing :)

    Flag as inappropriate
  20. Add point Subtract point
    Web Design (0 Points) April 22, 2010 at 7:16 pm

    wow this is awesome stuff keep it up

    Flag as inappropriate
  21. Add point Subtract point
    wedge wire screen (1 Point) April 19, 2010 at 10:11 pm

    nice and good article

    Flag as inappropriate
  22. Add point Subtract point
    vestel servis (1 Point) April 16, 2010 at 6:51 pm

    very nice tutorial thanks..

    Flag as inappropriate
  23. Add point Subtract point
    Robin (0 Points) March 27, 2010 at 10:38 pm

    This 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 inappropriate
  24. Add point Subtract point
    Khalid (1 Point) March 27, 2010 at 6:57 pm

    Thanks again for the positive comments, guys.

    @Yakim: eindelijk iemand die niet klaagt.. haha

    Flag as inappropriate
  25. Add point Subtract point

    I 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 inappropriate
  26. Add point Subtract point
    Baloot (1 Point) March 27, 2010 at 5:33 pm

    Khalid, 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 inappropriate
  27. Add point Subtract point

    Hi Khalid,

    very nice tutorial.

    Thanks Kahlid.

    Flag as inappropriate
  28. Add point Subtract point

    He jij bent een Nederlander, ook leuk.

    P.S. ik kan de screenshots wel lezen! ;-)

    Flag as inappropriate
  29. Add point Subtract point
    Grin_PL (1 Point) March 2, 2010 at 2:43 pm

    I was looking for this jQuery tut long time :) Thanks so much

    Flag as inappropriate
  30. Add point Subtract point

    Very nice but when u disable CSS the links are gone. lets see if I can fix that :)

    Flag as inappropriate
  31. Add point Subtract point

    Hello 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 inappropriate
  32. Add point Subtract point

    Hi 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 inappropriate
  33. Add point Subtract point

    Thanks Khalid, awesome tutorial.

    Flag as inappropriate
  34. Add point Subtract point
    yoshua wuyts (1 Point) February 21, 2010 at 12:41 pm

    Guess 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 inappropriate
    • Add point Subtract point

      Hi Yoshua,
      I’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.

      Flag as inappropriate
  35. Add point Subtract point
    Aljan Scholtens (1 Point) February 20, 2010 at 6:12 am

    Thanks, will be using this sometime!

    Flag as inappropriate
  36. Add point Subtract point

    Great pratical tutorial .. Thank you Kalil

    Flag as inappropriate
  37. Add point Subtract point

    Awesome tutorial, the graphics for this 2 part tutorial are really smooth

    Flag as inappropriate
  38. Add point Subtract point

    Great but it would be nice if it was in English! (:

    Flag as inappropriate