Solved

Web Graphics look fine on Macs terrible on Windows

Posted on 2004-04-27
11
155 Views
Last Modified: 2010-04-03
I have a web image I created in PS with its original resolution being 200dpi.  When I Save For Web as a JPG or GIF I get this color distortion ring around the outside of it.  At first I thought it was the drop shadow but removing it did nothing. The thing is only Windows machines show this.  Everything is fine on Macs (what I'm using).  Though GIF's do show less of this it still bothers me.  I think I had this problem once years ago (and never since) but don't remember what's happening.  Can anyone shine some light?  Here is where you can view the graphic.

http://www.arocketsenttoyou.com/new/

Thanks  \m/
0
Comment
Question by:fatfe
  • 4
  • 2
  • 2
  • +1
11 Comments
 

Author Comment

by:fatfe
ID: 10935036
Well here is a screenshot of what it looks like..

http://www.arocketsenttoyou.com/new/screenshot.jpg

My question is could it be the color depth being 16 instead of 32 that's doing this?  If so, how can I check in PS to make sure this doesn't happen?
0
 

Author Comment

by:fatfe
ID: 10935157
Okay,  so I bumped the monitor bit depth up to 32 bits and it looks fine.  So now my question is how in PS do you check your graphics look good under 16 bits?
0
 

Author Comment

by:fatfe
ID: 10935164
edit:  So now my question is how in PS do you check your graphics to ensure they look good under 16 bits?

(would be nice if you could edit your posts)
0
 
LVL 30

Accepted Solution

by:
weed earned 63 total points
ID: 10935641
I don't bother. There's really nothing you can do to "fix" it for 16bit monitors other than use awful dithering, or fewer colors and then youre crippling it for people with 32 bits.
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Expert Comment

by:anantabl
ID: 10936726
Better,first decide the useofgraphics and choose the appropriate mode (32/16/8 bit).

If you design on a specific mode and applied on different modes, it is distorted because of the color range variation. Do not (probably NEVER) use jpg format if you guess it would be seen on different color depths because jpg is the highly compressed data matrix that is specific to the originated color depth. Solution: use gif format.

To have better view for 16 bits be aware of the dithering as 'weed' says.

Another efficient way to reduce distortion on web graphics is to design them on high resolutions and producing them later on required resolution and size.

anShu, 28 Apr
0
 

Author Comment

by:fatfe
ID: 10943800
Thanks for the comments guys.  I created the image in 8bit-RGB.  It just doesn't sit well that the background color of the html page (#575A4A) which is sampled from the image looks fine yet the image border is quite obviously off.  I'll stay away definitely from the dither and use the gif format for this.

Is there a way in PS to toggle between different simulated bit depths to see what the effects will be?
0
 

Expert Comment

by:anantabl
ID: 10945849
ALWAYS USE WEB SAFE COLORS WHILE WORKING FOR WEB COMPONENTS.
0
 
LVL 30

Expert Comment

by:weed
ID: 10945904
Geez no. Web safe colors are a COMPLETE misnomer. They are NOT "safe". You can completely ignore the web safe color palettes because theyre all interpreted differently depending on which browser youre using. Even lynda of lynda.com doesnt prescribe using web safe colors and she's the premier web design guru of the western world.
0
 
LVL 3

Assisted Solution

by:huafi
huafi earned 62 total points
ID: 10948192
Hey, is that the Sackler Museum's main staircase? I used to sit there and draw -- the basic forms are so cool, and the light does amazing things in there over the course of the day.

Try this: save the foreground image as a JPG. Create it from the original PSD file, not by re-saving the GIF you already have.
Then, *in addition to* specifying the background color in HTML, create a tiling JPG background image. This image should be an even multiple of 8x8 (e.g., 32x32), created in RGB, filled with the same solid background as the background color of the original PSD, and saved at a high quality setting.

The issue you're seeing arises because, at 16-bit or lower color depths, the operating system doesn't have enough unique colors available to specifically represent every possible color that a given application wants to draw to the screen. When this happens, the OS displays what it thinks is a best match instead. Macs have always done a better job at this best-guessing, dithering intelligently to get close to the original color. This dithering is noticeable at 8-bit color (256 colors), but almost imperceptible at 16-bit color (thousands of colors). Windows has always been much worse at this, usually forcing the desired color to the mathematically nearest available color -- which often is visually quite different. To make things worse, the colors available at a given bit depth are different from OS to OS. To make things even worse, color representation models may differ from application to application, and certainly differ from monitor to monitor. Worst of all (for your purposes), color interpretation models differ depending on how the desired color is specified.

The technique I describe above usually works for me because, rather than trying to create your image in a way that looks the same on every user's screen (which is impossible), you try to create the foreground and background in a way such that any given user's computer will be likely to represent the colors in the same way. So if one user's computer screws up that exact shade by XYZ, it'll be screwing up both the foreground and background by XYZ, and they'll still match. Understand?

The key is to not only match the colors in the original Photoshop documents, but to specify the foreground and background colors in the same way. In your earlier case, the foreground color was being specified by pixel-level color values in the GIF image, while the background color was being specified by an HTML hex value. A given user's computer will interpret and represent those using different color models. At 24- or 32-bit color depth, there are enough colors available that the two representations will end up indistinguishably close; at lower color depths, as you saw, the computer may end up nudging the background color one direction and the foreground color in another. If you specify both the background and foreground colors with the same color *and* the same method (pixel-level color values in a JPG image), the computer should interpret and represent the same color using the same color model, and the two images should match seamlessly on anyone's computer -- even at very low color depths.

The reason I suggest JPG rather than GIF is that on Macs, the JPGs will dither more gracefully for users running low color depths on their monitors.

Hope this helps --

Huafi
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
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…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now