Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Colors changing after save for web

Posted on 2006-04-10
16
Medium Priority
?
672 Views
Last Modified: 2010-04-02
I ran into this same problem a couple years ago though can't remember the solution =(

Here's the symptoms:

Working with a file from a different machine; the author says he created it with "default RGB" color profile.

I open in PS 7 on Mac, things look fine. I slice it up and save; the resulting images are a mix of gif and jpeg. The images look sort of OK, though when I plug the hex code into the web style sheet, it's *a lot* darker than the image in photoshop.

I've messed with color profiles a bit, switching between sRGB IEC61966-2.1, Generic RGB Profile, sRGB Profile, and No Color Management. None of them fixes the issue. Likewise converting the image file across color profiles doesn't solve it. Switching profiles around on the app and document can get the gif and jpeg output closer, though still noticibly quite different.

I also recall that the last time this happened, there was a specific order to the steps that finally fixed the problem, and I found this solution only after searching around on boards for a couple of days. Hoping that someone here can help me out...

Let me know if there's

Thanks,

-kevin
0
Comment
Question by:rocktownme
  • 7
  • 6
  • 3
16 Comments
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16419930
When you save for web..

..as a ".gif"...max your color output with 256 colors


..as a ".jpg"...  uncheck OPTIMIZE and choose 100%

Doing either one of the above will expose the maximum colors.  When you choose anything other than that, you will loose information (colors, resolution, bit information)
0
 

Author Comment

by:rocktownme
ID: 16419972
Yup, gif settings are: Adaptive, no dither, 256 colors. Jpeg are never optimized, though I do bring the percentage down to reduce filesize. While this can result in compression artifacts, it shouldn't radically change the color gamut...
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16420022
"While this can result in compression artifacts, it shouldn't radically change the color gamut.."

But it does.  if you keep all references the same across the board, then your images will all look alike when you work on different systems & platforms.

when you say that you open up on a MAC, does that mean you have a PC too?  if so,  compare the preferences, and make the profiles the same. if this is not the case, post otherwise.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rocktownme
ID: 16420097
Interesting. Here's the thing though, I haven't changed my save for web preferences at all; I've been doing photoshop->web production for 7 years now and this is only the second time that my compressed images haven't matched the master file within reason.

Do you know how I would go about resetting all defaults in the Mac version?

I do have a windows machine, though don't have Photoshop running on it...
0
 

Author Comment

by:rocktownme
ID: 16420180
Here's another (I hope pertinent) detail: when I select a hex color using the color picker in PS and apply that to the web stylesheet, the color is way off; a lot darker. If I change color profile settings the color difference narrows, though the difference is still pretty wide.

If I take a screen shot of a gif that has compressed properly and load it into photoshop, the color tool gives a much different color. For example:

#DBE5EA is the color in the document
#F1F5F6 is the color on the image

If I change the stylesheet to the second color, the web version now looks a lot closer to the master file.

I realize this convolutes a bit as I initially was asking about color profiles for image compression, though the 2 are related, I think...
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16420229
Not sure on the MAC.. but a fresh re-install works on a PC.
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16420301
Hmm...ideally you should work from a point of reference, since you have many changes, the best way to adjust the settings is go back to the beginning and work from default. I have several workstations that produce the same image all the time that I wish..mainly due to me leaving things at default. Rarely do I have to go in and make an adjustment.  I'm sure that you are tweaking to perfect your image.

Is re-installing feasible for you?
0
 

Author Comment

by:rocktownme
ID: 16420521
Yes, though of course I'd rather avoid it as it's a somewhat drastic response =)

I did find and delete the color settings preference file, which reset the color settings pane back to defaults when I next started photoshop. Still no dice though; the colors are all whacked.

I just confirmed with the designer that in fact the file was authored in PS 7, which is what happened last time; a file was created in PS 7, then opened in CS (v. 8) and all the color settings got hosed...
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16420601
You got someone else that can open up the file for you with CS8?  Never seen this happen....so if another person can open CS8 and get the same results, then it is your system, else if the image appears OK, then it is the original CS system.
0
 
LVL 38

Expert Comment

by:lherrou
ID: 16421248
First of all, double-check it's not in CYMK format, no matter what the originator says... I've found that's the most common reason for this problem.

You may also need to turn OFF color management in the Color Settings preferences. It may be using color profiles that are changing how the images look in PS, though when exported as a GIF shouldn't be any different because GIFs dont store color profiles.

You can also check your monitor color calibration, take a look at a couple of products, Monitor Calibration Wizard (http://www.hex2bit.com) and QuickGamma (http://www.quickgamma.de/indexen.html).
0
 
LVL 38

Accepted Solution

by:
lherrou earned 2000 total points
ID: 16421280
Oh, and check your layers too. When you are pasting in, if you have a layer blending mode set to something besides normal, or a opacity less than 100%, that would chenge the eye dropper results. Sometimes you have to flatten before you save for web.

And, don't forget to check your own, and the originator's color settings - I've seen this happen when someone has 16bit color set... sometimes they don't even realize it.
0
 

Author Comment

by:rocktownme
ID: 16421286
Yup, had already double checked that it's in fact RGB.

Also tried with color management totally off and no luck.

Unfortunately, both apps suggested are windows only, and MCW looks to be an a between-release state without a easily-found download link...
0
 

Author Comment

by:rocktownme
ID: 16421311
OK, I'm gonna go crawl back under my database application programmer's rock. I didn't even think to check layer opacity =(

Sorry for the long and wild goose chase; thanks for all the suggestions!!!
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16421372
dang-nab-it...!..  I just had one of dem goos' in ma' sights

:-(

I'll help you toss some dirt on the rock :-) Ha!

no worries...I've been there and done that brain fart thing too.
0
 
LVL 38

Expert Comment

by:lherrou
ID: 16421786
Hey, just glad I could help :)

                __
             <(o )___
              ( ._> /
               `---'

OK, so it's not very wild, but...
0
 
LVL 30

Expert Comment

by:Irwin Santos
ID: 16421789
Ok..lherrou..you got me.. I was laughing

:-)
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to correct colors in Photoshop using the Hue and Saturation adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Hue and Saturat…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question