Countdown to the 100th Post Giveaway: 97 posts!
I just discovered that I like making animated buttons for blogs. I've done two today and could keep going if laundry and cleaning wasn't calling my name. Here are the steps I took to make mine:
1. Find a background for the button you want to make. I found mine on PC Layers.
2. Make sure you have this background image saved to your computer. Here is what mine looked like before I started editing it:
3. I have a Mac and do not own any photo editing software. So, I uploaded this photo to Picknik. You do not need an account to upload or edit your photo.
4. Once on Picnik, I cropped my image into a square, rotated it, fiddled with the colors, and added a border (you have lots of editing and formatting options on Picnik):
5. After I was happy with the square background, I saved it as "Tutorial Button 1.jpg". Make sure you save each picture onto your computer!!!
6. After saving, Picnik allows you to continue editing the picture you were working on--this is a great feature because you do not have to re-upload anything!
7. I then added some words that I wanted to flash first on my button:
6. After saving, Picnik allows you to continue editing the picture you were working on--this is a great feature because you do not have to re-upload anything!
7. I then added some words that I wanted to flash first on my button:
8. I saved this picture, just like I did in #5 and #6.
9. I continued to edit, add words, save, edit, add (or subtract) words, save, etc. until I was happy with what my button said. Some fun features at Picnik let you flip the words horizontally or vertically. You can also add stars and other fun shapes and cllipart images.
10. Now that I have all of my button images saved (as Tutorial Button 1, 2, 3, 4, etc.) I head on over to Picasion, yet another wonderfully free editing software tool.
11. Self-explanatory, but you upload each picture in the order you want it to appear on your button. (Note, in the above case, I uploaded Image 3 twice so that the words went back to being in the proper order).
12. If you would like to customize the size and speed of your button, you can do that at the bottom of the image loader.
13. Click "Create Animation", wait while it loads, and voila! You have a button! Now you just have to copy and paste the url info and you'll be good to go!
14. If you make a button, I'd love to see what it looks like--please leave a comment about it below!
9. I continued to edit, add words, save, edit, add (or subtract) words, save, etc. until I was happy with what my button said. Some fun features at Picnik let you flip the words horizontally or vertically. You can also add stars and other fun shapes and cllipart images.
10. Now that I have all of my button images saved (as Tutorial Button 1, 2, 3, 4, etc.) I head on over to Picasion, yet another wonderfully free editing software tool.
11. Self-explanatory, but you upload each picture in the order you want it to appear on your button. (Note, in the above case, I uploaded Image 3 twice so that the words went back to being in the proper order).
12. If you would like to customize the size and speed of your button, you can do that at the bottom of the image loader.
13. Click "Create Animation", wait while it loads, and voila! You have a button! Now you just have to copy and paste the url info and you'll be good to go!
14. If you make a button, I'd love to see what it looks like--please leave a comment about it below!