homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Biggest Web Graphic Frustration? Tips & Hints?
What bugs you... and how can it be fixed?

 8:07 pm on Feb 5, 2001 (gmt 0)

This is the one that always makes me scratch my head:

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.



 8:34 pm on Feb 5, 2001 (gmt 0)

Do you immediately see the color shift in PhotoShop when you SAVE -- or close and re-open? Or is it only visible in your browser?


 8:44 pm on Feb 5, 2001 (gmt 0)

It's immediately upon entering the "save for web" window... after I close and re-open... and in my browser window. *shrug* I generally go back to the original file and shift the blue hues towards aqua and re-save...


 8:48 pm on Feb 5, 2001 (gmt 0)

What bugs me is using photoshop (5.0), you have to switch your image (usually start work with RGB) to indexed color in order to select the transparent color when exporting to gif. Don't know why this is, have always wondered.

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.


 9:03 pm on Feb 5, 2001 (gmt 0)

When I save to a transparent gif, I use export GIF89A... after I've optimized it in 5.5's save for web window. I haven't used "save as" for any web graphics since I got 5.5.

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.


 9:07 pm on Feb 5, 2001 (gmt 0)

"Save for the web" forces all the GIF colors to the 216 color web-safe palette. That will shift colors away from your original choices.

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.


 9:29 pm on Feb 5, 2001 (gmt 0)

>"Save for the web" forces all the GIF colors to the 216 color web-safe palette. That will shift colors away from your original choices.

:) 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.


 9:50 pm on Feb 5, 2001 (gmt 0)

>Exact" mode is that the file size of the gif is often too big
Agreed, I always then take the image straight into Ulead's Smart Saver Pro to get the size down to a min.

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.


 10:42 pm on Feb 5, 2001 (gmt 0)

RGB is a 24 bit color space, millions of possible colors. The indexed color palette is 8 bit, maximum of 256 colors. Color Table mode lets you edit whatever colors are in your 8-bit palette exactly, by hex number.

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.


 10:59 pm on Feb 5, 2001 (gmt 0)

I believe the 22 colors thing... even if you're working in the supposed "web safe" 216 palette, most of the colors do display differently between mac & PC. I did a site with solid buttons that were supposed to blend into the background (solid background buttons made the rollover effects a lot easier), and thought I had everything all fixed up. Then a windows friend told me the buttons and background weren't the same color on his machine... Time to toally re-do the buttons (with transparent backgrounds)...

(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)


 11:14 pm on Feb 5, 2001 (gmt 0)

Matching GIF colors to background colors just doesn't work, even though I see it recommended many places -- different browsers render background colors so differently.

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.


 11:30 pm on Feb 5, 2001 (gmt 0)

> an art department ... only viewed it in 32 bit color

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."

Andrew Wiggins

 11:29 am on Feb 7, 2001 (gmt 0)

Avoid colour shift by checking your PS settings:

Colour prefs:
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.


 12:33 pm on Feb 7, 2001 (gmt 0)

What about backgrounds, is there anyway to prevent the bg from being distorted when scrolling from left to right or vice verser?


 7:51 pm on Feb 7, 2001 (gmt 0)

> prevent the bg from being distorted when scrolling from left to right or vice verser

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?


 12:29 am on Feb 8, 2001 (gmt 0)

Here [geocities.com] is what I mean.


 12:39 am on Feb 8, 2001 (gmt 0)

I saw a green band down the left side of the page (which took a long time to appear), and the rest of the page was white with the word TEST on it. It didn't look distorted...?

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.


 12:53 am on Feb 8, 2001 (gmt 0)

maccas, are you referring to the horizontal scrolling? My resolution is 800x600 and I had to scroll sideways. For the few who use 640x480 it will scroll more.

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">
<td width="100"></td>
<td width="750">TEST</td>

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.


 1:17 am on Feb 8, 2001 (gmt 0)

Yeah I set this page up so you could see what I mean by the bg images being distorted. I usually do use % but sometimes a table needs to be in pixels, and for those using a screen resolution of 640x480 they might need to scroll a bit. The bg image shifts to the right and over the word test when scrolling left to right in IE5, is ok in NS


 1:35 am on Feb 8, 2001 (gmt 0)

hrm... I've looked in NN 4.7 & IE 5 for Mac and IE 5.5 for Windows, and don't see any distorion, movement or other problems with the background.

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.


 5:30 am on Feb 8, 2001 (gmt 0)

OK, move over.... new question coming through.

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!


 6:24 am on Feb 8, 2001 (gmt 0)

The tools in PhotoShop's "Save for the Web" option (introduced in 5.5, I think) can do a decent job preserving the sharp lines of text. So can various third party packages.

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.


 8:46 am on Feb 8, 2001 (gmt 0)

>The bg image shifts to the right and over the word test when scrolling left to right in IE5, is ok in NS

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">
<td width="150"></td>

You can then tweak the 150 pixel width to whatever you need, more or less, a bit at a time, until it's right.


 8:53 am on Feb 8, 2001 (gmt 0)

Extensis has a free plugin for download, Photo-text, which has some excellent features for working on text in versions of Photoshop earlier than 5.5

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).


 7:44 pm on Feb 8, 2001 (gmt 0)

> if it includes a browse feature that shows the images before opening

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved