<   Prior Home                     Follow Blog Bloke       Follow Blog Bloke Tips                                                 Get Updates              
      Next   >
Written on July 4th, 2010 by | 41 Comments

How To Brand Your Blog with a Background Image

Share - enable java in your browser                

How To Brand Your Blog with a Background Image

There’s a lot of talk lately about personal branding and branding your blog, but I never come across this method before. This tutorial will show you how you can make a background image that is light in weight, cool looking and will help you to brand your blog, twitter page etc.

Why a background Image? When I upgraded my desktop computer to a large monitor I was confronted with the problem of wasted screen space. It really bugged me when I had all that empty space beside my blog. There’s only so far you can widen the blog before it looks ridiculous so I started thinking of ways to use all that space.

Of course making backgrounds is nothing new for Twitter users. It’s all the rage right now and you probably already have one. But it’s rare in the blogging world and the principles you learn here can also be transfered to your Twitter page (with some differences .. so read on).

After mulling it over it seemed logical to add a background color or image for my blog and put all that wasted space to my advantage. But how? (I have a few other ideas too but I will leave that for another tutorial).

First off, the problem with just using a solid background colour is it can be stark looking and does nothing for branding your blog. The benefit however is a darker background than the typical white colour can reduce glare on the eyes (especially with modern high definition monitors).

The second option would be to use a background graphic, but the problem with images is they can be fairly huge in size and slow down the loading of your page. (Not a good thing considering Google now calculates page load time in it’s algorithms). After playing around with various shades of background colours nothing was clicking for me so I fired up Photoshop and started making images.

I tried various ideas including downloading freebie backgrounds from the web but still nothing worked. Not only were the background images large in size, but they were also a distraction from my design and did little for my blog brand.

By this this time I was really getting frustrated and ready to pack it in (well almost). But I’m a stubborn kinda Bloke and I rarely give up on a problem no matter how long it befuddles me.

Then I thought of a simple graphic I could make that would be small in size and could brand my blog without overpowering it. The idea was to make a simple background with large fonts as my logo (BLOGBloke).

When I say simple I mean really “simple”. In fact this is so easy to make even a child can do it without much skills.

The trick with a background image (especially on your blog) is you want it to be there but hardly noticeable at the same time. Or in other words it needs to add impact for your blog brand but not compete with your blog design either.

Another way of saying that might be it should be laid-back, subtle or unassuming .. hence the reason why they call it a background. ;-)

BLOGBlokeTips Twitter Background

Twitter is a little different because it doesn’t have a header or as much graphics (besides small avatars) so you can go wilder if you want. Twitter also allows for a fairly hefty-sized background image to upload so graphics weight is less a concern.

In my case I used the same background as my blog for continuity (remember that branding thing) and added my header as sidebars. Take a look at my Twitter page and you will see what I mean.

But your blog already has a header, graphics in your posts etc., so you want it to be more subdued when it comes to a background image. You want your blog to be the center of attention .. NOT the background.

Convinced? Ok, now let’s get to it shall we.

Making an image with only fonts and subtle colours has it’s advantages which I’ll explain in a few moments. In my case I made the font size 400 pixels with a dark background colour and I originally chose to write my logo horizontally like so:

BLOGBloke Background

I overlapped the fonts a little to give it a cool affect and lowered the opacity levels to subdue it so it will not overpower my blog. The first rendering was a jpg file 2132 pixels wide by 590 pixels deep with a weight of 137 kb.

PHEW! That was just way too big to be practical. So back to the drawing board I went.

Like I said earlier there are advantages when there are only a few colours in the image. How you might say? Well for starters I can save it for the web as a PNG-8 file and trim a lot of weight off. That’s how.

I first experimented with a jpg or gif at different resolutions but no matter how hard I tried I could not get the size as small as I would like it. Lowering the quality ended up with a crappy looking graphic and the higher resolutions were just way too bloated.

