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.
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:
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:
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:
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.
- Choose one colour for your font and then another colour for the background.
- 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.
- 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!