...

View Full Version : Using gradients from photoshop



TVGHates
02-05-2008, 06:10 PM
I want to use a gradient in the background of my website and the mockup in photoshop looks very slick. When I use jpg (or even a png), and load the gradient in firefox, it has thicks bands.
I understand that photoshop can use millions of colors, but is there a way to make it reflect the firefox palette? I noticed the check box "Web colors" but this uses even fewer colors than the browser.
Maybe there is a better way of creating gradients?

Thanks very much. :)

CaptainB
02-05-2008, 08:18 PM
In photoshop there's an option called 'Save for web'. Then you can chose format, colors etc, which you can not do in the standdard save dialog. Try that one, I've used it and it works well for me.

digipete
02-05-2008, 10:29 PM
If you're creating a gradient background, make sure you make it a JPG file (which supports thousands of colors), and make sure you use the lowest level of compression - which is the maximum level of quality.

Don't worry about the file size - it will be less than 1k. A background gradient only needs to be a few pixels wide. When you put it up and use "background-repeat: repeat-x" to set it up, you won't be able to tell it's just a thin line.

Have fun!
Pete

TVGHates
02-05-2008, 11:11 PM
If you're creating a gradient background, make sure you make it a JPG file (which supports thousands of colors), and make sure you use the lowest level of compression - which is the maximum level of quality.

Don't worry about the file size - it will be less than 1k. A background gradient only needs to be a few pixels wide. When you put it up and use "background-repeat: repeat-x" to set it up, you won't be able to tell it's just a thin line.

Have fun!
Pete

Unfortunately, that's what I did that caused the banding. I am trying to predict better what the gradient will look like before writing to file. I am beginning to suspect some amount of banding is going to always occur compared to photoshop. (I'm not home so I haven't tried CaptainB's suggestion yet.)

Apostropartheid
02-06-2008, 06:13 PM
Why use Photoshop for web design? It's not designed for that sort of stuff, hence its name. Try out Fireworks, instead =) (get a free trial from Adobe (http://www.adobe.com/go/tryfireworks).)

Yeah, as Captain said, don't make a big file. It only has to be 1px by whatever. It may help if you start a new file just for that instead of slicing it out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum