[Gimp-developer] Webdesign is wrong

[David Marrs]

peter sikking wrote:
> now it is getting late here too. if you can make that description really
> fundamental (like in principle for tens of thousands of web graphic
> designers), and filter your own biases out, then that would be great
> input for us.
> 
> but you better be sure it is fundamental >^}

Well the fundamental principle that every designer should understand is that
your page is not going to look like your concept all of the time (this is where
you often see print designers cocking up). A web page is a fluid thing that
changes shape and it's important to account for this when you're cutting out images.

Unless you are tiling your background image both horizontally and vertically
you're going to have to consider what the background of your element looks like
once the background image exceeds its limit.

For example, you've got a <div id="news"> that stores blog posts. You may have a
vertical gradient as part of the styling of that div. The background image that
makes the gradient is 100px high but the height of the div may be much greater.
Typical styling might look like this:

#news { background: url(../img/news_bg.gif) white top repeat-x }

What's important here is that we've set a default colour to use if the div grows
beyond 100px (which it will because bloggers have egos!). The tiled gif used in 
this case is a linear gradient that fades to white so that the
overflow looks as natural as possible.

The other possible use of a background image is that it isn't tiled at all. In
this case we still need to be able to ensure that, if the element grows, a bleed 
into a background colour keeps the styling as intentional-looking as possible.

I'm not entirely sure how I'd go about designing a website in gimp to deal with 
this problem - I'd probably use separate files. In PS I'd use nested layers and 
masks. Design the image for use in an infinitely large element and then use a 
mask to only show the image dimensions at the elements intended size. In this 
way, the concept can be shown to a client and then, when it comes to extracting 
the image, the layer can be isolated and its mask switched off to reveal the 
full image needed by the style sheet. The styling might look like the following:

# news { background: url(../img/news_bg.jpg) white center no-repeat;
          width: 20em }


I hope that's clear. I think the two things I'm trying to get across the most 
are that:

1) You always need a default background colour;
2) There are some parts of a concept you may want to hide because they deal with 
what happens when an element exceeds its designed limits and not with how the 
site is intended to look.

Sorry it took me a while to get back to you with this.

davidm

--- Scanned by M+ Guardian Messaging Firewall ---