12.15.2010

EASY DIY Custom Blog Design Part 4: Header

This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.
Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!!  I will show you how I made this header, so that you can make one that is 100% Custom for you!

First, head over to Picnik, and click on Get Started!


Second, I am going to click on Make a Collage.

Then select a layout.

I selected this one and used the Proportions slider to change the height a bit.

Down at the bottom, you can upload your images.

I am going to upload from my Computer.  After you upload, drag the photo on to your layout.


I wanted a big spot for my Header title, so I am going to leave the left picture empty.  and I am going to change the color to a maroon color that matches my background that I made earlier.

After you get the right color, I have used the Roundedness slider to make the image have rounded edges.

Now just Click on Done in the top right-hand corner.

Now I want to work on the text, so I am going to the Text link at the top.

My title is going to be "Messes with the Reynolds", but I don't want to type the whole thing in just one box, because I want to lay it out cute, so I am first going to just type "Messes" and click Add.
Then pick a cute font.  The little circles on the 4 corners allow you to size the word, and the circle on the top allows you to rotate it.

So after I added a few more Text Boxes, and played with the fonts, this is what I came up with.

Now I would like to add a little embellishment, so I am going to click on Stickers at the top.


I found a cute little family drawing that worked perfectly and just dragged and dropped it on to my Header.

Then I went back to the top and clicked on Frames.

There, I picked Rounded Edges, and adjusted it to match my image.

Now if your background is any other color than white, you will want to select Transparent Corners!

If your header looks the way you want it, just go back to the top and click on the Tab that says: Save & Share.

These are the settings that I used to save my photo.  I did 1000px wide, so that it would fit just perfect on my wide 2 column template, and I picked png, so that the corners would be transparent, not white.  (JPEG files will not allow you to save transparent).
Now my saved Header looks like this!!  So cute!

Step #2: Installing your Header

First, you are going to add your header image as you normally would here:


 When you upload, make sure that you select Instead of title and description, and do NOT select Shrink to Fit.  Then Click Save.
Now your Header will look like this.

Obviously, the borders around it look terrible, and we need to get rid of those, and we need to center it properly.  So go to your Edit HTML page, and find your #header-wrapper, and change the border to 0px.  So your #header-wrapper should now look like this.

Now go down to your #header, and change the 5px to 0px.  Also change the 1px to 0px on your border.  So now it should look like this.

Now you're Done!

7 comments:

  1. One look at your site convinces me to be a follower. YEA!

    ReplyDelete
  2. Brenda at Cozy Little House suggested I visit your blog. She's right when she sez your blog'll help us going in the right direction to a great looking blog.
    Just looking at this post I've become your 111th Follower.

    ReplyDelete
  3. WOW! I'm here from Brenda's to say WELCOME, too! But I sure need to learn some of this! I'm going to mark your blog to come back! Thanks and happy holidays! ♥

    ReplyDelete
  4. Thank you! Thank you! I just followed your 4 part series all the way through and redesigned my layout. It was so easy and turned out awesome! Check it out: www.grandmasguidetolife.blogspot.com

    ReplyDelete
  5. very usrful
    And when all hope is gone, I'm here
    No matter how far you are, I'm near
    It makes no difference who you are
    I am your angel
    I'm your angel Sightline Payments Kirk Sanfordlottery uk

    ReplyDelete

Related Posts with Thumbnails