Beautify your Blog: week 3 - Beautiful Blog Headers: PART 1

Hi all, and welcome back to the third installment of the Sew at Home Mummy "Beautify your Blog" series! This week we'll be going over some simple ways to create a pretty blog header. If you're just coming across this series for the first time today, please see  Week 1: this post for the series disclosure and the first few lessons  Week 2: Backgrounds and Layouts Each of these lessons build on the previous week's. In the first lesson I suggested you create a test blog - at the end of the series we'll copy the template you have built and created over to your 'real' blog. <div align="center"> <a href="http://www.sewathomemummy.com" title="Sew at Home Mummy" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblCqFhLqZ_UIdCCUiH3IM3FsRbNIlEhv62MDKyTDhHZH14vOUZVL4cO4DiTg_SeTfr6hQFzJdsbZyElHcBaE_N65wi_15YU1GW1MshdGMeKQjYFIahjm9ZN5FAGuugzNqBdDyPRaMamBi/s1600/Beautify+Your+Blog+Button+Sew+at+Home+Mummy1.jpg" alt="Sew at Home Mummy" style="border:none;" /></a></div> Alright! Let's get to it. This week we'll be looking at making custom blog headers. A blog header is the title image at the top of a blog. I thought I'd cruise the quilty bloggosphere to find some really pretty inspiration among our peers. Please note: These are just examples, not meant to be 'copied' but to be used as inspiration :) Things to consider when you're looking at these examples (and my blog, if you so like): Size. The header should be nice and long, to the edges of your posting space (or thereabouts). If you adjusted your blog width in Week 1 to about 1200px wide, your header size will probably be around 1000px wide. Note in all of the examples below the headers are long and narrow; in general, you're going to want to keep the height of the header to about 1/3 or even 1/4 the length in order to avoid it impeding on your posting space.  So, if the width is 1000px, your height should be around 300px or so. I'll show you how to size your images optimally below. Color. Remember last week we went over color schemes, and I said to remember the acronym K.I.S.S.: Keep It Simple, Sewist! Try to stick to 2-3 dominant colors in your header at most.  Font. Font = text type. Pick a commonly occurring color in your header images for your font (text) or, go with a color which matches the background you chose. Something that makes 'sense'. Pick a font which is easy to read, but, this is where you can add a bit of personality. You want to avoid using 'fancy' fonts in your posts and post titles, but, with your header, you can definitely get creative. Fancy fonts in your posts are difficult to read and take longer to load on the webpage. Stick to a maximum of two fonts in your header.

image courtesy of Quilt Matters A close-up of one of M-R's quilts and a simple title head her blog. Notice her simple background, and dark purple color scheme. single font. Notice: long and skinny header.

image courtesy of Cut to Pieces Angela's clip art collage in the header is totally awesome two fonts. Notice: long and skinny header.

image courtesy of Diary of a Quilter Amy's gorgeous collage of quilty goodness is really eye-catching. two fonts. Notice: long and skinny header.

image courtesy of Pretty Bobbins. Gemma goes with a simple collage of work, with a pretty blue title. single font. Notice: long and skinny header.

Image courtesy of Stitched in Color Rachel goes for a simple look here with a gorgeous shot of one of her quilts and a custom font title. single font, two colors. Notice: long and skinny header.

Image courtesy of Canoe Ridge Creations Megan goes for really simple, but very stunning. single font - and I would consider this two colors - grey and rainbow. It works because the header is so simple - no graphics to compete with. Notice: long and skinny header.

I'm going to show you two ways to make a custom header today.

1.0 Simple Single Image Custom Header:
If you have a photo of a quilt or an image you'd like to use as a background for your header, here's how to do it.

1.1. First we need to find out how wide we need to make our header image. Go to
Blogger.com Homepage
 - - - - click "Layout" in the dropdown menu beside your Test Blog title
 1.2. on the Layout page, select "edit" in the "Header" box


1.3. A pop-up window appears. At the bottom of the window, you'll notice the following phrase:
"Image will be shrunk to _____ px wide"

Take note of this number - we'll need it later.

Close out that window.

1.4. Now, we need to crop and resize our image we'll use for our header background. Since any picture you will have taken of one of your quilts won't be in the correct proportions, we'll need to both re-size and crop your pic.

