Welcome to the first tutorial here on Real Life Design. I get lots of basic questions about the "how to's" that you may not need to hire a designer to do, so I thought I'd start sharing some of what I've gleaned along the way.
Do you want one of those cute blog buttons you see everywhere? The ones that have a nifty little box for other bloggers to grab the code? Well, it may be easy to make from your header image. Here's how:
1. Be sure you have permission to use the images in this way. If you're not sure, it's a good idea to ask your designer. Kari, from Just Another Day in Paradise emailed me about this the other day. I didn't mind at all, but it was nice of her to consider it.
2. Open your header image in Photoshop, or other photo editing software. Don't have a usable image? Right click the image, and choose "Save Image As." It's best to work with a flat image, or else you'll have to adjust the shadows on the smaller version.
3. Choose the crop function. Enter the desired width for your button. Anywhere between 125 and 150 pixels is probably good. Select the area you would like to use as your button, like so:
4. Crop the image, and add a border if you like. So, now it looks like this:
5. Now, upload it to your blog, or Photobucket. Refer to this post on Blogging Basics 101 for adding the code in a scroll box.
Remember: When you insert the button code into the scroll box code, you must first make it "postable." Go to this website, paste in your button code and click "make it friendly." Then insert that code into your scroll box code.
Here's another example, done by Kari, with the header I designed for her.
Do you want one of those cute blog buttons you see everywhere? The ones that have a nifty little box for other bloggers to grab the code? Well, it may be easy to make from your header image. Here's how:
1. Be sure you have permission to use the images in this way. If you're not sure, it's a good idea to ask your designer. Kari, from Just Another Day in Paradise emailed me about this the other day. I didn't mind at all, but it was nice of her to consider it.
2. Open your header image in Photoshop, or other photo editing software. Don't have a usable image? Right click the image, and choose "Save Image As." It's best to work with a flat image, or else you'll have to adjust the shadows on the smaller version.
3. Choose the crop function. Enter the desired width for your button. Anywhere between 125 and 150 pixels is probably good. Select the area you would like to use as your button, like so:
4. Crop the image, and add a border if you like. So, now it looks like this:
5. Now, upload it to your blog, or Photobucket. Refer to this post on Blogging Basics 101 for adding the code in a scroll box.
Remember: When you insert the button code into the scroll box code, you must first make it "postable." Go to this website, paste in your button code and click "make it friendly." Then insert that code into your scroll box code.
Here's another example, done by Kari, with the header I designed for her.
Leave a comment if you make one, so we can come grab it! And while you're at it, grab my blog button! Here's the code:
<a href="http://www.reallifedesign.net" target="_blank"><img src="http://i282.photobucket.com/albums/kk253/RealLifeDesign/Real%20Life/BlogButton.jpg" border="0" alt="Real Life Design"></a>
-----------------------------------------------------
This was also written as part of Works For Me Wednesday. For more Works For Me posts, visit Rocks In My Dryer.
15 comments:
Whoohoo, super fun!!! It SO helps when your designer totally ROCKS!!!! :D Thanks Sarah! :)
Thank you, Sarah! I can't wait to try this. I've learned so much from you already. I'm looking forward to future tutorials!
My header is really amateur. I didn't have any software to make it other than Paint. It has such rough edges to it.
When I made it, I used clipart from Microsoft.com Do you think it would be OK to use their graphics to make a button like this?
Thanks again for the fun tip!
My header doesn't leave my title all in a nice box like that for cropping, but I do need to work on a button sometime. I suppose it'll be another thing to add to my "to do" list.
Thank you for sharing this information! I was excited to read the Rocks In My Dryer post today and now this! Thanks again!!
Good of you to share that tip. I'll have to check back to catch your other helpful design hints.
I love you. I've been trying to figure out that silly scroll box for the code. Muchas gracias! :D
Come see my cell phone alternative:
http://anapronaday.blogspot.com/2008/06/mr-ed-talking-horse.html
Great tip! Can't wait to see your other tips.
Thanks for a peak into the blog design world- All this talk about headers and buttons. I am going to check out your other tips as well.
This is great... not sure what I'm gonna do with the button but love knowing how to make one.
Yeah Sarah!
This is great. As usual, I hadn't even thought of this. I'm going to play right now while Pickle is napping!
I'll let you know what I come up with . . .
I added your button in my credits--it looks very nice; come check it out!
The button came out great (I think), but I can't figure out the code box below . . .
I used the BB101 code exactly and got a scroll box with my button photo inside. I even added the code straight from her post (for the BB101 button code) and still got a scroll box with her button photo in it.
I'll have to look into it more when I have more time. Chores are calling!
~Amber
Aha! When you insert the button code into the scroll box code, you must first make it "postable." Go to this website, http://www.elliotswan.com/postable/
Paste in your button code and click "make it friendly." Then insert that code into your scroll box code. Too complicated?
I am interested in blog design and this is a great tip. I am going to bookmark your site when I have a bit more time to work on it. I designed my own header using Paint.net but would like to get into a little more detail.
Can you share what software you use to design blogs?
Thanks for the great tip!
I'm far from making a blog button, but I'm saving your site so I can come back when I need to!
It took me about 45 minutes total, but I figured it out! I now have a button for Family Musings! Thanks for sharing this tutorial.
Post a Comment