Blog Headers and Design Tutorial

Once upon a time, I was obsessed with scrapbooking. I'd go buy papers, punches, tapes, stickies, and make a big ol' mess making elaborate scrapbook pages. I enjoyed the finished product, but hated the cleanup and clutter involved. One day, I took a break, which turned into an indefinite break from scrapbooking.

Fast forward 7 years, and now I discovered blogging. When I first started blogging I was trying to figure out the ins and outs of Blogger. I wanted to know how to give my blog a little kick. I was tired of the text in my header saying "The Simmons Family" with no pictures or graphics.

I started playing around in Photoshop and HTML code and then I discovered a whole world of digital scrapbooking. Whoever thought this up was amazing! I found places to download little scrapbook kits for free. They have papers, graphics, fonts and text all combined into one coordinating kit. Not only is it inexpensive, but you can download it, store it on your computer and never have a cluttered mess in your house again!!

Why am I telling you all of this? Digital scrapbook kits are the first place I go to get my materials for my headers and background papers. These are a couple of my favorite sites....
http://sweetshoppedesigns.com/
http://shabbyprincess.com/
There are so many more sites out there.

Shabby Princess offers FREE scrapbook kit downloads.. HERE!

Now that we know where to get our kit for our website design.. let's get started! I do need to tell you that this is just my way of doing things and there are probably other ways to do it as well. I am self taught and just do what works best for me. Also, if you click on any of the images, they should enlarge.

I use Photoshop Elements 7, but any version will work. I'll let you in on a little secret... go to http://www.adobe.com/downloads and get a FREE 30 day trial of any Photoshop program! Sweet deal. Beware... you may find a program that you LOVE and can't live without... Lightroom is my newest addiction. I'll save that for another post.

One more side note before we begin. If you don't want to spend time creating your own blog headers, downloading scrapbook kits or just want a simple alternative, check out these little Blog-in-a-Box kits. They are inexpensive and very easy to use.

Time to get started!

First thing to do is find a scrapbook kit that you want to use. For my most recent header, I chose Dear Santa, by Melissa Bennet.

To make it easier to follow along with the tutorial, I will go to Shabby Princess and download a free kit. I am going to download the "HAPPY GO LUCKY" kit, because there are a ton of elements to work with. I always save the download to my desktop so I can find it afterwards and I'm not searching through folders trying to find my lost download.
Now go to your desktop and find the compressed folder (with a zipper on it), right click and extract all. When you open your folder it should look like this... all of your papers, elements, and clip art that came with the kit.
Are you ready to have FUN now?? Open up your Photoshop program and lets get started.

