Blog Updates + Glittery Header Tutorial

Sad news.

This week all my DIYing and house projects came to an abrupt halt the moment the mechanic told me my car's problem was a bad fuel pump, and it would cost, well, definitely my whole monthly DIY budget to fix.

Shoot. Just like that, all my home decor dreams are on hold for this month.

Since I was sitting around with no extra money to spend (well, I had $12.99, we'll get to that in a second), but I still had an itch to do something creative, I decided to finally give my blog a facelift I had been considering.

So...what do you think?

First of all, you might notice up in the address bar a little change I finally got around to. (At least I hope you do! Let me know if you don't.)  I'm a .com! I'm not sure what purpose this really serves, but for $12.99, which I was able to part with, my heart fills with joy every time my new address appears in the address bar. I used GoDaddy.com, and they were super helpful. It is a little confusing at first, but they immediately call you after you register and ask you if you have any questions, and they got it all worked out for me. I would recommend them! (This sounds vaguely like a sponsored post, but trust me. No one's sponsoring little old me. I just used them and had a great experience.)

Now on to the aesthetic improvements around here. Want to know how I did it? I thought since this is a DIY blog, someone out there might be interested in reading about how to DIY a blog design.  Today I'll show you just one trick I used, and if anyone is interested, I could create tutorials for the other updates I made.

And this is serious DIY. No Photoshop required. If you have a computer, Flash, access to the internet, and a little patience, you can do this.

To make the letters in my header appear glittery, I used Pixlr.com. First I downloaded a font I liked (I used Yellowtail from Fontsquirrel) and typed out my header in a transparent image 920 pixels wide and 200 pixels high (These dimensions just depend on the width of your blog. Check your blog's width to be sure.).

Next, go to the Layer menu, and click Merge Down. This will merge your text into the background, so that it's part of the image and you can copy it.

Next, I created another image the same size, that was not transparent, and I filled it with the color I wanted, using the paint bucket tool. I used a yellowy-gold color, but note that the glitter effect will make the color appear lighter. I had to go back and select a darker gold after my first try. Click the largest color box on the left menu to select your color.

When you have your gold image (or whatever color your chose), go to Filter > Noise, and adjust the noise to somewhere between 130 and 150. Play around with it until you have the "glitter" look you like.

Click back to your text image. Click the Marquee tool and make sure you are using the rectangular selector. Select around your text, then click copy (Ctrl + C). Go back to your glittery image and click paste (Ctrl + V). Your text should appear on top of your glitter.  Now, using the Wand tool, click inside each of the letters. Hold the shift key down to select all of it. Only your text should become selected.

Go to Edit > Invert Selection, then click Edit > Clear (I clicked delete on my keyboard and that worked, too.). This will delete everything in that image that was surrounding your letters. Now go to over to the Layers window, and delete the background image and the text layer.

Finally, go to Edit > Deselect All to see your glittery words! Save it so you insert it into your blog. Be sure to save it as a PNG or you may end up with a shadow in the background of your header.

If you're using Blogger like me, just go into your Layout menu, click on the header, select your image and be sure to click "Instead of title and description."

If you view your blog and the header doesn't look centered, first try adjusting your widths under Template > Customize > Adjust Widths. If an easy adjustment there doesn't center it, you can try adding CSS by going to Template > Customize > Add CSS and inserting this in the CSS box:

#header-inner img {margin: 0 auto;}

Let me know if you have any questions! Feel free to comment about any blog update you would like to know about. I would love to share the other tricks I used, if anyone is interested!