How to Create a Blog Header Background

How to Create a Blog Header Background

Website users are becoming more and more demanding, and it’s not just content that they judge a site on these days. If the site doesn’t wow them from the moment that it loads, then they will hit the back button instantly. A good header background for your blog is an essential design element if you want to impress your visitors.

A blog header background should be digitally optimized, look good in landscape, for viewing on a desktop, as well as in a more compressed form for viewing on a mobile phone, example:

Example of Blog header

If the blog header doesn’t scale well or clearly looks wrong in certain aspect ratios (like the image below), then this will put people off and make them question the quality of your site.

There are many tools that you can use to make a blog header – you can download free tools such as the GiMP, which is an open source version of Photoshop, and you can even make backgrounds using free online image manipulation tools as well. All you need to make a decent header is a good stock photograph, and an eye for how to manipulate text – see the difference that the font choice, size, and color, makes with the images below:

If you’re not confident in making your backgrounds, then why not get in touch with us? We can work with you to create a bespoke background that will match your brand regarding color, style, imagery and logo.

If you don’t want a ‘busy’ photographic header, then think about using something with text, vector art, blocks of color and whitespace. In many ways, vector images can be better than ones that rely on photography, because the file sizes are smaller, and vector images resize more readily. Also, they are easier to print so that they can be used on business cards and flyers, without worry.

Make sure that you select appropriate transparency settings when you are designing your header image. If you plan to have a white background for your block, then white is OK for the background of the image. If you plan to have a colored background, think about whether it may change. Having a transparent header is a small thing, but it could make your life a lot easier in the long term because it will give you the flexibility to change things as and when you need to. It’s better to just have transparency, and then change the fill on the lines of the logo, than have to try to fill things in separately, as you can see below:

Save your image in the least lossy format that you can. Keep a vector version for editing, because if you have a JPG file, edit it, then save it as a JPG again, you can end up with serious artifact issues, which can make the image ugly and unusable, especially on Retina screens where every little detail will show up.

You don’t have to be an amazing graphic designer to make a good header image. You can come up with good designs if you work from a template – or even browse our selection of header graphics and copy those for your ideas.

Note that the example headers that we have provided are for standard multi-column websites. If you are considering using a parallax or endless scrolling theme for your blog, then you will need to take that into consideration when doing your graphic work, and that’s going to require a vastly different approach to graphic design, with higher quality photography.