Web page in Photoshop - no colour consistency

[dazzer21]

I'll try to explain this as best I can;

I have a web page produced in Dreamweaver made up of 6 different jpegs.

Along the top is a row of four jpegs, all next to each other which form a menu. They are are set up as rollovers so the text 'glows' when you roll over them.

Under these is a full width jpeg on which is shown an image and some accompanying copy

Under this is a final full width jpeg which acts as a footer - it has a logo on it.

Each of these images has originally been created as a layered Photoshop file. On each of the six files, the bottom layer is the same solid blue. Dreamweaver is set up to have a page background of exactly the same blue so that background colour fills the whole screen.

The problem is, that when these images are converted to jpegs, the background blue is not consistent. On the rollovers, the blue changes further when it's activated. So in essence, you can see where each jpeg finished and the next one ends.

I've tried doing a straight 'save as', and a 'save for web and devices'; nothing seems to work. At the same time, I'm trying to keep the file sizes down as much as possible, but it's just not working out.

Any ideas?

Many thanks.

 

[Sdashiki]

Can you show us the example online?

Not to dissuade you from finding the solution, but what you are describing is a pretty horrendous way to design a final layout.

using PS is part n parcel, but the ol' rollover image swap HTML stuff went out with table layouts.

More than likely you are better off doing your design using CSS/HTML and maybe some JS if you arent happy with what CSS can do for you.

The color inconsistency may have to do with your browser and PS not using colorspaces properly.

 

[THX1139]

The color inconsistency may have to do with your browser and PS not using colorspaces properly.

He probably has color management turned on, and when he loads the images into the browser the colors are different. The solution would be to turn color management off in Photoshop.

Another issue might be that he is using blending modes for his rollovers that get lost when the image is flattened.

 

[elppa]

It's colour, so it's complicated and could be due to any one of a number of issues.

Here's something to try.
[1] Open “Save for Web and Devices”.
[2] Click on the triangle above the settings pane. Choose “convert to sRGB”
[3] Click on the triangle above the preview pane. Choose “Use Document Colour Profile”.


The second step is to preview the colour accurately.

 

[dazzer21]

I'm not a web developer by trade so I can't begin to comment on the methods being used; I took the decision to do it this way (with my limited knowledge!) as it seemed the simplest option, as I would have otherwise used Flash - which I didn't do for obvious reasons...

If I'd have created the page as a single image (say at 900x800px), with an all over blue background and a full colour image (for argument's sake, let's say a it's of a car) sitting in the middle third of it, the background colour would be consistent across the whole page;
if I split the image into thirds (300px across apiece), so that the outer two images are plain blue, with the middle image containing the car on the same colour background, that blue is a different hue in the middle panel compared to the two outers.

Is this because of some sort of optimisation process, where the number of colours on that image is being cut back somehow? I'm using 'Save for web and devices' and I've tried 'convert to sRGB' and 'Use Document Color Profile' but it doesn't seem to make a difference. all the relevant RGB/CMYK/LAB/Hex colours are all consistent... this is driving me nuts.

I'd post the page in question, but it's sensitive material so I can't...

 

[Hermes Monster]

Have you tried something as simple as using GIFs or PNG files? I don't like JPGs for the web for reasons like this. As said above though, you need to get rid of the images and pick up some CSS skills (even if it's just some basics, to fill the large colour areas) Dreamweaver will do all the hardwork for you, this will also have a positive impact on the performance of your site.

 

[usclaneyj]

Try saving them as .gif instead of .jpeg, and do like others have said regarding your color management options.

Also, if you are talking about the way that the page previews in Dreamweaver "Design View", I can attest that DW doesn't render color the same way that most browsers will. So it's the in-browser preview that matters most.