You’re right. This is most certainly not the first time this has been tutorialized. But when I tried to find a tutorial on it, it was nearly impossible to find one that gave me the step-by-step that I was looking for!
(I made this one to be “officially” announced on Friday.)
After figuring it out for myself (shocker), I’m passing that knowledge onto you. Keep in mind, I’m not a technical guru or a code phenom (I leave that up to Beth), but I think this works! Here we go.
First off, sign up with Picnik. It’s FREE (sort of), and it’s brilliant. The free version offers everything in this tutorial, but the selection of fonts, etc. is much more limited. The Premium version is only a couple of dollars a month. Totally worth it.
1. Okay. Find a background (all kinds of sites have free ones) that you can save to your computer. When you get onto Picnik, upload it. This is what you’ll get…
**I used screenshots for this tutorial, so I apologize if some details are difficult to see. I have written some extra info in red in order to clarify some things.**
2. Click on the “create” tab, and it shows you numerous things you can do (ie. stickers, text, frames). I added a little oval sticker to put on the background and dragged it to the size I wanted.
3. When you’re ready for text, just click on that tab and type in the text box. You have the freedom to change the font, color, size, etc. You can also drag it all over the place to position it just right.
If you want to use different fonts, make sure you click in the text box again for a different one.
4. Add shapes/stickers. Go crazy here. Below, I’m showing that if you right click on the item, it will do more things as well. Most of the fun is just playing around with it!
5. Frame it! All of these things are optional, of course, but I like it framed.
5a. Here are some examples of how you can add stickers/colors to change it up. I don’t know about the skeletons. It was late; I found him funny—especially when he was holding the toilet paper. Poor skeleton has tummy troubles.
6. Once you get your button exactly how you want it, you’ll need to resize it. Standard button sizes are 125×125, but you can make it whatever you want. Click on the “edit” tab, then “resize” tab.
You can just enter the dimensions into the boxes, and it’ll resize it for you. As you can see, you’ll want to be aware of that when you’re adding text. You don’t want your text to be too small once it’s sized. (If this were a real button, I would have adjusted that.)
7. Finally? Save it! I LOVE that Picnik gives you the option to save it to multiple places. Twitter, Flickr, Photobucket..on and on. That’s cool.
In order to get it on your blog, you’ll need to do a few more steps. However, THAT tutorial can be found ev-er-y-where. Here are a few that I think are helpful.
Smile Monsters offers a good visual of what Photobucket looks like for your HTML code.
Home Stories A to Z offers a tutorial on how to make one with the code offered underneath.
The Blog Designer Network is another tutorial I like for both.
Richella at Imparting Grace says
THANK YOU, Chris. I’m one of those people who needs detailed, step-by-step directions and photos to guide me. And then a little extra explanation on the side. With a few hints printed in red, just for good measure.
You know, you really should consider being a teacher. 🙂
Chris says
Richella, that made me laugh! Thank you!
kristin says
best tutorial i have ever seen THANK YOU! I’m posting this on my fb, I know everyone will love this!
XO
Kristin
Chris says
Yes! I’m so glad. ALL of the tutorials I read said, “Use an editing program” I didn’t know what that meant! What if you don’t know how to use an editing program? Gah! Frustrating. Glad you like it.
Emily [On the V Side] says
Thank you for this! It’s like you read my mind re: “where can I find a straightforward tutorial?”
Well, the answer is… right HERE. 🙂
Thanks
Emily
Chris says
I love it! I’m so glad! I couldn’t find a straightforward tutorial either! Frustrating!
Erin @ His and Hers says
Thank you!! I’ve wondered frequently how to do this. (Love the mustache button. Don’t know why you didn’t go with that one.)
Rachel says
Thank you!
Now I know what one of my weekend projects is going to be!
Maureen says
Hahaha… I love the skeleton even more after you comments on his tummy troubles 🙂 What a great tutorial… thanks!
Leanne says
Thank you from the bottom of my heart. Finally a tutorial about buttons that I can understand. I am so tech challenged, but this one I know I can do. Now I can have pretty buttons on my blog. I’m going to feature this on my Friday Favorites if you don’t mind. Thanks!
Chris says
You bet I don’t mind! I wish I could have found a step-by-step tutorial. I hope people can use it!
rebekah says
this is amazing! thanks for showing i’m always using picnik! love it!!.. never thought of doing a blog button with it! yay! colorkrafts.blogspot.com
Emily says
Thank you so much for this visual tutorial! I am a visual learner and this helped out so much as opposed to those other tutorials where they just tell you. I just made new buttons for my blog. 🙂
asnipofgoodness says
OMGoodness, I was just looking for this yesterday, I feel so stupid that I didn’t even know where to start! I can do this!!! Thank you so very much, great info!!!! Thank You Thank You Thank You
Sallie says
Yea Chris!! Thank you. Finally, a tutorial I can understand.
Shawon says
As soon as I saw the title of the post, I said thank you-out loud to my computer screen ( I mean to Chris!!!) Thank YOU!
Chris says
What an awesome comment, Shawon! Love it! Thank YOU!
Cara says
Thank you! Sometimes things like this are so frustrating to find and step by step instructions are always awesome! Amaing, thanks!
Kim says
Thank you so much!!! You made this so easy to follow 🙂
http://kim-lifeasweknowit.blogspot.com/2011/08/blog-buttons.html
I made my blog a cute button 🙂
Thanks again
Stephanie says
Brilliant! I really, really needed this! Thank you!
Amber @ Quilted Euphoria says
This is so awesome! I never knew how to do this myself before! I would love to have you come link this up at my weekend link party going on now! And I’d love to have you as a follower. If not, then you have a lovely weekend!
http://quiltedeuphoria.blogspot.com/2011/08/weekend-wow-me-party-2-giveaway.html
Abby says
Thanks so much for this! You actually made it look understandable!
Ami w/AliLilly says
YES!! I’m SO glad you did this. I too had such a hard time with other blog button tutes out there! I made mine THIS way! Just the way you have described! OH and I made my blog header from Picnic too! LOVE picnic! 🙂
Tammy says
I need to make a button for my blog. Thanks for posting this. Maybe I’ll tackle it this weekend. I’ll let you know how I do.
Thanks again!
Beth@A2Z says
Thanks for the shout out love!
nicolette @ momnivore's dilemma says
by far one of the best blog button tutorials I’ve seen on the internets.
thanks for sharing your mad skills.
🙂
jen @ tatertots and jello says
Great tutorial Chris!! I LOVE Picnik and use it for all of my photo editing. I have never tried to make a button with it, but I’m so excited to try. You are so smart!!
xoxo
Jen
Chris says
Thanks, Jen! Not necessarily smart…just desperate to make a button. 🙂 Amazing how desperation makes you find things out for yourself!
Notyet100 says
Thnks for the tutorial 🙂
heidi @ wonder woman wannabe says
great tutorial! thanks! I appreciate the additional links for getting the coding as well. 🙂
-h
Deanna says
This is THE tutorial I’ve been needing but unable to find. Thank you so much! What a HUGE help!
Chris says
That is so awesome, Deanna! I’m so glad I could help you!! Thank you for telling me!
Stephanie says
Just popping in to say that I finally used your tutorial. And…can I just say…way too much fun. Thanks for the new obsession! Here are some of my buttons:
http://www.love-life-project.com/2011/08/look-i-made-some-buttons.html
Chris says
That’s so cool, Stephanie! I’m so glad you linked to it so I could see all your creations. Love them! Great job!
aftergod'sown says
Hooray! This sounds awesome– I have been BEYOND frustrated by the tech-savvy tutorials that assume I know what a “Nava bar,” “Favicon,” and “Editing Program” are. Thanks so much. I’ll be trying this soon.
Chris says
Ha! That’s exactly how I felt! So glad it helped you! Good luck!
Amanda says
Thank you, thank you!! 🙂 This helped tremendously!
Chris says
Yay!!! Thank YOU for telling me that!
April Vernon says
I know this isn’t a new post of yours, but wanted you to know that I have been looking everywhere for a tutorial like this! Thanks!! Now I hope I can find the detailed instructions on how to add it to my blog! Can you tell me how you got your pretty subscribe buttons on the top left of your blog?
Chris says
Thank you, April. I’m afraid THAT is way over my head. I have a blog designer who did that for me. 🙂 My designer and my “techy” guy are in my advertising space to the left. Feel free to inquire with them! Good luck!
April Vernon says
Thanks, Chris! I LOVE your blog!
Kelly Reber says
Super Helpful! Thanks so much!
Loriann says
I just went to Picnik and they had a message that they are closing April 1 to move to Google+!!! However, it says you can access all the features including the premium ones you mention for free until then! I’m glad I found this just in time.
jenny at dapperhouse says
Thank you so much! I just made the cutest button ever in about 15 minutes Easy-Peasy!
You’re the best!
Chris says
Oh, I’m so glad I could help you, Jenny! Thank you for telling me!
Monica says
Thanks for this tutorial! It is so much easier to understand than others I’ve come across. I’ve been wanting to make a button for my color pages. Thanks! Thanks! Thanks!