tue-torial: a super easy blog header

I am finally back with another tue-torial! I have a few more lined up so hopefully I can get my act together and post them more regularly! Today I'm going to show you how I made my blog header. I know it's nothing spectacular, but it was super quick and easy and anyone can do it. You don't even need Photoshop or any fancy photo editing software!

Step 1: Choose a picture. 

I took one specifically for the purpose of making a header. This is the photo I took:

 

I had to rotate it sideways, but you won't need to if your picture is already facing the right direction, obviously. I wanted to showcase my sparkly flats, and the sparkles go along with the name of my blog.

Step 2: Upload your picture to Picnik.com.

I'm no computer genius. I edit all my photos using Picnik. It's really easy user-friendly, and all the basic functions are free!

Step 3: Re-size your picture.

You will want to re-size your picture to whatever size you want your header to be. You can keep it as is, or you can change it to fit your blog. It's really personal preference. I wanted mine to span the width of my blog and not be too tall. If you want to know the exact dimensions of your blog to help you re-size your photo, you can check them in design view. 

I use Blogger In-Draft for my dashboard, so I'm not sure if things are different in the standard blogger dashboard, but I  just click on "Design" to take me to the page where I can make edits, and then I have an option for the "Template Designer." It's located under the tabs next to "Posting" and "Edit HTML."

Once you're in the Template Designer, click "Layout" and then "Adjust Width." This is where things get super technical. See where it says how many pixels the width of your blog is? Don't make your header picture width longer than that. I am positive there is an easier way to figure out your header width (I think I even managed to find it in the HTML coding when I did this, but of course I couldn't find it now.) Personally, I just did A LOT of trial and error. Re-size, add the picture to your blog, re-size again. Once you find the size you like WRITE IT DOWN. You'll need it if you ever want to do this again. 

It will also help to un-check both "Use Percentages" and "Keep Proportions" when you're re-sizing. I find you'll never get your exact dimensions that way. Picnik will try to preserve the picture quality, so you'll have to sacrifice that a bit for the sake of a correctly sized blog header (hey, I never said this would make a SUPER AWESOME PROFESSIONAL BLOG HEADER).

Step 4: Add Text.

In this case, your text will be your blog title. Or whatever you want. Edit the photo using all of Picnik's cool tools. Whatever!

Step 5: Insert into blog.

Once you've got your picture just the way you want it, head back into blogger. Pop on over to Design view so you're looking at your blog's layout. Click the edit button in your header section. You'll geta pop up like this:

 

Only minus the picture in the middle. Next to where it says "Image" you'll want to choose "From your computer." Now just find where you saved your header photo and upload it! Where it says "Placement" be sure to choose "Instead of title and description." Click Save and then check out your blog. Voila! Fancy-pants (eh, kind of fancy-pants...) new header!

If you have any questions, feel free to comment or email me! And if you have any tips on making blog headers, or have a tutorial on your blog that you'd like to share, those are definitely welcome as well!!

Happy Picniking!