Wednesday, September 22, 2010

WotW: The Quest for a Blog Button (part one)

Hello again and welcome back to Wednesdays on the Web! I'm your host, Lorene, and we're here today talking about a very important blogging topic: the blog button.

If you're hopping around the blogosphere much, you need a blog button.

Let me say that again: you need a blog button. 

You know what it is. You've seen one on every blog. You may have even coveted a button that you saw on another blog (shame on you! ;). So... why don't you have one? What is preventing you from having a blog button of your very own?

While I can't answer that question for all of you (and many of you do, in fact, have your very own blog button), for most of you button-less readers out there, the barrier between you and a blog button is comprised of one-and-a-half things: lack of technical know-how and a smidgen of fear.

So, that's why we are gathered here today. To overcome that smidgen of fear and show you that you do not have to be tech-savvy to create a blog button.

Okay... let's get started. You may have noticed the (part one) in the title of this post. Today, we're just dipping your toes in the technical waters so that you can be ready to dive right in next week to the actual creation process. This week is preparation, like learning to add before you can multiply, or washing and pressing your fabric before you begin sewing. It's not as much fun, but it's a necessary step.

You have three assignments today:

1. Install Picasa. We'll be using Picasa to create your blog button. You may remember Picasa from some of Debra's Photo Thursdays tutorials. If you haven't already, go here to download and install Picasa. Open it and play around with it some, if you like. Some of Debra's first Photo Thursdays here were about Picasa, so you can check them out here (just click Newer Posts at the bottom to see more).

2. Select a background for your button. We're using Picasa to create this button, so your background will need to be an image of some type. In selecting a background for your button, keep in mind that you'll be placing text on top of whatever you choose, so make sure that your background isn't too busy. You have a couple of options in your image search:
  • A photograph. You'll want the photo to be representative of your blog but also have plenty of empty space for your text. You don't want your text running across an important part of the photo. If you feel like a couple of photos would represent your blog better without being too busy or too hard to see/read, you can choose a few and I'll show you how to combine them into a single image for your button, too.
  • A digital scrapbook paper. Digital scrapbooking kits are just fancy-looking images, so you can use them in Picasa just like they were a traditional photo. And there are lots of free digital kits available.... you know how I love free! Two Peas in a Bucket has a wonderful selection of free kits available (select Price Low to High from the drop-down to see the free kits first), and Shabby Princess has some awesome free kits too. As you're browsing, though, remember that you'll be putting text on top of whatever design you choose, so it's best to keep the design simple.
  • A solid color background. Depending on your style, you might want just a solid color background. My button at just Lu is actually just text (thank you, Wingdings!) on a white background. If that's more your style, you can go here to download a blank white background that I created just for you. (Just click Download and then Download photo.) As part of the tutorial next week, I'll show you how to change it to whatever color you want it to be.
Remember, your blog button should represent your blog and also correlate to your blog visually. You don't want a hot pink background on your blog button (even though it would definitely attract attention) if your blog's main color is a nice mint green. Your blog button should coordinate nicely with the actual design and color scheme of your blog. For example, Debra's button for Housewife Eclectic uses one of the images from the blog header; my blog button over at just Lu uses the same color scheme and square motif as I use for my header, navigation bar and favicon (that little icon up in the address bar).

Be sure to keep this correlation idea in mind as you're selecting the background for your blog button. And if you find a color scheme or design that you absolutely love... well, you can always change your blog background and/or header to match! My color scheme over at just Lu originated from a premade blog background from Hot Bliggity Blog and evolved from there. :)

3. Select a font for your blog button. Again, this should correlate with your existing blog design (unless you are redesigning because you are so excited about this blog button, kind of like having to remodel the house after buying a new picture because the picture makes the paint look dingy, and then the new paint makes the carpet look crummy, and then the new carpet makes the entryway look to small...).

You don't want to go too crazy with fonts, though. Generally, two fonts will suffice: one that is easily readable for your main post text and one that is a little more unique (but still readable) for your blog header and blog button. DaFont is my favorite place to get new fonts. {Once you've downloaded a new font, instructions for unzipping the folder are below, and then just follow the How to install a font directions on the DaFont homepage.}

A note about zipped folders

As you're downloading digital scrapbooking kits and fonts, you may notice that the files are in a zipped folder (shown by the little zipper across the traditional yellow folder). A zipped file isn't a flavor additive (like the tangy zip of a certain sandwich spread), but it definitely serves its purpose! A zipped file is also called a compressed file because it is, uh, compressed. Smaller. When files are stored on servers and distributed around the web, it's important they they are as small as possible so that they don't take up unnecessary space on the server and so that users can download them more quickly.

The main reason that this whole zipping thing matters to you is that you need to unzip the folder or extract the files before you can use any of the contents of the folder. It sounds complex, but it is sooo easy. Here's how easy it is:

On a Windows PC:
  1. Locate the zipped file folder that you just downloaded. 
  2. Right click on the folder.
  3. Select Extract or Extract All from the right-click menu.
  4. Unless you want to change the destination of the extracted files, click OK.
On a Mac:
  1. Double-click on the zipped file.
    (the simplicity appeals to you, eh? makes you want a Mac? maybe it's just me ;)
Done! Your extracted files will now be in the same location on your computer as the original zipped folder was, in a folder named the same thing as the zipped folder. You can tell the difference because one folder has the zipper and the other is just the plain yellow folder. 

And, in case you are wondering, yes, you can also zip files yourself. If you're distributing a group of images or files (of your own creation, of course, so that it's on the up and up) on your blog or by email, you'll want to zip the files so that the upload/download doesn't take as long. Even if your files aren't large, zipping the files allows you to attach or upload a single file instead of individually uploading those twelve PDF pattern pieces. Zipping a file is just as easy an unzipping one:

On a Windows PC:
  1. Select the files that you want to zip by holding either shift (for consecutive files) or ctrl (for non-consecutive files) and clicking.
  2. Right click on one of the selected files so that the files remain selected.
  3. Select Send to and then Compressed (zipped) Folder.
  4. Enter a name for your newly zipped folder.
On a Mac:
  1. Select the files that you want to zip by holding either shift (for consecutive files) or command (for non-consecutive files) and clicking.
  2. Right click on one of the selected files so that the files remain selected.
  3. Select Compress # Items.
  4. Enter a name for your newly zipped folder.
So, there's your homework plus a little extra info so you can show off your smarts to all of your friends. As always, register your questions, complaints or suggestions in the comments (compliments are also always welcome ;).  Happy Wednesday! Don't forget your homework!

Continue on part two of the Quest for a Blog Button here.

Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about books, crafts, recipes, and whatever else comes up at just Lu.


Brandy@YDK said...

great tutorial. i think everything html / designing related is scary.

nottwins said...

Great tutorial! Many of us probably don't think about what an important tool a blog button can be.

Megan Harmeyer said...

Thank you. Thank you. Thank you!! I'll definitely be playing with this as soon as I can. Can't wait to see what I come up with. :)

Stray Stitches said...

Thank you so much for this.

MKS said...

This is great! Thanks!