SITE TABS - CLICK TO EXPLORE

Tuesday, December 02, 2014

Tis the SEASON to design a NEW frock.

A REPOST…

I was busy changing into my Holiday Outfit, here at Pearson Report, and thought I'd share my wardrobe secrets.

ENJOY…

Header and Background fun - what does your blog wear? Original post: Nov. 9, 2012.

If you frequent Pearson Report you will undoubtedly have noticed I like playing dress up with my blog.

Since this is my blog it will be addressed in the feminine. 

She, that would be my blog, likes to be seen in custom designed hats (Headers) with matching outerwear (Backgrounds) and I like to oblige. (yes, some bolts are not completely tight, but then if this is as bad as it gets I’d say I’m in pretty good shape)

Here is a peek at some of her outfits…

City Skyline, Vancouver


Dandelion Farm, in the Cariboo


Hubbard Glacier - Alaska


Jericho Beach, Vancouver


Lake in the Cariboo


Lizard (Header only, background is a Little Black Dress)

Lost and Found (Header only - Background: LBD)

Sunset Beach, Vancouver


I have discovered a few things while creating these looks. I’m going to share what I’ve learned because that’s just the kind of gal I am...always willing to share a few of my spare bolts! (if you really “read” my blog you’ll get the reference)

Although I work with a Mac I’m sure this bit of info can be translated easily for Windows users.


Here we go…

I start by creating a folder on my desktop called Blog Header and BG sets.

I then go looking for photos (I use all my own pictures) in my photo library. 

I decide on a background; when I find a photo I like I crop it. I pay attention to the “width” of my photo as I crop it. I don't want it any smaller in width than1800 pixels - I use 2100 or 2200, unless (as in the case of the Dandelion set) the photo is maxed out at 1800 pixels already.

Once I've cropped my photo I Export it to a desktop folder. (this makes life easier when I want to change my blog’s look as often as I change my lacy bits, or boxers...depends on my mood!)

When exporting in iPhotos, I get this box: 
#1 
I always select the smallest size for the JPEG quality as this will keeps my picture below 300k, which is the maximum size allowed for Backgrounds on Blogger. 

#2
Next, I need to specify a “size” for my photo; I select Custom and then choose “width” and type in 2100 or larger, but 2100 pixels wide seems to do the trick for even the larger monitors, right Dezmond!

Thanks to earlier feedback, from good friends like Dezz, I was able to determine the right pixel size so someone with a big monitor would get to enjoy a decent sized background.

However, there is a limit to how far 2100px will stretch so I always select an actual Background colour (in the Template area) then if my picture is not wide enough a matching, complementary colour will be visible.

Like this…

I have stretched my blog (pulled it from one side) and exceeded my actual picture width; this is what you would then see:

Once I have exported my Background, to my desktop folder, the upload is straight forward but I do have to remind myself to pay attention to this area: 

I choose to align my photo in the centre, I don’t tile it and I don’t have it scroll with the blog - my Background is static.  You can play with this area, and depending on your photo and your intentions you may wish to have different settings.

Now for the Header...

Again, I select a photo and crop it. Here I want the width to be no greater than 1000 px (again, this may vary depending the page layout) but for me this works and in any event, Blogger scales it down further to fit the Template size.

In iPhoto I do a custom crop and select 1000 x 300, I like to keep my Header on the smaller side in height. Once cropped I go through the same Export step, only I select 1000px for the width, and I still use the smallest JPEG size.

