7 Replies Latest reply on May 18, 2009 8:25 PM by JerryCied

    How to achieve this in FWs

    Nadia-P Level 5

      Hey all,

      I've seen a tutorial in PS for fading out effects where they use a black (or is it white) brush effect to fade out some of an image or an element.

       

      What would be the easiest way to achieve the fading edges on the line above the menu bar, the menu item dividers and the line above the footer on this page:

       

      http://www.harrods.com/harrodsstore/Default.aspx

       

      PS:  I've experimented a few times on menu dividers by using masking, but never managed to achieve a nice look - actually didn't seem to make much difference on such a small element, particularly just a small 'line'...

       

      Thanks !!

        • 1. Re: How to achieve this in FWs
          Panos Zygopoulos Level 3

          As long as we have to do with a small background image which is repeated, i think using the linear or elipse gradient of the fill category of the properties panel should do it. Draw a box (a little bigger than the 1px image you want to create, so that you can see it clearly), and use the fill category (properties panel) to add a linear gradient. You can add colors to your box through the color box of the properties panel.

           

          You don't want to fade out this image's edge but actually you want this fading effect to be an image itself. That's why you shouldn't use any of the vector masks.

          thanks

          1 person found this helpful
          • 2. Re: How to achieve this in FWs
            SiamJai Level 2

            Hi Nadia,

             

            Panos' advice is spot on. The header of that site can be recreated by a green-to-black vertical linear gradient, while the horizontal line above the footer is easily made with a black-grey-black horizontal bar gradient. Both of which, when layed on top of the solid black background, give the illusion of the edges fading out without actually doing so.

             

            The caveat with this trick is that once the HTML background color is changed via CSS, all these gradients have to be re-created, else the fake-fadeout edges will stand out.   You could avoid that problem by reducing the opacity to 0 at gradient's edges (top tabs) and export genuinely transparent pngs instead, but then there would be that dreaded IE6-transparency bug to deal with...

             

            Best luck! ^_^

            1 person found this helpful
            • 3. Re: How to achieve this in FWs
              pixlor Level 4

              The horizontal line in the header is actually a double line, so it looks carved. I'd go ahead and use masks (linear gradient) for the endpoints on the long lines. Make one, duplicate and flip and add these ends to a solid line. For the vertical lines, mask with a circle with a radial gradient.

               

              As so: http://drop.io/FWpixlor/asset/nadiamask-png

               

               

              • 4. Re: How to achieve this in FWs
                Nadia-P Level 5

                Thanks all,

                 

                I've tried a few variations and so far, I'm liking Pixlors' method the best for what I'm trying to do  :-)

                 

                Pixlor's png example helped me understand where I was going wrong previously... so thanks for taking the trouble to do the png for me - appreciated !

                • 5. Re: How to achieve this in FWs
                  pixlor Level 4

                  I'm happy it's working for you!

                  • 6. Re: How to achieve this in FWs
                    SiamJai Level 2

                    Thanks for sharing that clever trick, Lorraine! It will surely come in handy in the future for me too.

                     

                    Nadia, I'm glad you got it working! ^_^

                    • 7. Re: How to achieve this in FWs
                      JerryCied Level 1

                      Hi

                       

                      Here http://www.potterpuppetpals.com/newppp/fun-games-puzzles/index.htm

                      and here: http://www.potterpuppetpals.com/

                      and here: http://www.potterpuppetpals.com/indexr.htm (same page only the red background color is different.)

                       

                      Look at the buttons in the menus on the left. how they fade to transparency. I created these in fireworks.

                       

                      I think that is what you want to acomplish.

                      For any rectangle, choose a gradiant, lets use a linear gradiant as an example.

                      When you edit the gradiant properties, you need to set the upper left transparency indicator to white and the upper right one to black.

                      Then you need to make both color indicators to the color you want. Say green.

                      Then the rectangle behaves as you want, reguardless of the background color or image.

                       

                      Thanks

                      Jerry