Design the IP1 Website Background…

Posted by Tom on 30 June 2009 | 1 Comments

We encourage illustrators and designers to have a go at creating backgrounds for the the IP1 site.  However, designing for web is a bit different than designing something on paper, and I’ve struggled to communicate these constraints to people who are not familiar with web design.  So I’ve created this tutorial to try and make things a bit clearer.

The first concept to understand is that a web browser window doesn’t have a fixed size like a piece of paper does.  The browser window can be resized by the user and monitors have different resolutions (the amount of stuff they can show on screen at once), so something that looks good on a smaller monitor might look very bare on a large monitor, and something that looks great on a large monitor might be cropped and not seen on a smaller one!  The illustration below shows how the webpage background looks different on two computers.

Most Common Mistake: Background is visibly cropped on larger monitors

If you have a background image that is 1600px wide, but view it on a large monitor (a large iMac has a screen that is 1920 pixels wide) you will see the background gets cut off on the sides.

Example #1: Single image with no visible edge

The easiest way to stop this is to make the the edge of the background image the same colour as rest of the websites background.  In the example below there is no obvious point where the image appears to abruptly stop.

Example #2: Double images, background image over a repeating tile

It’s also possible to have your background image sit on top of a repeating pattern.

Example #3: Double images, horizontally repeated tile

In this example we have a pattern that is only repeated horizontally across the background, this is often good if you want to have a gradient along the top of the site.

The Brief:

The maximum background image size is 1600x600 pixels (72dpi), any larger than this and the file sizes start getting quite big.

You can create your own version of the IP1 logo, but we ask that it is designed to be recognisably the IP1 logo/font.

It is best practice to design your backgrounds using separate layers for each element (these should be clearly named), and hopefully everything is setup so it can be tweaked/moved/edited if needed.

But the most important step is to use this Photoshop template.  This shows how your background will look at different resolutions.  If it looks good in this template, it will look correct on the site.

Please send your backgrounds as jpegs to .(JavaScript must be enabled to view this email address)

Acknowledgements:

This guide was heavily based on an article by Nick La at WebDesignerWall.  I suggest you read his article for some extra clarification.