I like a custom Header and to that end, once I’ve Exported my picture I use the Preview option, with my Mac, to add my blog name, and a border, to my picture. (poor woman’s Photoshop - yeah, go me!!! It's how I do all the writing on these screenshots as well!)

When I want to upload my Header I go to Layout and click on the Header tab.


Note: I click “Shrink to Fit” otherwise my picture will be the width I cropped it to. That's to say, 1000 x 300 would show as 1000 pixels wide and would exceed the width of my post area and sidebar combined.


Also, since I do a custom Header and have added my blog's name to my photo I need to pay attention to the Placement area, shown here, so I don't get a second Blog Title showing up:

And that's about it!


Okay, I don’t really know how necessary it was to "share" this because I love what you all do out there already. Mighty fine looking blogs I follow, I can tell you that!

Butt (big butt, yes two t's *giggle* cause it's late and I'm in need of sustenance - liquid preferred) just in case my millions of readers (reading is good, commenting is better...butt nothing, comment trumps reading, ask Donald, he comments without reading!) wanted to know how I work my magic, here at Pearson Report, well, now you know! 

It’s all about lacy bits and boxers...or, Headers and Backgrounds - take your pic(ture) and run with it!


How do you create your Header and/or Background? Any tips you care to share? 

Cheers, Jenny

33 comments:

  1. Wow Jenny, how long did it take you to construct this post? Lots of effort went into all the instructions and screen captures! You rock! I must say.

    I LOVE your blog wardrobe. It contains a few garments I recognize.

    Happy weekend dear Jenny!

    ReplyDelete
    Replies
    1. I'm laughing Lisa, it looks like a lot of work but in fact, surprisingly enough I was thinking about this post for quite a while. I get comments, from time to time, about my Headers and Backgrounds and thought it might be fun to share the process.

      So, I have actually been putting this post together, in stages, and yesterday it was ready to put out on my blog. (a coming out, if you will, for Miss Blog, her debutante ball - and in a yellow gown no less) *giggles*

      And, my humour was not taking second seat...so, while I did my duty as chaperone it came along as our driver...and we all had fun!

      Have a wonderful weekend too! :)

      Delete
  2. I'm hoping, at some point, to get it together enough to do some custom headers for various holidays and so forth. My blog header is perfect for that sort of thing, I just have to get it together enough to do them!

    Otherwise, I decided to stay identifiable with my stars and to use the stars on all sorts of things ... and there's more to come. :)

    Your blog is always fun to go to and part of it is the work you do on your header & it's "dress" :) Love the dandelion farm, btw!

    ReplyDelete
    Replies
    1. Actually, Em, I adore your avatar and from the first time I visited your blog I have smiled every time I see your Header. It's wonderful to have something identifiable and, in fact, that is something I have done by keeping my avatar the same! (gotta be one little piece that reminds everyone it's still good old me!)

      I'm glad you find my blog "fun to go to" that put the morning smile on my face. My wee dog is up early, therefore I am too. I am now going to sit down with a hot coffee and put the finishing touches on my epic project then head back to bed... :) more shut eye is needed!

      This dandelion farm pic was taken a year ago June, when I was up in the Cariboo and I just cracked up at the reference to "not disturbing the weeds" - yah right! I really wondered if they were up to something! :)

      Delete
  3. This has been a great guide Jenny, so great that I had to bookmark it because I'd love to make my blog all my own one day but I'd be scared that I wouldn't be able to pull it off as wonderfully as you have and always do. I love how the header always matches the background and it's just awesome. It's also great that your blog consists of scenes that can be witnessed in awesome Vancouver. I don't think when I went to Canada I went so far but I'd love to see it one day.

    ReplyDelete
    Replies
    1. Thanks, Matthew - I hope it's helpful. Lord knows I made more than enough mistakes during the learning curve process, so sharing what I learned seemed like a neighbourly thing to do!

      When I started my blog, a couple of years ago now, I wanted to draw some attention to beautiful British Columbia and its many wonderful locales (and the locals too) by way of pictures (and the occasional story) and that's how I got the idea of making these sets.

      When you get back to Canada, for your next visit, I'll be giving you the royal tour, you can count on it! :)

      Delete
  4. Thank you! This is going to come in very handy. I've been wanting to play around with my blog more (when I get a two spare minutes to rub together)-- I'm sure this will help tremendously. :)

    ReplyDelete
    Replies
    1. I did this all with just one spare minute (oh aren't I cheeky - too early to be up and sane at the same time).

      Seriously though, it has been a real learning curve, now it's a routine. Now, when I'm out and about taking pics, I am always thinking about that next great ensemble for Miss Blog to wear.

      Once I got the "measurements" (aka pixel size) figured out the rest was easy - it'll be the same for you - and by the way, I like your layout, I know you've been tweaking it too! I do hope the info here will be helpful. :)

      Delete
  5. great tutorial thank goodness i can keep coming back when i forget

    ReplyDelete
    Replies
    1. Hey there Becca - thanks for taking a read! It's here if you need it! I think I just had to post about it because it's my nature to pass on this sort of info if it makes someone else's blogging life a little easier.

      When I first toyed with creating my own backgrounds it was a nightmare - so now that I'm having fun with making them I thought it only neighbourly to share the goods!

      Have a great weekend! :)

      Delete
  6. Mmmm.... I just love techie wimmen! Especially those with lacy bits. (grin)

    ReplyDelete
    Replies
    1. Coming from Mr. Techie...I'm tickled! I sent you an epic novel to get you through the weekend (hahahaha) lacy bits and all! (cheeky grin attached)

      Delete
  7. Hi Jenny - I've kept this and hope I get to it before Reader removes it .. I really need to up my blog somewhat .. cheers Hilary

    ReplyDelete
    Replies
    1. Hi Hilary, if Reader removes it no worries, it'll be here. Thanks for stopping by and taking a look!

      I hope the rest of your weekend is happy and sunny! :)

      Delete
  8. I do something very similar for my headers, which are all cropped in iPhoto from snaps of my paintings. Like you, I like to change the view every once in a while, and I do find it handy to keep those header images in their own folder.

    Something to bear in mind, if folks are going to try this, is that not all blogger templates allow you to use all the features. For example, my blog is based on a very old template, and I cannot set a background. There is nowhere in "Layout" to edit the background image, and when I go to the template designer and click on "Background", it says this is not applicable for this template. There's probably some way to get around that directly in HTML, but if you know how to do that you're already way past any tutorials like this :)

    Just wanted to alert people and maybe save some frustration. One day, I'll think about starting afresh with a new template, but not yet.

    ReplyDelete
    Replies
    1. Hey there, Botanist, thanks for dropping by and sharing your insights.

      I'm curious as to which template you're using...you've got my email address, if you want to do a little behind the scenes chatting about this I'd be tickled to see if we can figure it out.

      I'm a "fix-it" junkie and this sort of dilemma intrigues me. Cheers, Jenny.

      Delete
  9. i love this post, but you are putting me out of business... i am trying to make magic happen on my sites. here you are sharing all the secrets, i am kidding. i found some helpful things here in this great post.

    i hope all is well, i have been away stuck in the matrix... well that is just not true or is it.

    ReplyDelete
    Replies
    1. Hi Jeremy! You are the King of Headers and spiffing up a blog. I've just covered the bare bones, mostly size issues with cropping pics - I'll leave the rest for you! :)

      It's funny how a simple thing like this bit of info can make a huge difference to the end result in how a blog looks. I must say I've had help along the way so I figured it was time to pay it forward.

      No secrets over here! Well, just the stuff hiding in my closet...scary!

      So, how have you been? And, I love the look of your blog...that green rocks! Very zombie-ish, that's for sure! Good to see you here too! Thanks for stopping in! :)

      Delete
  10. I liked the Alascan one best, it was so calming and idyllic :)
    I'm one of those who put a HTML code for the background in a HTML/Javascript box since that way Blogger cannot mess with it and give me limitations :)

    ReplyDelete
    Replies
    1. I like it too, Dezzie! Now that I have a few outfits I will rotate them according to my moods.

      Since it's been a little grey, in the weather department over here, I thought these pretty yellow dandelions would cheer me up...plus that beautiful, endless Cariboo blue sky...ahh, how I yearn for a visit. Alas, it won't be until next year again.

      Thanks, dear Dezzie, for your inspiring words which got me motivated to create these lovely outfits! :) (of course, you've created a monster as I keep finding photos I like)

      Keep your eyes peeled...I'm going to be wearing a new look next week! Flowers from the garden - a special garden no less. :)

      Delete
  11. I may have changed mine around once or twice.... :)

    ReplyDelete
    Replies
    1. Yes you have...but, just once or twice...*giggles*

      Delete
  12. thanks jenny, i will have to get my daughter to read this--maybe she can doctor up my blog a bit--great info :)

    ReplyDelete
    Replies
    1. You're welcome, Lynn. I hope my instructions are clear enough...trick is to getting the width correct for the background; too small and it is cut off on large monitors, too big and you don't get the full benefit on any monitor, big or small.

      It is definitely a learning curve, but once you have a folder set up and drop your Headers and Backgrounds into it it's a breeze uploading them on to your blog.

      Have fun...and please don't hesitate to ask if you have any questions along the way. :)

      Delete
  13. I love how she is dressed today! It's raining like crazy here in lower Michigan, and the the beautiful greens and yellows are a very welcome sight.

    ReplyDelete
    Replies
    1. That made me smile!

      She has a beautiful floral gown, with matching hat, I may have to help her change, just for you...it's really cheerful and makes me think of summer.

      Thanks for stopping by, Bill. :)

      Delete
  14. Hi Jenny - thanks .. just had a good re-read and noted Botanist's comment - as my blog may well fall in that category .. sometime soon I'll give it a try ... probably need a few photos first! My iphone I suspect is not good enough .. and it's dark days now (sadly) .. cheers Hilary

    ReplyDelete
    Replies
    1. Hilary, I also recommend setting up a second "test" blog where you can play around behind the scenes and not affect your actual blog until you have everything just right. I use a blog for just that purpose, I'm the only one that sees it and it's where I can try different photos for backgrounds and headers and see what they look like.

      As I said to Botanist if I can help in any way please let me know. Hugs, Jenny

      Delete
    2. Thanks Jenny .. I've put it into my book marks ... who knows if I'll remember!! Love what you're doing with dressing up and dressing down - I need a real dress too .. that's more troubling! Cheers Hilary

      Delete
  15. Thank you for sharing your method. You take the most gorgeous photos--no wonder your blog always looks fantastic. :)

    ReplyDelete
  16. Well you do much better than me. I don't know much and when I tried to change something I have 2 things up but I kind of like it so I kept it.

    ReplyDelete

Thanks for sharing your thoughts.