Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

One problem that frequently stumps me while working on sites is how to transition between two differing background colors elegantly. For instance, the top portion of a site I'm working on has a gray background while the bottom portion has a bluish texture. This creates this: enter image description here

These two colors almost blend together and the boundary between them isn't very prevalent. Is there a way of using borders to ease this transition. Would making the gray darker/lighter help?

share|improve this question
1  
You might get better responses at ux.stackexchange.com –  joshuahedlund May 1 '12 at 19:05
add comment

migrated from webmasters.stackexchange.com May 2 '12 at 3:38

This question came from our site for pro webmasters.

3 Answers

i would do one as the background color and the other as a repeating 1px wide image sliced off a color to transparent gradient. In this case probably I would use gray as the background color on the style sheet, then make a blue to trans linear gradient in Photoshop, copy select a 1px slice of it and set that to tile horizontally.

share|improve this answer
add comment

One technique that I've always found appealing is a true-defined edge. Use a neutral color (Grey works) to make a designed edge with a shadow beneath it. You can make the image from the top like so:

COLOR 1   1111111111111
          1111111111111
EDGE      -------------
SHADOW    ^^^^^^^^^^^^^
          2222222222222
COLOR 2   2222222222222

Making that 5-10 px wide and however tall you need. The bottom of your background image should fade into your color 2, then in your css:

body{
background-image: url(...);
background-repeat: repeat-y;
background-color: color2;
}

That creates a tiling effect all the way across for wider resolutions creating a nice 3-D landscape. I've used this several times with extremely favorable results.

share|improve this answer
add comment

I do think the first step is, as you say, making the gray darker or lighter (which ever you think looks the best). This will create more contrast between the two colours and will stop them from blending so much. An example of this is below, where I've darkened the grey to #333333:

darkened gray

I also recommend adding some highlight to sharpen the edge of the blue area further, which results in these (varying the y of the line of highlight):

highlighted edge

varied higlight

Here's the PSD too so you can experiment with the opacity values on the highlight and shade areas:

http://dl.dropbox.com/u/12931900/example.psd

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.