Click on File -->New-->Blank File
You can create your own height and width. My header size is 950 x 450, but you can make yours any size you want. Click OK.
This is what you should see... this is the bottom layer of your new header.
Now we need to get all of our papers and elements into Photoshop so we can start creating our header! Click CTRL and the O key at the same time, this is a shortcut to open up a new file. You need to open up the file on your desktop that reads "Shabby Princess - HappyGoLucky" and you'll see all of your scrapbook kit elements on the screen. You can click on the elements you want to import into Photoshop. Just hold down the CTRL key on your keyboard while you click on each element you want to use.Go ahead and click on the banner PNG file at the bottom (where all the images are) and it will open up like this....Make sure you have the MOVE TOOL selected. It's the little arrow on the upper left hand corner, next to the magnify glass. Click on a paper you want to use as your background. I chose the light brown to start with. All I have to do is click and drag it up to the header, then drop it (by letting go of your mouse).
You just created a new layer on top of the header. Now you should see the paper surrounded with a few little boxes. Click on one of the boxes and drag your paper out so that it covers the entire checkered background of the header.
I just repeated the same thing with the darker brown only I let it show a little of the light brown. Think of it as layering paper on top of eachother, it's that easy.
Here is a little polka dot for fun.
Then I decided to add a picture of Owen. Again, continue to just drag your images from the bottom and drop them onto the header you are working on. SO easy. Then you can resize them by pulling at the boxes around them.
You can add as many elements, papers or pictures as you like. How about we add some text? Click on the Text Tool (the T on the left).
Now you can click on the fonts and select which one you want to use. I chose Century Gothic for this one.
Now you can change the size of your font. I like a large fontt on my headers, usually around 72 -80.
Now all you have to do is click where you want to type and start typing.
I want to add a little color to my font so that it pops off the brown. First thing you need to do is highlight the font and then click on the color box at the top. Click the color you want and then ok.
I got carried away and changed each letter to a different color... be creative! I usually save the flowers and other little clip art until the end. I decided to add the flowers so I clicked on the flower I wanted and dragged (drug) it into place. The picture was covering up the flower so I need to bring the flower to the front. So click on Arrange-- bring to front. Another way to do this is to find the layer (on the layer palette on the bottom right) and drag the layer where you want it to go. If you aren't familiar with layers.. go ahead and play around.
Here is my finished product!
In order to save it you need to go to File --> Save As
Again, save it to your Desktop so that you can find it. Also, make sure you change the format from "Photoshop" to JPEG and then give it a name --> then click Save.
Now it's time to upload your header to your blog. I only know how to do this in Blogger, but can show you a way to do it in a second. First thing you need to do is log into your blogger account and click on LAYOUT. You'll see where it says Header at the top and you want to click EDIT.
Now you will click Remove Image and make sure you don't have it selected to "shrink to fit". It will ask you to browse and find your header. You'll find it on your Desktop (remember you saved it there?). Upload and click SAVE.
Now you have a new header on your blog!!! If for any reason the new header doesn't fit or it looks to big (or small)... you need to go back to Photoshop and resize it. Like this... You can increase the pixels to make it larger, or decrease them to make it smaller. Just save it and upload it to blogger again. It may take several adjustments to get it perfect. Now, do you want to know how to add a coordinating background??

You need to setup an account with a free hosting service... I use Photobucket for this. So go to http://photobucket.com/ and setup a free account. Now sign in. Click the big blue button that says "Upload Images & Videos". Go to your Desktop and find the folder with all your scrapbook elements, Happy Go Lucky is the one I was working with. You can select more than one paper to upload at a time by holding down the CNTL key while clicking on the papers you may want to use as your blog background. Then click open. It will now upload the papers to Photobucket and when it is complete, you will see a screen like this. Just scroll to the bottom and click "Return To Album". Now you should see a screen like this and if you scroll down, you'll see the papers you just uploaded. I only uploaded the four that I would use as my background paper.
Leave this window open and open up a new browser window (ie: Internet Explorer, Firefox or Safari). Login to your Blogger Account. Click on Customize --> Layout --> Edit HTML

Scroll down in the HTML box until you find the script that looks like this... See where it shows this??

body {
background:$bgcolor;
background-image:url(http://i334.photobucket.com/albums/m412/andreansimmons/mbennett-dearsanta-pp4.jpg);

background-repeat:repeat-xy;
border-color:#;
border-width:0px;
border-style: solid;

Your HTML code may be different, mine has been changed. It should look like this. This is the code that will change the background image.. like the christmas dots on my blog design now. Before you make any changes to your HTML, make sure you back it up!!!

Now, let's change the background image. Leave your HTML window open and click back over to your photobucket window, that should still be open.

If you hover just below the uploaded paper you want to use as your background image it will give you four options of coding. You will select the one that says "Direct Link" and copy the code.Now you can paste the code inside the parenthesis like this....
Don't click "Save Template" until after you preview it! Make sure you like what you see. If not... go back to Photobucket, hover over another paper, copy that code and paste it again. Preview it and do this until you are happy with it.

Now click on "Save Template" and you are DONE!!! One last thing... if you want to change the color of your text to match your new design just click on Layout --> Fonts and Colors. It gives you many color and a few font options there.

I hope this sparks a little creativity in you!! Have fun and make sure you send me the links to your blogs so I can check out your new designs!