Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Using gradients from photoshop

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    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.

  • Users who have thanked CaptainB for this post:

    TVGHates (02-05-2008)

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    9
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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

  • Users who have thanked digipete for this post:

    TVGHates (02-05-2008)

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by digipete View Post
    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.)

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.)

    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.
    Last edited by Apostropartheid; 02-06-2008 at 06:16 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •