Web Design Forums

RaelRode · 14-04-2008, 11:38

Hey guys,

I've got a web design for my new blog, and when I save it as .gif using "Save for web and devices" the quality is reduced. The nice rich blue I chose is now dull and the whole design looks crap now (maybe it looked crap anyway LOL).

Is there any way I can make it so the GIF contains the same image quality as the PSD?

Thanks,
Adam

herkalees · 14-04-2008, 11:42

Not really - a gif only supports up to 256 colors. A .jpg, when saved at 'High' or 'Maximum' will get you a bit closer, and PNG will be about the best you can get out of a image saved for web and devices.

Nothing, really, will remain as good as the PSD.

Do Gooder · 14-04-2008, 11:45

a giff can only handle 256 colours.

a PSD can handle Millions.

so no contest really!

you could look at the settings... perhaps turning off 'web snap' and setting to 256 Adaptive.

Do Gooder · 14-04-2008, 11:45

Quote:

Originally Posted by herkalees

Not really - a gif only supports up to 256 colors. A .jpg, when saved at 'High' or 'Maximum' will get you a bit closer, and PNG will be about the best you can get out of a image saved for web and devices.

Nothing, really, will remain as good as the PSD.

yup go PNG 24.

pgo · 14-04-2008, 12:14

Well the colors should always match, though. A GIF has its own index of colors that it displays, so your color should not change from PSD to GIF.

Assuming you're not trying to save something complex as a GIF...

RaelRode · 14-04-2008, 13:04

The problem is a blue gradient. I've saved as all of the options and nothing near what the PSD shows. Thanks for all the comments guys!

Do Gooder · 14-04-2008, 13:11

gradients and gifs don't mix well

seen.to · 14-04-2008, 13:31

Gifs are best suited to flat areas of color. Save your gradient as a JPG or PNG (try both when using 'save for Web' to see which gives the best result along with the smallest file size).

pgo · 14-04-2008, 14:32

GIF and PNG-8 is fine for a gradient provided there aren't more than 128 colors in it.

RaelRode · 14-04-2008, 14:34

Well, I have a GIF, a JPG and a PNG and they all look the same.

GIF
JPG
PNG

Might need to wait a couple of minutes for it to show online...only just uploaded.

Zygote76 · 14-04-2008, 14:49

The links don't seem to be working properly

RaelRode · 14-04-2008, 14:51

I updated they should work now.

LukeV · 14-04-2008, 16:03

Well in theory Jpegs are the best for gradients since compressing them usually makes an image blurry and blur doesn't really make much of an evident effect on a gradient.

To be honest I don't see much of a difference in any of the links above.

pgo · 14-04-2008, 16:22

I disagree. GIFs and PNGs are better for most gradients. Assuming the only thing in the image is a gradient.

Unless you like artifacts in your gradients...

RaelRode · 14-04-2008, 16:29

Yea there is no difference between the images. That's the problem, the colour in the PSD is much richer, which is annoying because I think I've fallen in love with the colours I used. :P

pgo · 14-04-2008, 16:37

That shouldn't happen. You're using RGB in your PSD, right?

LukeV · 14-04-2008, 16:38

Quote:

Originally Posted by RaelRode

Yea there is no difference between the images. That's the problem, the colour in the PSD is much richer, which is annoying because I think I've fallen in love with the colours I used. :P

Are you sure the color is actually changing? Maybe it's just that the greyish photoshop environment makes the color look a bit different then when it is placed in a lighter/darker environment? Hey it happens.

pgo · 14-04-2008, 16:40

That's also a good point. If your eyedropper in PS and your eyedropper in Firefox are showing the same hex code then it's the same color (though I believe there are different color sets on different machines, right graphic designers?). Different apps and different machines will render things differently. If you want perfect color matching, use Pantones and print your site.

Do Gooder · 14-04-2008, 16:46

i... guess it is the colour settings in photoshop misleading you.

try puttin' the colours setting dialogue to 'Europe web/internet"

and in the save for web dialogue (wee arrow on the top rightish) to "standard windows colour"

that's how i have PS set for webby stuff anyhows.

RaelRode · 14-04-2008, 16:47

RGB makes no difference. This is weird, didn't happen last time.

OH, Do Gooder I love you!!!! It worked thanks!!

14-04-2008, 11:38	#1 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	Raise image quality in photoshop? Hey guys, I've got a web design for my new blog, and when I save it as .gif using "Save for web and devices" the quality is reduced. The nice rich blue I chose is now dull and the whole design looks crap now (maybe it looked crap anyway LOL). Is there any way I can make it so the GIF contains the same image quality as the PSD? Thanks, Adam __________________ If it works, it's valid.

14-04-2008, 11:42	#2 (permalink)
herkalees Semantics, yay. Join Date: Nov 2005 Location: Salem, Massachusetts Posts: 1,126	Not really - a gif only supports up to 256 colors. A .jpg, when saved at 'High' or 'Maximum' will get you a bit closer, and PNG will be about the best you can get out of a image saved for web and devices. Nothing, really, will remain as good as the PSD. __________________ Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

14-04-2008, 13:04	#6 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	The problem is a blue gradient. I've saved as all of the options and nothing near what the PSD shows. Thanks for all the comments guys! __________________ If it works, it's valid.

14-04-2008, 13:31	#8 (permalink)
seen.to unusual suspect ™ Join Date: Jul 2004 Location: DE, USA Posts: 2,887	Gifs are best suited to flat areas of color. Save your gradient as a JPG or PNG (try both when using 'save for Web' to see which gives the best result along with the smallest file size). __________________ [[proverbs and quotes]] [[blog]] [[work]] [[photowebby - some photo's by me]]

14-04-2008, 14:34	#10 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	Well, I have a GIF, a JPG and a PNG and they all look the same. GIF JPG PNG Might need to wait a couple of minutes for it to show online...only just uploaded. __________________ If it works, it's valid. Last edited by RaelRode : 14-04-2008 at 14:51.

14-04-2008, 11:45	#3 (permalink)
Do Gooder Join Date: May 2007 Posts: 5,439	a giff can only handle 256 colours. a PSD can handle Millions. so no contest really! you could look at the settings... perhaps turning off 'web snap' and setting to 256 Adaptive.

14-04-2008, 12:14	#5 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,358	Well the colors should always match, though. A GIF has its own index of colors that it displays, so your color should not change from PSD to GIF. Assuming you're not trying to save something complex as a GIF...

14-04-2008, 13:11	#7 (permalink)
Do Gooder Join Date: May 2007 Posts: 5,439	gradients and gifs don't mix well

14-04-2008, 14:32	#9 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,358	GIF and PNG-8 is fine for a gradient provided there aren't more than 128 colors in it.

14-04-2008, 14:49	#11 (permalink)
Zygote76 Senior Member Join Date: Oct 2007 Location: Ohio Posts: 188	The links don't seem to be working properly

14-04-2008, 14:51	#12 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	I updated they should work now. __________________ If it works, it's valid.

14-04-2008, 16:03	#13 (permalink)
LukeV Best custom title ever. Join Date: Apr 2008 Posts: 229	Well in theory Jpegs are the best for gradients since compressing them usually makes an image blurry and blur doesn't really make much of an evident effect on a gradient. To be honest I don't see much of a difference in any of the links above.

14-04-2008, 16:22	#14 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,358	I disagree. GIFs and PNGs are better for most gradients. Assuming the only thing in the image is a gradient. Unless you like artifacts in your gradients...

14-04-2008, 16:29	#15 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	Yea there is no difference between the images. That's the problem, the colour in the PSD is much richer, which is annoying because I think I've fallen in love with the colours I used. :P __________________ If it works, it's valid.

14-04-2008, 16:37	#16 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,358	That shouldn't happen. You're using RGB in your PSD, right?

14-04-2008, 16:40	#18 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,358	That's also a good point. If your eyedropper in PS and your eyedropper in Firefox are showing the same hex code then it's the same color (though I believe there are different color sets on different machines, right graphic designers?). Different apps and different machines will render things differently. If you want perfect color matching, use Pantones and print your site.

14-04-2008, 16:46	#19 (permalink)
Do Gooder Join Date: May 2007 Posts: 5,439	i... guess it is the colour settings in photoshop misleading you. try puttin' the colours setting dialogue to 'Europe web/internet" and in the save for web dialogue (wee arrow on the top rightish) to "standard windows colour" that's how i have PS set for webby stuff anyhows.

14-04-2008, 16:47	#20 (permalink)
RaelRode Designers are strange :) Join Date: Jan 2007 Location: Shrewsbury, UK Posts: 1,733	RGB makes no difference. This is weird, didn't happen last time. OH, Do Gooder I love you!!!! It worked thanks!! __________________ If it works, it's valid.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search