Preserved Topic: jpg image

Hello All!

Long time user of Ozone tutorials, first time on Forum. I have visited a few other BBs and everyone *here* seems really cool :-) My question involves Doc's "glass" tutorial, and the problem I am getting is when I save my image as a jpg. I followed his instructions, but when I view the completed image in NS/ IE, the gray bg of the image is a darker gray #666666 compared to the browser. Why is this? My solution was to crop a small section of the jpg and tile that as my page bg. This is working so far in NS/IE but still not in AOL- which doesn't surprise me. I am convinced there is no solution to predict the way AOL compresses images!

So regarding NS/IE, is there a reason why the image and browser colors wouldn't match and how can I avoid it in the future?

Thanks,
CRO8

AOL? err, why would it matter if it works in AOL? blah, more bloatware...

Anyways, welcome to the Asylum!
Sorry, I can't help with your problem =[

- Dan -

Thanks for welcoming me...

Regarding your respponse, does that mean nobody cares how images look in AOL? Based upon other responses I have recieved-this is the case. Anyway, this was the minor point, I was really hoping to get to the bottom of why the jpg's gray bg was a different color compared to NS/IE.

Help?!?

Thanks,
CRO8

that's just the way it is, you have to deal with it, <img border=0 align=absmiddle src="http://www.ozones.com/forum/frown.gif">
and IMO, aol can go f**k itself, this is probably a bad opinion though, because aol has a crap load of users

Ok, terrific.



Thanks,
CRO8

Save AOL bashing for the "All Browsers Scuk forum okay? - the guy asks a legitimate Photoshop question. So tell us more. Is your page background defined in HTML as a Hex number, or is it a tiled graphic? How did you define the background of the glass button: Photoshop 5.5 with the web-smart color picker, or some older version, going by eye? How close to the glass button did you crop - close enough that JPG artifacts could come into play? Are you developing on Mc or PC? If the images appear to match in PS but not the browser, could be your RGB color set-up, and the "display using monitor compensation" function. Give us some more details or, even better, a link to the images, okay?.

Now were talkn'. Yes my page bg is defined as #999999, exactly the same as the image bg. I am using a PC with Photoshop 5.5. Like I alluded to in my opening message, I solved the IE/NS problem by cropping a piece of the image's bg and tiling it on the page, but I shouldn't have to do this, right?
www.hotfrogdesign.com

Let me know wht else you need to know.
thanks

What would help more would be a link to the page that has the problem graphic. The hotfrog (!! love it - I always thought frogs were cold until cooked!!) link doesn't have any glass buttons or #999999 backgrounds unless I missed something.

I would think it may be linked to the way that the .jpg get compressed. I never liked .jpg's for that reason.

Try using the same image but saving it as a gif. That might give you a little more of an insite into the problem. If it is the same on the .gif as it is on the .jpg then it is the browser opperation and not the picture file.


www.warmage.org

oh, yeah- the link. www.hotfrogdesign.com/experiment1.htm
Sorry 'bout that! And I've actually never tried frog- rabbit, but not frog.

I was thinking the same thing- not saving the image as a jpg, but as a gif- it looks much more realistic as a jpg.

GIFs just aren't great for some things, and this is one of 'em. When I looked at the page, I didn't find an objectionable tone mis-match. In fact, the only place I found a mismatch at all was the curved space between the triangles and the oval. Is that what you are seeing? The rest of the outer area seemed to blend fine, for me anyway. We'll have to look at the images with the Info palette in PS, but is it possible there was some sort of outer glow or drop shadow or something there when you made it, so that that intersection area wound up not being the "#999999"?

The graphics are pretty by the way.

That's what it is. If you open the triangle image in PS and magnify it to 300%, then run the eyedropper around and watch the Info palette, you'll see it's a perfect solid 999999 outside the straight edges (except for some minor JPEG artifacting right around the edges), but that slight arc on the 3rd side is a different color. Since I don't know how you made the graphics (were they all one document that you then cut apart? or did you make them individually?) I don't quite know how to advise you, but I suspect it has something to do with fringing from antialiasing, and since you trimmed the graphic so close to the edge that comes into play. But I *don't* think is has anything to do with Photoshop shifting colors on you, or from any shortcomings of JPEG compression. You may just have to space the triangles further away from the oval so you can trim a slightly greater distance from the antialiasing fringe. It'll blend into the 999999 gray less noticably.

Any help?

