Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
Dunno if it's my monitor calibration (don't *think* so... work and home monitors are calibrated differently, and it happens the same way on both) or just some unavoidable weirdness, but when I save a GIF file out of PS 5.5, the colors shift. Blue comes out looking more purple than it did in the composition window... I've learned to compensate, but I'd love to know why it happens.
I am no graphics expert by any means, but on saving to gif are you using "save as" or exporting? When I export in 5.0, I have a drop down option for the color palette with "exact, adaptive, or system" as options. I use exact and don't recall ever having any shift in hue.
When you are saving your gif, I think it may be using adaptive/system colors rather than exact.
When I was still using 5.0, I spent a lot of time switching into indexed color and back to RGB, tweaking all the colors a bit here and there, and getting really picky about my palette size, to get the smallest possible exact color palette. Then I'd open it in Debabelizer and tweak it some more. Upgrading to 5.5 pretty much knocked Debabelizer out of my "must have" programs list.
I think it's definitely something in the translation from RGB to indexed color that happens when you go to the 'save for web' interface.
I've pretty much stopped worrying about using web-safe colors in images, since 8 bit color is fading away, with the majority today running 16 bit, and a sizable number running 24-bit. This brings up a whole 'nother can of worms, however.
When you shift the colors back to less purple, are you working in the Color Table mode or using Hue/Saturation? In color table you can shift just one color rather than the whole palette. But in either case, you are then no longer using the web-safe palette.
the problem with saving in "Exact" mode is that the file size of the gif is often too big. The other modes are effective for crunching down the file -- and 5.5 or 6.0 offer even more choices that let you stay either closest to your original colors, or forced to web-safe, or most natural to the eye.
You can also work directly in Color Table mode to selectively eliminate "close" colors and reduce the palette even further. Image Ready (bundled with 5.5 and up) has automated a lot of this kind of work, but sometimes I still like to go under the hood.
5.5 and 6.0 also offer a much more intuitive way to work with transparency.
:) I know... However, when you open the color wheel/palette (clicking on foreground or background color box in toolbar), in the lower left-hand corner is a checkbox to "show only web colors" (or something like that). I do all my work supposedly "showing only web colors" in my color wheel. I'm guessing the "show web colors" option doesn't *truly* shift the color wheel to web safe colors, but rather a strange approximation of them... hence the color shift.
Thanks for the color table mode tip. Smart Saver won't let you pick your own without setting up a specific palette file, too time consuming.
I took a look and noticed RGB images have to be switched to indexed color before being able to go to color table mode. With this and the transparency deal, why is that? (I think I lack a fundamental understanding of RGB mode images.)
Sounds like I need to upgrade to 6.0 as soon as the budget allows.
There's so many ways to introduce "extra" colors when you are working in RGB, that it's not funny at all. I've spent many hours of frustration in this territory. And just when I get a handle, PhotoShop upgrades and the rules change again.
Isn't amazing how a natural, right brain thing like color can get so deep into geek-land? There's another thread [webmasterworld.com] here with an article about the fact that there are only 22 truly web-safe colors. That just blew me out of the water.
(tan... argh. Never use anything approximating tan in a website! Trying to find something in between pink & yellow is enough to drive you mad, and it will never look the same on ANY other machine!)
At this point, I try to develop images/layouts in ways that will allow me to 'cheat' on the indexed color and save in perceptual mode. Set up the page design in advance so nothing needs to have seamlessly matching color (or make sure the matching colors are 'safe', and the accenting colors aren't crucially precise)
One trick I've used in a pinch is creating a one color gif and tiling it for the background, instead of depending on BGCOLOR to match up. This technique still fails in some cases (mostly older browsers like NN3.x) so transparency is by far the better route, but when time constraints are there, this trick can be a stop-gap.
One big nightmare I'm still wrestling with is an art department who did a beautiful site, but only viewed it in 32 bit color while it was under development. When I got the job and viewed in 16 bit, every GIF had a "box" around it, and there was ugly, ugly banding all over the place. It's still far from fixed, and may never be.
I'm *so* glad I'm a "one man" show... I check it on my monitor, the NT monitor next to me, IE/NN on both plaforms... I don't have to worry about other people sending me stuff I have to fix.
...and I never do matching color buttons anymore. That goof happened on a personal site, before I went "pro."
RGB to APPLE RGB (if on Mac :) )
Deselect Monitor compensation
General prefs: Colour picker to Photoshop
Where possible use adaptive colour palette when converting to gif with diffusion - the flatter the colour the more it compresses.
I'm not sure what you mean... generally, a web site shouldn't need to be scrolled from side to side, but I've never seen it cause any kind of background distortion.
Could you give an example of the distortion you're talking about?
If you're referring to background patterns that don't repeat properly, someone (forget who) puts out a PhotoShop plugin called Tesselation that helps warp the edges of a square image so they match up seamlessly...
Good background patterns can be a huge challenge to design without obnoxious repeating patterns or visible tiling seams.
You've got your table width set at 900 pixels, and the two table cells set at 100 and 750:
<table width="900" cellspacing="0" cellpadding="0">
You might want to make the first table width 100% instead, and then fix the width of the left TD to 150 or whatever it needs, leaving the other one variable. Some people use a transparent gif to deal with the left background border.
I'm not very graphically enabled, but this is one of the basics I had to dig into, which gave me a bit of trouble at first. I also learned on backgrounds like this one (which I've always liked) to make the width at least 1200 pixels wide (or more) to accommodate higher resolutions and avoid scrolling.
Like Marcia said, if you keep your backgrounds at 1200 pixels wide, it should prevent repeating on larger monitors. And if you keep your tables at either a percentage, or 750 pixels wide or less, most people won't have any problems with the pages. (I personally try to keep my tables at around 700p wide.)
Last I heard, 800x600 (or thereabouts) is the most common monitor resolution these days, so that's the average size I ususally design for when making backgrounds.
The nature of my business requires me to do a lot of work with photo images... so we are talking jpgs.
From time to time I see photo images with text over the top which is nice and sharp and the finished graphic presents very well.
When I try it the text edges bleed all over the place and I get a result bearing a strong resemblance to half dissolved jelly crystals.
I'm told the problem is caused by the behaviour of the jpg format and the way it smooths/blends adjacent pixels or some such technicality. (You can see I am really at the leading edge with all this graphic stuff)
So... in simple english, free from acronyms, abbreviations and buzz words, how can I get photo jpgs and text to co-exist on the same graphic?
What are the necessary software tools and, very briefly, what does the technique involve?
TIA.. this has bugged me for years!
Another way to get this result, which looks really sharp is to use the z-index, and put a gif text image with a transparent background on TOP of the optimized, photo-only JPG.
Very old browsers won't be compatible with this second method, but if you can make that sacrifice, I think the best results come from overlaying JPG and GIF.
maccas, I don't think it's actually shifting if it's coded as bg=filename.jpg in the body tag.
Try fixing the left table width a bit wider to avoid the overlapping. This can be controlled with the HTML, I believe.
Try this and see if it works for you:
<table width="100%" cellspacing="0" cellpadding="0">
You can then tweak the 150 pixel width to whatever you need, more or less, a bit at a time, until it's right.
Adobe came out with the upgrade one month after I got 5.0 and I would not upgrade. Maybe when they do 7.0, if it includes a browse feature that shows the images before opening (like PSP does).
In my PS 5.5 open dialogue, there's a box to check whether or not you want it to show thumbnails of the highlighted images (before opening). In the case of images without a thumbnail, there'a a "create" button unerneath the thumbnail area which will generate a preview image.
As for the text on JPEG problem.... I can't say that I've ever tried to do that effect, but I'd bet if you used a specialty compression program like Debabelizer or a high-end JPEG compression plugin with enough controls and variables to tinker with, you could get some decent results.
Extensive tinkering (yes, that *is* the technical term for it! ;) ) with one's compression settings is one of the big keys to web graphics for me.... I've had images where I saved at least 10 different versions and compared them all before choosing the final settings.