Again, I'm going to use Pixlr.com/express

1.5. On Pixlr's website, select "Browse". Select your image to upload.
This screen appears:
Now we need to crop it.

1.6. Select the "Adjustment" tab. Select "Crop".
Now. We need to crop the image to be about 1/3 (one-third) the height for the width. So long and narrow.
Click "Apply".

1.7. This window appears:
Now we need to resize the image.

Select the "Resize" button.
This window appears:
Circled in orange above are the parameters we are going to need to change.

Note the width number - mine says 1600px - I need to change this number to the number we determined in Step 3. For me, that was 1020px.

Note that when you change the width, the height automatically changes because the "Keep proportions" tab is selected.

My height automatically changes to 351. Remember how I said we wanted the image about 300px tall? So I'm happy with this. I'm going to go with this - but if your pic was 250px+, that would be okay too! Once you're happy, click "Apply".

If your height is still too big, go back and re-crop your image, or, adjust the height manually by de-selecting the "Keep proportions" tab (but be wary here - it'll distort your image doing it this way).

1.8. Once you're happy with the size of your image, you can play with the editing functions in Pixlr. For me, I'm going to lighten this image up a bit.

1.9. Now let's add some text.
Select the Type button, and pop-ups of different type choices pop up. Choose the style you'd like to go with; type your blog title in the text box (circled in red below). Use the little white dots on the pop-up to change the size of your font, and grab the box frame your text is in to float it around. If you want two different fonts in the image, repeat this process twice.

you can edit the color using the color-chart (circled in orange) change the justification (circled in green )

1.10. When you're happy, click "Save". When saving, save at highest quality image (slide the bar all the way to the right):

Here's what I came up with:

2.0 Collage Custom Header:
2.1. In Windows, open Paint program.
See these little blue dots on the edges of your paintboard?

grab them and drag the paintboard out nice and wide and nice and low, like this:
then, save the blank canvas to your desktop. (Click File - Save and save as a .jpeg)

2.2. Head over to Pixlr.com/express.
Select "Collage".

This screen appears:

Now, we can select our layout and proportions for the blog header and adjust them accordingly to fit our needs. Remember: We want the collage to be long and narrow, so maybe something like this:
I changed the layout (circled red), spacing, roundess and proportions (circled orange) and the color (circled blue). Have fun with it, play with modifying multiple collage layouts, but keep it long and narrow.

2.3. Start adding images. Hover on each of the collage pieces so that a '+' sign appears, click, and add your quilty goodness to the frames. To the top frame, I'm going to add that blank white image I created in Paint (this'll be where my blog title will sit).

You'll notice that if you hover on your added images this little pop-up appears:
Select the paintbrush to edit your image, the arrows to rotate, and the 'x' to remove it.

You can also grab and drag your images from space to space.

To add my blog title to the image, I clicked on the paintbrush in the top frame and added text as we did above in step 1.9.

Here's where I'm at so far:

2.4. Re-size your collage:
Once you're happy with your collage, click "Finished".

In the screen that follows, click "Adjustment", then "Resize", and follow the instructions laid out above in 1.7, resizing your image to the pre-determined required width.

Click Save. Save image at maximum resolution.

Here are some collage headers I made up using this technique as some ideas for you (please excuse the image quality of the quilts - I was rushing and didn't edit each individual image like I would in real life, but you get the picture):

here, in Paint, I used the paint bucket tool to color the whole canvas black, then saved it as a .jpeg, then uploaded it as I would any other image.

3.0 Uploading your Custom Header: 

To upload your custom header:

3.1. In your Layout page, click Edit in the Header box. A pop-up appears:
Select:
Instead of Title and Description
DEselect:
Shrink to fit
THEN
Select:
From your computer (and upload your saved header image).

Click, "Save".

And here's what the all of my options would look like on my test blog:


I think I'm going to go with Option #3 for now :)

Next week:
Part 2 of the header series will be a bit more advanced. I personally use Microsoft Publisher and Adobe Photoshop Elements to do much of my work - next week I'll be talking about using Publisher to create a header using digital scrapbooking elements. I apologize in advance if you don't own Publisher or the like - it can be done in Word with the help of PowerPoint, but that is beyond the scope of this tutorial.

Today's tutorial should get you started though!