Thanks Steve and WarMage! I have found that there is a small diference between saving the image as gif or jpg. I think I will go with the suggestion to increase both triangle canvases, giving the anti-aliasing some room. As for my page bg, I am sticking with a cropped portion of the images bg and saving as jpg. Doc did a similar thing with the page www.ozones.com/spheredex.html. His images and bg are both jpgs.

Hey-thanks for both your time and effort. Much appreciated!

Did you say your background color is #999999?

As a rule, I avoid using colors like that. I stick to colors using hex values 0, 4, 8, C and F, because those are divisible by 4 (except F, but you need F for full color values) and are more likely to not be adjusted by a browser with a limited number of colors.

But if you really want that color value as your background, you might try making a 1x1 gif of that single color and define it as your background... that way you're more likely to have the colors match when you put the other image over it.

I'm not all knowing about this.. this is just what I do to keep things matching.

CRO8: I've noticed that some of my designs have actually had similar problems on different systems with different browsers. Images, although confirmed to be the same RGB value as the background color of the page, will not match it for some reason. I remember a time when one of my designs was doing that, but only on my father's computer. I solved the problem by either making the image bg transparent or creating a background image of the correct color, I can't remember which. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Human Shield: I've never heard that rule of color before. The browser-safe pallette consists of colors with RGB value combinations of 0, 51, 102, 153, 204 and 255 (i.e. divisible by 51), which in hex translates to 00, 33, 66, 99, CC and FF. I've never heard of them having to be divisible by 4.

Well I never said it was a browser rule... I just said it was my rule. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif"> I stick to values of 0, 64, 128, 192, and 255, which are 00, 40, 80, C0 and FF respectively. I suppose if I wanted to stay accurate to the whole thing, I should use 63, 127 and 191, which are HEX 3F, 7F, and BF.... but the others are easier to remember. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

OK, let me step in here for a sec...when you guys mention values, what are you refering to. Is it the sum of hex numbers? R+G+B=value?

This is all very helpful!

thnx

Hex numbers (nothing to do with voodoo, though some days it feels like it)

Based on 12, not 10. Go figger. Guess at some point someone wanted to keep values to two digits. Max brightness value in 24 bit color is 255. To keep it to 2 digits, they came up with using Hex values. 255=FF.

Browser safe colors - a set of 216 colors common to both macintosh and Windows system colors. Think lowest common denominator. If someone is browsing with a computer whose video card can only render 256 colors (not thousands or millions), and if you use a non-browser safe color, that color will dither as the browser attempts to render the color on a system that can't display it, and the result is commonly refered to in the industry as - pooh.

Wes has it right as I understand it. Combinations involving 0, 3,6, 9, C and F are safe. Written in 2 digit pairs, in order of Red, Green Blue. Black is 000000; white is FFFFFF; pure blue is 0000FF; pure red FF0000. And so on. Something like teal might be 33CC66. ??

But if Wes is more correct, Human Shield certainly has lots of design experience, and sometimes the voice of practical experience counts for a lot.

I really don't know how much of an issue the Web Safe Color thing still is. It used the be the inviolate rule of thumb a couple years ago, but powerful video cards are so common and so cheap now I don't know if anybody is still restricted to 256 colors or not. Personally, I've been designing with colors outside the Safe range, 'cause the sites I design are targeted to people I have to assume are browsing in at least thousands of colors. A totally general purpose site probably still ought to consider the least common denominator though. It's amazing how limiting 216 colors can be, but a lot of great, innovative work has been done inside those limitations!

BTW, this really only applies to solid color blocks like page backgrounds, HTML type, GIF banners and headlines and banner ads and so forth. JPEG continuous tone images don't need to fit this mold because they are less likely to be hammered by dithering.

gotcha, Steve.

thnx

Human Shield,

I think my point was that you said that your color choices were less likely to be adjusted by a browser with a limited number of colors (i.e. one running on a system with a low color pallette). I don't understand your basis for this, however. If you use a color that is not common to both platforms--a "browser-safe" color--it would be adjusted on at least one of them.

Advising one not use a color like #999999 because it doesn't fit into your personal color scheme doesn't make sense when the issue is pallette-related color shifting.

(That sounded attacking--it wasn't meant to.)

And Steve is correct--this really only applies to solid blocks of color. Dithering within a more complicated image, although still not pleasing, doesn't look as bad as dithering in solid areas of color, block-letter text, etc.

P.S. I hope you weren't implying that I don't have plenty of my own design experience. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">

Yipes!!

Not at *all*!!!

Just saying there's a place for both "correctness" and "what has been found to work".

Really sorry of I implied otherwise.