Photoshop question

falconire

OK, so I've been using Photoshop to color my artwork for some time now but everytime I save my work as a jpeg and then upload it to another site I have a problem with how the color looks, usually the red shades, which look distorted and sort of bubbly. Does anyone know what I'm talking about and how to fix the problem while still using jpegs?

As an example here is a drawing using a lot of reds that has the problem, although for some reason the reds come in correctly on this site. An I just crazy?

DarkPrimus

Can you take a screen cap of the picture's colors being incorrect, and then show us?

telcus

It might have to do with the way that jpeg compresses the file to save space.

In Photoshop, when saving, there should be a way to change the quality/compression rate. Try changing it to high quality and see if that fixes the problem.

Of course, this will increase the file size, but it shouldn't be too significant.

Jasconius

Even the lowest JPEG compression probably wouldn't do that especially without him realizing he was at such a low quality setting.

It sounds to me like perhaps he is coloring his images in CMYK mode and when Photoshop is converting it to JPEG it's picking a not-quite-right color.

flatlinegraphics

ok, for flat colors, you really should be using gif's or pngs, rather than jpgs. thats the first half of the problem. second half, go to view->proof setup-> screen. this will give you a better idea of the output.

third half, make sure you are working in rgb color space.

fourth half, use save as->jpg, rather than save for web. save as-> jpg will give you better quality jpgs, but at the cost of much higher file sizes. save for web uses much better compression, but the colors aren't quite as good. this is fine for slicing up web prototypes, and fine for most things. but for a single piece output, you may want to forgo it in favor of save as.

Zeon

The bubbly effect is definately a compression issue. Its usually very prevalent with reds. Not much you can do about that if you both need to save in jpeg and have a maximum filesize limit to work under.

If you dont have either worry, either save as gif files, or crank up the quality slider.

Gihgehls

Jasconius wrote: »

Even the lowest JPEG compression probably wouldn't do that especially without him realizing he was at such a low quality setting.

It sounds to me like perhaps he is coloring his images in CMYK mode and when Photoshop is converting it to JPEG it's picking a not-quite-right color.

This is probably the closest to the right answer. It sounds to me like some websites can't read CMYK jpegs (I think photobucket is like this) and when they try to read them they come out corrupted. But if you are just linking the original, all browswers should be able to display CMYK jpegs.

falconire

I appreciate everyone's advise here. I had a previous webcomic using yahoo pagebuilder that had the same problem, the same goes if I put a drawing up on my myspace. I'll try out some of these ideas today and see what works.

The thing about gifs though, can all browsers read them?

Jasconius

falconire wrote: »

I appreciate everyone's advise here. I had a previous webcomic using yahoo pagebuilder that had the same problem, the same goes if I put a drawing up on my myspace. I'll try out some of these ideas today and see what works.

The thing about gifs though, can all browsers read them?

Well, where are you hosting the images that go onto that Yahoo and Myspace page?

Also, yes, all browsers can read GIF's. Except the rarely used text-only ones, etc.


As far as the JPEG comment above, man what? JPEG's can look just fine for solid color and are a good middle ground between GIF and PNG if you have solid colors but a lot of dithering, which I think he has. A JPEG can be smaller in size than a comparable GIF even if the GIF pallet isn't maxed out.

And there's nothing wrong with Save For Web, it all uses the same compression algorithm, just make sure you check your quality settings where "100" is max for Save for Web and "12" is max for regular Save+As.

For the web, usually an 80-90 in Save for Web will net you a solid middle ground between size and quality, especially for simple images like the example posted above. It definately would NOT cause the color distortion you are describing.

I'm going to go with either:

CMYK mode

or

Faulty hosting.

Also

This is a fucking long shot but... you don't by chance use the AOL web browser do you? If so, stop immediately and rethink your life.

falconire

I just checked it and apparently I've been saving in RGB/8 bits Channel

falconire

No, AOL here, I used Internet Explorer through Charter Services.

DrFrylock

Oh god, the bad advice.

Not all software handles CMYK JPEGs correctly, and you should convert them to RGB if you're going to post them on the Web. You may have a compression issue, but maybe not.

All browsers can read GIFs, but GIF uses indexed color and an 8-bit palette. That means that a GIF can use a maximum of 256 colors from a palette of 16.7 million. If you're concerned about photographs or color reproduction, GIF is a monumentally stupid format to use. It is lossless, however.

PNG is lossless also and has a full 24-bit color space available to you. I believe PNGs are all RGB. All modern browsers can read PNGs, although you have to be a little more careful:

• PNG allows you to have an 8-bit alpha channel, which means that each pixel can have an individual transparency level from 0-255. (GIF has only one level of transparency: each pixel is either 100% transparent or 100% opaque. JPEG has no transparency.) On Internet Explorer versions through 6.0, this transparency was not supported. There is a Javascript hack you can do to cause Internet Explorer to use a different PNG renderer to render the alpha-blended PNGs. IE7 supports alpha-blended PNG. I believe all versions of FireFox that support PNG support alpha blending.
• There's a small metadata block in PNG files that contains some small bits of meta-information about the file (what program created it, etc.). Photoshop has a tendency to store a Gamma (brightness correction) value in there. Without a gamma value, browsers will just render it in default gamma (i.e., what you expect to see on the screen). However, IE acts differently. There's some dispute over whether this is a problem with IE, Photoshop, or the PNG specification. Anyway, if you leave Photoshop's default gamma value in there and view a PNG on IE, it looks darker than it's supposed to. This is not a problem in FF. You can remove the gamma value from a Photoshop-generated PNG file with TweakPNG.

falconire

I've changed a few drawings from jpegs to png and they're coming out fine in IE so that may have worked. All of them are flat color drawings of btw.