But the PNG-8 (4 colours) works well because the background image has so few colours to begin with and the resolution still looks great. Cool!

The overall size of the image had been reduced from 137 kb to only 26 kb. WOW!

But it was still bigger than I wanted so I thought why not write the logo vertically and cut the image in half, then repeat the background in my template? That way I could make the graphic even smaller in size, and so the final incarnation looks like how you see it on my blog now.

Here is a screen capture of me saving it as a PNG-8 file in Photoshop:

BLOGBloke background

Note how I changed the color level from 256 to only “4″.

The final background image size is 1002 pixels wide by 586 pixels deep, and the actual weight of it is a paltry 8 kb in size. Not bad eh?

Here is a sample CSS you can use for the background:

body {
background-image:url(’background.png’)  left top;
}

Of course some blogs make background images with the header colours going horizontally across the entire page and/or use a gradient pattern. But that didn’t work well for my design and the overall graphic size ended up heavier than my technique. Neither did it help in the branding department.

Quick Summary:

  1. Choose one colour for your font and then another colour for the background.
  2. Overlap the words a little and in the layers section lower the font opacity level (25% in my case) so that it looks subtle and to your liking.
  3. Save it for the web as a PNG-8 (4 colors) file and that’s it!

Are your creative juices flowing yet? If this tutorial has sparked something in you then my mission is accomplished.

So what are you waiting for? Spruce up your blog and brand it with a cool looking background courtesy of the BLOGBloke. Cheers!

Ps.: This post is not meant to teach you how to use Photoshop, so if you are unfamiliar with some of the terms there are a plethora of great tutorials out there that you can Google. Above all have fun!

Filed under: Blog Tips, Design Tips, Featured Articles, Tutorials twitter

Thanks for Sharing     Share - enable java in your browser            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.


Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends, hang out or join the conversation.

        Subscribe to the Newsfeed   Share to Twitter Share to Facebook   Share to Google Plus   Pin this Share to LinkedIn  


   Got an opinion? Add your thoughts below and be real:

Ok Blokesters it's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say. Just add your comment below and your avatar (like mine on the right) will magically appear from your social profiles. Looking good!BLOGBloke Avatar

There are 41 Comments so far to “How To Brand Your Blog with a Background Image”

