11 Replies Latest reply on Apr 27, 2010 12:17 PM by mmadams22

    How to create a Transparent Gradient

    suchintha
      Hi,

      I'm new to graphics and fireworks. Trying to create some graphics for a web page. I want to create a series of images for the header row for each page. Basically what I'm trying to do is create a colored gradient over an image. So one side would be the dark gradient color fading to the right. As the color fades, the image underneath would increase in visibility. The left side of the image would be of the gradient color and right side would be the visible image.

      I'm hoping a transparent gradient over an image would be the best. Ideally want to swap the images under the tranparent later so I can create similar images for each page.

      I looked through some tutorials, but couldn't really figure out how to do this. Is there an easier way to do this? Any documentation or links you can point me to will be appreciated.

      Thanks.
        • 1. How to create a Transparent Gradient
          pixlor Level 4
          That should work.

          - Start with your image.
          - Make a rectangle over your image to fill the size you want.
          - In the Properties panel, change fill drop down from "None" to "Gradient>Linear."
          - Select that drop down again and select "Fill Options..." then click the "Edit..." button.
          The little squares above the gradient allow you to set the transparency. The little squares below allow you to set the color.
          - Set the left side to your color and the right side to transparent (Opacity 0).
          This will give your rectangle a vertical linear gradient. (Don't panic.)

          Select the rectangle. There will be a line with a circle at one end and a square at the other. The circle determines the start of the gradient and the square determines the direction of the gradient with respect to the point the circle is on. Move the circle to somewhere over on the left side of your image and move the square to somewhere on the right side, with the line horizontal. Adjust the positions of the circle and square until you're happy.


          • 2. Re: How to create a Transparent Gradient
            Level 7
            suchintha wrote:
            > Hi,
            >
            > I'm new to graphics and fireworks. Trying to create some graphics for a web
            > page. I want to create a series of images for the header row for each page.
            > Basically what I'm trying to do is create a colored gradient over an image. So
            > one side would be the dark gradient color fading to the right. As the color
            > fades, the image underneath would increase in visibility. The left side of the
            > image would be of the gradient color and right side would be the visible image.
            >
            >
            > I'm hoping a transparent gradient over an image would be the best. Ideally
            > want to swap the images under the tranparent later so I can create similar
            > images for each page.
            >
            > I looked through some tutorials, but couldn't really figure out how to do
            > this. Is there an easier way to do this? Any documentation or links you can
            > point me to will be appreciated.
            >
            > Thanks.
            >

            suchintha,

            Commands\Creative\Fade Image, will give you eight built-in choices to
            start with also.

            SKB
            • 3. Re: How to create a Transparent Gradient
              suchintha Level 1
              Thank you both. I tried what you explained and was able to do what I wanted.

              Thanks again.

              Suchintha.
              • 4. Re: How to create a Transparent Gradient
                suchintha Level 1
                Hi again,

                I've been creating gradients as you described before and it's been working great for smaller images. I'm trying to create a gradient of width 750 pixels. I have a simple gradient of two colors from white to light blue. There are vertical color lines at uniform intervals. Is there anyway I can get rid of these lines and make the gradient smooth all the way to the end?

                Thanks for your help.

                Suchintha.
                • 5. Re: How to create a Transparent Gradient
                  Level 7
                  I'm guessing you're Exporting it as a Gif image?
                  Try Exporting as a JPG. The Gif format doesn't handle gradients well.

                  Peter
                  ____________________
                  "suchintha" <webforumsuser@macromedia.com> wrote in message
                  news:g08h7t$afj$1@forums.macromedia.com...
                  | Hi again,
                  |
                  | I've been creating gradients as you described before and it's been working
                  | great for smaller images. I'm trying to create a gradient of width 750
                  pixels.
                  | I have a simple gradient of two colors from white to light blue. There
                  are
                  | vertical color lines at uniform intervals. Is there anyway I can get rid
                  of
                  | these lines and make the gradient smooth all the way to the end?
                  |
                  | Thanks for your help.
                  |
                  | Suchintha.
                  |


                  • 6. Re: How to create a Transparent Gradient
                    suchintha Level 1
                    Hi,

                    I'm actually exporting it as a JPG. I still see the lines.

                    Thanks.

                    Suchintha.
                    • 7. Re: How to create a Transparent Gradient
                      Level 7
                      What do you have your Display Properties color quality set to? If you can
                      you should set it to Highest (32 bit).

                      Peter
                      ____________________
                      "suchintha" <webforumsuser@macromedia.com> wrote in message
                      news:g09hj5$e17$1@forums.macromedia.com...
                      | Hi,
                      |
                      | I'm actually exporting it as a JPG. I still see the lines.
                      |
                      | Thanks.
                      |
                      | Suchintha.


                      • 8. Re: How to create a Transparent Gradient
                        suchintha Level 1
                        I changed the color settings to 32bit. It looks a lot better now. But now the lines seems to be closer, but still not perfect. Wondering if I'm still missing something.

                        Thanks for your help.
                        • 9. Re: How to create a Transparent Gradient
                          Level 7
                          Can you upload the image somewhere online? So we can all have a look at it.
                          At least that way perhaps we can discover if it's a hardware problem at
                          your end or if we are all seeing the same thing. An editable png would be
                          good also.

                          Peter
                          ___________________
                          "suchintha" <webforumsuser@macromedia.com> wrote in message
                          news:g09nf8$k4i$1@forums.macromedia.com...
                          |I changed the color settings to 32bit. It looks a lot better now. But now
                          the lines seems to be closer, but still not perfect. Wondering if I'm still
                          missing something.
                          |
                          | Thanks for your help.


                          • 10. Re: How to create a Transparent Gradient
                            pixlor Level 4
                            quote:

                            Originally posted by: suchintha
                            I've been creating gradients as you described before and it's been working great for smaller images. I'm trying to create a gradient of width 750 pixels. I have a simple gradient of two colors from white to light blue. There are vertical color lines at uniform intervals. Is there anyway I can get rid of these lines and make the gradient smooth all the way to the end?


                            White to light blue over 750 pixels? What's the value of light blue you're trying to merge to? While there are millions of colors available, there may only be a few dozen distinct colors between white and your light blue. Between white and black (or white and any other full intensity color), there are 256 different colors, so you might notice banding even if you used a white-to-dark color, since you're spreading your color range over 750 pixels. You can't get around the math.

                            Hmm. I think this is a case where a little noise might help break things up a bit. What happens if you export as a .gif with dithering on? Then, if you need the gradient as a background, re-import the dithered gradient .gif into your Fireworks .png and then use that as the background for a final .jpg output? (I have NOT tried this. I'm guessing.)


                            • 11. Re: How to create a Transparent Gradient
                              mmadams22

                              When I try to open swatch options it won't let me edit anything below the swatch name... what am I doing wrong?