5

I'm a starter practicing front end web design. I'm having hard time finding solution with the Photoshop "Save for Web" function improperly displaying color. The colors of the Save For Web window do not match my Photoshop document.

I've already followed the recommendations of Doug Avery in this link which corrects the monitor view and sRGB thing in PS but the output in the browser doesn't change.

The image I cropped has a white-colored layer as background in the wrapper, another layer for the brown gradient in the upper and lower edge, a brownish layer for wood color, and another layer for its woody texture.

I made the image output in jpg run in my browser but has same incorrect color result. I used Chrome and Firefox and both browsers are displaying the same desaturated color.

Here are my questions:

  1. Is there something wrong with what I've created in Photoshop?
  2. Are there any other tools I can use for more accurate output of elements when migrating from a psd to an html file?

Image

Improve this question
9
  • It's hard to understand your issue; you're saying the saved image isn't translucent at all?
    – Kit Grose
    Commented Dec 10, 2012 at 3:49
  • Simply link to images in your question. Someone with rep will insert them for you. It's difficult to understand the question without images.
    – Scott
    Commented Dec 10, 2012 at 4:03
  • my image has trasparency (Opacity lesser than 100%) letting the background color merge with it. Im saying as I crop the image, with multiple layers, image rendered in "Save for Web" is in Monitor Mode which gives very dull color. The fix of this problem must be the link i put in my question but I applied it already and the result is the still the same. If only I could add some image with these question, I can expressed it well. Can you please kindly add my reputation by liking this post @KitGrose; please.
    – Jed
    Commented Dec 10, 2012 at 4:04
  • Oh, so your issue is with colour, not transparency? Can you confirm that you're not using any layer blending modes other than "Normal"? As @Skaught says, the best solution is to upload your screenshots to Imgur manually and link to them in your question.
    – Kit Grose
    Commented Dec 10, 2012 at 4:07
  • 1
    You should also confirm that your original artwork is in RGB not CMYK.
    – Kit Grose
    Commented Dec 10, 2012 at 4:09

1 Answer 1

Reset to default
3

There have been some rather long comments/discussions here regarding color shifting in Save for Web.

I happen to think at NO TIME should Photoshop's color settings be set to your Monitor RGB. It's simply as wrong as wrong can get. Primarily because you are the only person who will ever see your monitor. So creating artwork in a closed, canned color space is just haphazard. Doug Avery and his link are grossly incorrect in my opinion.

Set the RGB profile to sRGB and tick the "Convert to sRGB" option in Save for Web if you want accurate colors across devices and browsers. This has worked for me for years and years, but I know there are a couple others here which disagree.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.