Skip to the comments form
  1. WOW, I’m impressed. Not that I can do it even with all your detailed info but it sure does look good!

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 4:11 pm said...

    @teri, thanks sweety and I hope it inspires y’all to make something wonderful.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  2. You the Man Bloke! Like it alot. It just ties it all together.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 4:12 pm said...

    @Curtis, excellent .. then all the work was worth it.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  3. Excellent Bloke. And yes, JPEGs are large and will not render sharply unlike PNGs.
    PNG is the recommended format for website graphics that are not photographs - such as backgrounds, headers, navigation pars etc.

    A better format is SVG - but not all browsers fully support it yet !

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 4:14 pm said...

    @Jaffer, it wasn’t long ago when PNGs weren’t universally supported either. Thanks for your comments. It’s always appreciated.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  4. A great tutorial, in fact so good that I amplified it - http://blogneta.amplify.com/2010/07/04/how-to-brand-your-blog-with-a-background-image/

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 4:15 pm said...

    @Diane Bjorling, thank you sweety. I hope it helps and inspires.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  5. Would this Work using CSS Sprites if you wished to use a jpeg format instead.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 4:43 pm said...

    @roezer, why don’t you try it and let us know?

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: roezer at 5:26 pm said...

    @BLOGBloke, Done a Quick test on the 2010 theme even with CSS Sprites the Jpeg is too large after trying a pingdom test.So we have to stick with the PNG-8 format but a cheap and easy way to brand your blog.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: BLOGBloke at 5:28 pm said...

    @roezer, that’s what I thought. Thanks for checking it out for us and much appreciated.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  6. RT @Roezer Choosing the Best Twitter Background http://roezer.com/LostBlog/choosing-the-… .. IMHO it should be branded similar to your blog http://www.blogbloke.com/brand-blog-back…

    [  Reply   ·   Share Share Blog Bloke Tips  ]

    Reply by: Roezer at 6:01 am said...

    @BLOGBlokeTips that will be a future post with some links

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  7. nice trick

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  8. Very good video tutorial :)

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  9. thanx in advanced.

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  10. Nice post by the way.
    I just created my new twitter background..
    Thanks

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  11. Branding of your blog can helps you in making healthy relationship with your readers. You have to write quality blog posts to improve your blog standard. Also, this will help you in converting your reader into a loyal subscriber :)

    [  Reply   ·   Share Share Blog Bloke Tips  ]

  12. […] How To Brand Your Blog with a Background Image blogbloke.com/brand-blog-background-image/ – view page – cached There’s a lot of talk lately about personal branding and branding your blog, but I haven’t come across this method before. This tutorial will show you how you Tweets about this link […]

  13. NEW POST: How To Brand Your Blog with a Background Image http://bit.ly/bFkB8N

  14. NEW POST: "How To Brand Your Blog with a Background Image" - http://bit.ly/c2eFYP via @BLOGBlokeTips

  15. Off to bed now. Hope you will take a moment to read my latest tutorial and leave a comment. I spent all day writing it http://bit.ly/c2eFYP

  16. WOW, I'm impressed. Not that I can do it even with all your detailed info but it sure does look good! http://bit.ly/bHVIlD

  17. "How To Brand Your Blog with a Background Image" - http://bit.ly/c2eFYP via @BLOGBlokeTips

  18. How To Brand Your Blog with a Background Image http://bit.ly/bRo6Hy

  19. @teri, thanks sweety and I hope it inspires y'all to make something wonderful. http://bit.ly/bHVIlD

  20. @Curtis, excellent .. then all the work was worth it. http://bit.ly/bHVIlD

  21. @Jaffer, it wasn't long ago when PNGs weren't universally supported either. Thanks for your comments. It's always a… http://bit.ly/bHVIlD

  22. @Diane Bjorling, thank you sweety. I hope it helps and inspires. http://bit.ly/bHVIlD

  23. Would this Work using CSS Sprites if you wished to use a jpeg format instead. http://bit.ly/bHVIlD

  24. @roezer, why don’t you try it and let us know? Off the top of my head methinks it might be a little more complicated than the average blogger can handle. http://bit.ly/bHVIlD

  25. @BLOGBloke, Done a Quick test on the 2010 theme even with CSS Sprites the Jpeg is too large after trying a pingdom … http://bit.ly/bHVIlD

  26. @Roezer Choosing the Best Twitter Background http://dlvr.it/2L8y1 .. IMHO should be branded similar to your blog http://bit.ly/bHVIlD

  27. RT @Roezer Choosing the Best Twitter Background http://dlvr.it/2L8y1 .. IMHO it should be branded similar to your blog http://bit.ly/bHVIlD

  28. @roezer, that's what I thought. Thanks for checking it out for us and much appreciated. http://bit.ly/bHVIlD

  29. "Brand Your Blog with a Background Image" - http://bit.ly/c2eFYP via @BLOGBlokeTips

  30. Brand Your Blog with a Background Image http://su.pr/9uczfi

  31. Brand Your Blog with a Background Image - blog tips http://t.co/n7OsSZHQ

  32. How to Brand Yourself with a Personalized Background Image http://t.co/n7OsSZHQ #blogtips

  33. […] the same services you do. However, effective branding can make yours into an overnight success. If you’re looking to strike out on your own, starting up your own business or working from home an […]

Share         Share this with friends

Subscribe to Better Blog Tips Newsfeed   SUBSCRIBE to Bloke Bloke's Articles (Newsfeed)

Subscribe to Better Blog Tips Newsfeed   Subscribe to only Comments for this Article | TrackBack URL

You can also use these html tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>