14 Replies Latest reply on Apr 18, 2006 9:58 AM by Newsgroup_User

    help with exporting gradient background as jpg

    drblow
      Hi there! I'm totally new to this forum & very new to fireworks, so go easy on me!

      I am designing for QVGA smartphone/PPc screens & find that when I create a gradient in fireworks MX (version 6) & then export it as a jpg, on the phone/PPC screen the gradient is filled with big blocks of colour rather than smooth transitions between them, making the overall effect more like lines or blacks of colour than a smooth gradient. I am exporting the jpgs at the highest quality settings (100%).

      Can someone help? Is it just my lack of technique when blending colours? If so is there a tutorial somewhere? Or can I export in a different format? The screens I design are controlled by an xml layout file, & will accept .jpg, .gif & .bmp

      Thanks!
        • 1. Re: help with exporting gradient background as jpg
          Level 7
          My guess is that you need to change the canvas PPI (pixels per inch)
          setting to higher than Fireworks default 72.

          --
          Linda Rathgeber ACE ::: PVII
          http://www.projectseven.com
          Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
          CSS Newsgroup: news://forums.projectseven.com/css/
          -----------------------------------------------------------------------
          Adobe Community Expert - Fireworks
          -----------------------------------------------------------------------
          Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
          • 2. Re: help with exporting gradient background as jpg
            Level 7
            Linda R. wrote:
            > My guess is that you need to change the canvas PPI (pixels per inch)
            > setting to higher than Fireworks default 72.
            >

            Is it possible the phone doesn't display 24-bit color? A lower bit depth
            could have an effect on the display your gradient, especially if the
            color range is extreme.

            --
            Jim Babbage - .:CMX:. & .:ACE:.
            Extending Knowledge, Daily
            http://www.communityMX.com/
            CommunityMX - Free Resources:
            http://www.communitymx.com/free.cfm
            ---
            .:Adobe Community Expert for Fireworks:.
            news://forums.macromedia.com/macromedia.fireworks
            news://forums.macromedia.com/macromedia.dreamweaver
            • 3. Re: help with exporting gradient background as jpg
              drblow Level 1
              Thanks very much for those replies!

              I have tried changing the ppi settings, but that doesn;t seem to have any effect. I searched on the web for some info about the ppi settings I should be using for a QVGA (320x240) phone screen, but there wasn;t much so far.

              I tried testing with different bit depths, which is all new to me! Using .bmp * bit gets me the best results so far, but it is still somewhat 'chunky' once exported & viewed on the phone screen, if you know what I mean. I'll keep testing, but any more insight you guys could give would be great.

              Thanks again.
              • 4. Re: help with exporting gradient background as jpg
                Level 7
                On Sun, 16 Apr 2006, Linda R. wrote

                >My guess is that you need to change the canvas PPI (pixels per inch)
                >setting to higher than Fireworks default 72.

                The ppi value in a graphics file is only for printing so I'm puzzled as
                to why you would think any particular value would have an effect on a
                screen display.

                --
                Richard Mason
                • 5. Re: help with exporting gradient background as jpg
                  Level 7
                  No, it can affect screen graphics, too. You can see this in IE. Search the
                  web for an example. -- Tony

                  "Richard Mason" <whitneyrm@xtra.co.nz> wrote in message
                  news:gv6$LFFtDwQEFwNU@xtra.co.nz...
                  > On Sun, 16 Apr 2006, Linda R. wrote
                  >
                  >>My guess is that you need to change the canvas PPI (pixels per inch)
                  >>setting to higher than Fireworks default 72.
                  >
                  > The ppi value in a graphics file is only for printing so I'm puzzled as to
                  > why you would think any particular value would have an effect on a screen
                  > display.
                  >
                  > --
                  > Richard Mason


                  • 6. Re: help with exporting gradient background as jpg
                    Level 7
                    Richard Mason wrote:
                    > On Sun, 16 Apr 2006, Linda R. wrote
                    >
                    >> My guess is that you need to change the canvas PPI (pixels per inch)
                    >> setting to higher than Fireworks default 72.
                    >
                    > The ppi value in a graphics file is only for printing

                    Actually, the DPI value in a graphics file is only for printing. What's
                    the PPI of the screen of the device? That's what you need to design for,
                    isn't it?


                    --
                    Linda Rathgeber ACE ::: PVII
                    http://www.projectseven.com
                    Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                    CSS Newsgroup: news://forums.projectseven.com/css/
                    -----------------------------------------------------------------------
                    Adobe Community Expert - Fireworks
                    -----------------------------------------------------------------------
                    Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                    • 7. Re: help with exporting gradient background as jpg
                      drblow Level 1
                      Thanks again for the replies y'all!

                      As far as I can gather from web sources, the PPI of my smartphone QVGA screen is 96ppi. Setting the canvas PPI does not seem to affect the quality of either jpg, gif or bmp formats on export, once they are on my phone screen. It would appear form web sources that the phone screen displays 16 bit colour depth.

                      I have tried to make the gradient as smooth as possible & on my laptop screen it looks really good. Any more suggestions?

                      Thanks.
                      • 8. Re: help with exporting gradient background as jpg
                        Level 7
                        drblow wrote:
                        > Thanks again for the replies y'all!
                        >
                        > As far as I can gather from web sources, the PPI of my smartphone QVGA screen
                        > is 96ppi. Setting the canvas PPI does not seem to affect the quality of either
                        > jpg, gif or bmp formats on export, once they are on my phone screen. It would
                        > appear form web sources that the phone screen displays 16 bit colour depth.

                        Ah ha! The problem is with the 16 bit color depth. You don't get smooth
                        gradients at 16 bits.


                        --
                        Linda Rathgeber ACE ::: PVII
                        http://www.projectseven.com
                        Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                        CSS Newsgroup: news://forums.projectseven.com/css/
                        -----------------------------------------------------------------------
                        Adobe Community Expert - Fireworks
                        -----------------------------------------------------------------------
                        Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                        • 9. Re: help with exporting gradient background as jpg
                          Level 7
                          On Mon, 17 Apr 2006, Anthony Bollinger wrote

                          >No, it can affect screen graphics, too.

                          In what way?

                          >You can see this in IE. Search the web for an example.

                          Perhaps you could give a reference to an actual example.

                          --
                          Richard Mason
                          • 10. Re: help with exporting gradient background as jpg
                            Level 7
                            On Mon, 17 Apr 2006, Linda R. wrote

                            >Actually, the DPI value in a graphics file is only for printing. What's
                            >the PPI of the screen of the device? That's what you need to design
                            >for, isn't it?

                            Not really. All that matters on a display is the image size in pixels.
                            Obviously one has to size an image so that it takes up the required
                            amount of screen real estate but there is no relationship between the
                            dpi value used for a "canvas", which is subsequently stored in the
                            graphics file, and the number of pixels per physical inch (ppi) on a
                            display. The dpi values that one sees recommended for display i.e.
                            72dpi, 96dpi, or whatever, result from a confusion about the meaning of
                            dpi values as these values have been "picked up" from those used for
                            on-screen font sizing - are nothing whatever to do with image display -
                            and the inches aren't even physical inches.

                            --
                            Richard Mason
                            • 11. Re: help with exporting gradient background as jpg
                              Level 7
                              On Mon, 17 Apr 2006, drblow wrote

                              >As far as I can gather from web sources, the PPI of my smartphone QVGA
                              >screen is 96ppi.

                              No, it isn't. The physical pixels per inch is the number of actual
                              pixels in the vertical/horizontal direction divided by the display
                              vertical/horizontal inches. I estimate that a 2.2 inch screen (diagonal)
                              has a physical ppi of about 180 pixels per inch - and it's totally
                              irrelevant. The 96ppi is a confusion about the meaning of ppi/dpi.

                              >Setting the canvas PPI does not seem to affect the quality of either
                              >jpg, gif or bmp formats on export, once they are on my phone screen.

                              It wouldn't. Canvas ppi (dpi) has nothing to do with image display. The
                              Gif format doesn't even contain ppi/dpi information

                              > It would appear form web sources that the phone screen displays 16
                              >bit colour depth.
                              >

                              As Linda has been said, this could be the problem. You can see what it
                              looks like on your computer monitor by setting it's color depth to 16
                              bit.
                              There are, in fact, two 16 bit color formats so if your computer and the
                              device use different formats there could be a difference there - but not
                              a big one.

                              --
                              Richard Mason
                              • 12. Re: help with exporting gradient background as jpg
                                Level 7
                                Yes, as I mentioned earlier in this thread, the bit depth could be the
                                issue. Try setting your monitor to 16 bit and experiment with gradients
                                at that bit depth. Keep the color range and the tonal range less extreme
                                (light blue to dark blue for example, rather than white to dark blue)
                                similar an you might be able to get something a little more pleasing.
                                --
                                Jim Babbage - .:CMX:. & .:ACE:.
                                Extending Knowledge, Daily
                                http://www.communityMX.com/
                                CommunityMX - Free Resources:
                                http://www.communitymx.com/free.cfm
                                ---
                                .:Adobe Community Expert for Fireworks:.
                                news://forums.macromedia.com/macromedia.fireworks
                                news://forums.macromedia.com/macromedia.dreamweaverdrblow wrote:


                                > Thanks again for the replies y'all!
                                >
                                > As far as I can gather from web sources, the PPI of my smartphone QVGA screen
                                > is 96ppi. Setting the canvas PPI does not seem to affect the quality of either
                                > jpg, gif or bmp formats on export, once they are on my phone screen. It would
                                > appear form web sources that the phone screen displays 16 bit colour depth.
                                >
                                > I have tried to make the gradient as smooth as possible & on my laptop screen
                                > it looks really good. Any more suggestions?
                                >
                                > Thanks.
                                >
                                • 13. Re: help with exporting gradient background as jpg
                                  drblow Level 1
                                  Thanks again everyone!

                                  I have tested setting my monitor to 16bit colour & it certainly does have the same effect on images as on my phone, so I guess that is the issue - which is a shame coz it's the one thing I can;t fix!

                                  I suppose I'll just have to experiment with different gradients to see if I can come up with something. The strange thing is that if I download an image from the web that contains a gradient, that image often shows fine on my phone. Is there a compression method that might achieve better results at 16 bit?
                                  • 14. Re: help with exporting gradient background as jpg
                                    Level 7
                                    I was not able to google this right off, but I recall it distinctly. I
                                    believe it created a reaction in this very newsgroup last year. I will post
                                    when I dig something up. Anybody else remember this? It was either that
                                    graphics set to 72dpi displayed wrong in IE on Windows or those set to 96dpi
                                    displayed wrong on a Mac in IE. -- Tony

                                    "Richard Mason" <whitneyrm@xtra.co.nz> wrote in message
                                    news:UP1yzmGUPAREFwBd@xtra.co.nz...
                                    > On Mon, 17 Apr 2006, Anthony Bollinger wrote
                                    >
                                    >>No, it can affect screen graphics, too.
                                    >
                                    > In what way?
                                    >
                                    >>You can see this in IE. Search the web for an example.
                                    >
                                    > Perhaps you could give a reference to an actual example.
                                    >
                                    > --
                                    > Richard Mason