Problems with gradient background

Looks great on my computer, but bad on my client's pc

[LABachlr]

I made a gradient background with Photoshop 7 by simply creating a new file with a blue background color, and then using the gradient tool to give it the gradient effect. The two colors used with the gradient tool were blue and white. The result was the background started out blue, and gradually turned to light blue.

It looks great on my computer, and on one of my client's computer, but his partner says that it looks all distorted on their computer, as well as thier parents' pc.

Here is the way they describe it:

...just imagine taking constuction paper of all different color blues, cut 4 inch strips and then lay them next to each other...that is what the background looks like...do you understand now? if i can see that on two different computers, can you fix that?

I am figuring that this has something to do with my client's computer and their parents' computer. I'm surprised that it does it on two computers. How do I fix it so that it views great on all computers?

I also tried just having the background of the site be one color blue using CSS, but the partner said that they just saw white. What's the deal with that? Can some setups not recognize CSS? I'm using CSS with the gradient background as well.

[le_gber]

Hi LABachlr,

Could it be a screen color depth pb? Say they've got old pc with only 256 colors (hugh!). You could try to check that and tell them that if they do there only is 3% of people with screen color depth with 256 or lower.

And if they really want you to fix it, then do a javascript check on the color depth and display a different bg according to it.

BTW you may want to use web safe colors for the 256 and less colors

Hope this helped.

Leo

[amznVibe]

I keep an older notebook nearby to test all pages I create.

You'd be surprised how off some colors and pattern can look on an LCD screen.

[woody]

As above - It sounds like 256 or even worse 16 Colours.

[pageoneresults]

Is it a .gif or a .jpg?

Gradients do not perform well in .gif format. Depending on the color used and the type of gradient blend, you could even see problems between a setting of high color (16 bit) or true color (32 bit).

If it is currently in .gif format, change it to .jpg and see if the problem still exists. Find out if their color settings are at 16 bit or lower. The next lowest would be 256 colors which would surely cause distortion in a gradient.

[jetboy_70]

I think you've all got the right idea. Strips as wide as 4 inches suggests a 256 colour display.

The only way around this is to introduce noise into the image, which will break up the banding effect. If saving as a gif, this can be done by adding dithering in the save dialogue. I believe a similar effect can also be achieved by adding noise as a filter in Photoshop whichever file format you use.

Whichever way you do it, the resulting image will look worse on your system and the file size will increase as you're making the image more complex. That's the trade-off.

Assuming you are creating the gradient by tiling a thin strip, you may well have to make this strip a lot wider for the dithering to have an effect.

Test it on your own machine my lowering your desktop colour depth to 256 colours under control panel; display (assuming Windows).

[LABachlr]

Of course I forgot to check for email notification on this thread. I'm used to vBulletin boards that have it automatically configured that way.

Thanks for all of your advice. I will definitely check with them and see what settings they are using. Hopefully, that is the case and they will have a vid card and monitor setup that will allow them to change the settings to High Color (16-bit), or better yet, True Color (32-bit). We'll see.

And yes, I created it as a gif. I will try a jpeg and see if that helps.

Thanks.

I'll post the results.

By the way, I changed the vid settings on both my laptop and desktop to 256 to see how it looked, and it just made it look like I was looking at sand. The webpage looked the same, but it just looked very grainy. No four inch strips, though. However, my vid card is most likely better than theirs.

[LABachlr]

Unfortunately, they said that their setting is at True Color 32-bit. I'll try changing it to a jpeg, but I don't think that would cause this problem.

Anyone else have any ideas?

[wkitty42]

what browser(s) are they using? some of them don't display "advanced" graphics correctly... i forget where it was but there was a site mentioned that checked browser compatibility with graphics... i believe it was more oriented toward transparencies and such but this could be playing into the problem depending on how the gradient is performed... i was on that site sometime within the last month and i'm pretty sure that i got the reference from WW...

[martinibuster]

jpegs are best for gradients. Gifs suck for gradients.

[LABachlr]

OK. Thanks. They actually have a cs.com address which is Compuserve. So, maybe that is the problem. Doesn't CS use the same browser as AOL seeing that AOL bought them? Maybe they have an older version of that software. AOL's browser is pretty pitiful anyway. At least the older versions were. Not sure about 8.0 since I don't use AOL. So, that could very well be the problem. Thanks.

I'll have them try IE.

[LABachlr]

jpegs are best for gradients. Gifs suck for gradients.

Already changed it to jpeg, thanks.

[pageoneresults]

They actually have a cs.com address which is Compuserve.

That could be the problem. Yes, Compuserve uses the same image compression that AOL does and it wreaks havoc on gradients. I believe the default is on so the user needs to deactivate the compression to see the true color of imagery.

[LABachlr]

so the user needs to deactivate the compression to see the true color of imagery.

Thanks for the confirmation. Do you happen to know how to do that?

[LABachlr]

what browser(s) are they using? some of them don't display "advanced" graphics correctly...

That's the problem...their CS/AOL browser (nice job AOL!)! Thanks, wkitty!

[amznVibe]

I'd give anything to find a way to defeat that stupid aol image re-compression (only way I know how is to tell AOL users to use an external browser once AOL is connected).

I made a site for an artist with lots of carefully compressed and cropped artwork to balance load times, and then AOL goes and messes it all up. Argh.

Does anyone know if things like the Netzero accelerator do the same nonsense?

[amznVibe]

Just to follow this up for the next person to have a similar problem, it seems you can defeat the aol compression in two ways (that I have found). First is to use PNG files (seems AOL won't touch those) and second is to fake out the gif header to make it think a standard gif is an animated gif (AOL won't touch animated gifs). No solution for jpegs though that I can find, other than instructing the visitor to turn off the compress (good luck with that!).

[LABachlr]

Thanks for the insight.