6 Replies Latest reply on Jan 1, 2007 7:21 PM by Newsgroup_User

    gradient help + file size?

    geodeath
      Hello all!
      I need some fireworks master to enlighten me.
      I tried to create a background for a site i am developing.
      I got the idea from www.rockettheme.com templates. If you look at the mobius template for joomla, you will see that the background image covers the whole page, its not a repeated image at a resolution of 1980X590.

      My problem is that whenever i try to save my own background as a png (just like the background image from the theme) it weights at about 120kb, while his background is less than 20!!! Yet i use less colors...

      On my second problem :

      I cant seem to be able to find a way to use a gradient over the lower part of my image as he did in his, so the bottom side of the image fades nicely into the html background color. I tried using a top shadow on a bottom aligned rectangle and a big & soft brush to create the fade effect, but i always get horizontal banding lines between the gradiation colors....

      How can i do this?

      I attach both files (links) for anyone to see.
      Lets hope someone can help me a bit here.

      Happy new year to all!!!
      template background
      my background
        • 1. Re: gradient help + file size?
          Level 7
          > My problem is that whenever i try to save my own background as a png (just
          > like the background image from the theme) it weights at about 120kb, while
          > his
          > background is less than 20!!! Yet i use less colors...

          Save as a JPG with 60% quality. Most likely you are saving as a FW PNG, and
          not exporting as an 8/24 bit PNG.

          > I cant seem to be able to find a way to use a gradient over the lower part
          > of
          > my image as he did in his, so the bottom side of the image fades nicely
          > into
          > the html background color. I tried using a top shadow on a bottom aligned
          > rectangle and a big & soft brush to create the fade effect, but i always
          > get
          > horizontal banding lines between the gradiation colors....

          Draw a rectangle over the image. Fill it with a gradient from white to
          black. With the rectangle and the image selected, apply as a Mask, with
          reveal selection. You'll see....

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "geodeath" <webforumsuser@macromedia.com> wrote in message
          news:ena57b$91v$1@forums.macromedia.com...
          > Hello all!
          > I need some fireworks master to enlighten me.
          > I tried to create a background for a site i am developing.
          > I got the idea from www.rockettheme.com templates. If you look at the
          > mobius
          > template for joomla, you will see that the background image covers the
          > whole
          > page, its not a repeated image at a resolution of 1980X590.
          >
          > My problem is that whenever i try to save my own background as a png (just
          > like the background image from the theme) it weights at about 120kb, while
          > his
          > background is less than 20!!! Yet i use less colors...
          >
          > On my second problem :
          >
          > I cant seem to be able to find a way to use a gradient over the lower part
          > of
          > my image as he did in his, so the bottom side of the image fades nicely
          > into
          > the html background color. I tried using a top shadow on a bottom aligned
          > rectangle and a big & soft brush to create the fade effect, but i always
          > get
          > horizontal banding lines between the gradiation colors....
          >
          > How can i do this?
          >
          > I attach both files (links) for anyone to see.
          > Lets hope someone can help me a bit here.
          >
          > Happy new year to all!!!
          > http://www.puregaming.gr/bg_thin.png
          > http://www.puregaming.gr/myback.png
          >


          • 2. Re: gradient help + file size?
            Level 7
            geodeath wrote:
            > Hello all!
            > I need some fireworks master to enlighten me.
            > I tried to create a background for a site i am developing.
            > I got the idea from www.rockettheme.com templates. If you look at the mobius
            > template for joomla, you will see that the background image covers the whole
            > page, its not a repeated image at a resolution of 1980X590.

            It is just a strip. You can see the background image here:

            http://demo.rockettheme.com/jan07/templates/rt_sporticus/images/background/medium/bg.png

            --
            Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
            --------------------------------------------------------------
            http://www.projectseven.com
            Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
            CSS Newsgroup: news://forums.projectseven.com/css/
            Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
            --------------------------------------------------------------
            • 3. Re: gradient help + file size?
              geodeath Level 1
              I was not reffering to the sporticus template, but the mobius one.
              If you try looking at the url i posted you'll see!

              I will try the solution you posted ace and i will post back. thanks!
              • 4. Re: gradient help + file size?
                geodeath Level 1
                I managed to create the fade effect using the mask as you proposed ace, but the weird thing is that after i choose Modify->Mask->Group as a mask having both the rectangle and the graphic selected, it doesnt allow me to do anything else than enable or delete the mask (so i cannot choose between reveal/hide selection) cause everything else is grayed out and not active.

                That did the job however.
                Also, when i asked about the filesize, of course i tried exporting to all possible formats. However, since then i understood that the trick that guy used on the other background was to use the same colors everywhere, where i used a lot of different ones at the same time, so to get a good quality png/8 i had to use a lot of colors=a lot of size, where his graphic uses less colors.
                • 5. gradient help + file size?
                  geodeath Level 1
                  Sorry for multi posting. I actually found the way. Thanks to everybody, i did it!!!!

                  :) The mask techniqie allows the image to fade out to the canvas color.

                  thanks again!
                  • 6. Re: gradient help + file size?
                    Level 7
                    geodeath wrote:

                    > I was not reffering to the sporticus template, but the mobius one.
                    > If you try looking at the url i posted you'll see!

                    That's probably because the link to the mobius demo page takes you to
                    the Sporticus demo page. I didn't notice the drop down at the top. :-)

                    You should be able to recreate the mobius background image and export it
                    as a 24 bit PNG at the same file size as the original. The trick is to
                    *export* the PNG file rather than save it as a PNG file.



                    --
                    Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
                    --------------------------------------------------------------
                    http://www.projectseven.com
                    Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                    CSS Newsgroup: news://forums.projectseven.com/css/
                    Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                    --------------------------------------------------------------