3 Replies Latest reply on May 14, 2009 2:33 AM by SiamJai

    Layer set to overlay

    Fiona Hayward Level 1



      Im trying to follow a photoshop tutorial for doing up a website layout, but Im doing it in FW. - CS3


      (here is the link - http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scra tch/ )


      Ive drawn a grey rectangle which will be a background for nav buttons.

      The instructions read:

      Create a new layer above the rectangle and set Layer mode to Overlay. Ctrl+click the rectangle layer. Now the rectangle will be selected. Choose a 600px soft brush, set the color to white, and click a few times with the edge of the brush just a bit over the selection, like shown on the image. This way you create a nice, subtle light effect. Additionally you can link these two layers.


        In FW, it doesnt let you select this option, when there is nothing in the layer, or so it seems. And I have trouble doing the ctrl + click thing with the rectangle layer.


      From what I can tell, the purpose of this is to give a soft highlight on the background rectangle, without it spilling over onto objects on the canvas.

      This would be a very handy thing to do

      So,, how do I do this?



        • 1. Re: Layer set to overlay
          SiamJai Level 2

          Hi Fiona,


          This effect is doable in Fireworks too; it just works a little bit differenty.   First, the Photoshop term for "layer" should be understood as "object" in Fireworks. The other difference is that Fireworks doesn't allow clicking that far out off-canvas.


          One solution is the following:


          1. First we need to temporarily expand the canvas a little bit upwards, so that there is enough space to apply that huge brush. Make sure that nothing is selected and click the Canvas Size button in the Property Inspector. Add 200 pixels to the current height value, select the bottom middle anchor and click OK. The useable canvas surface should now extend to an additional 200 pixels.

          2. To make the next step easier, change the canvas color the same as the surrounding non-working area (sample it with the color picker).

          3. Next, select the Brush tool. Set the color to white, select the Soft Rounded option (if it's not on by default) and enter 600 manually on the Tip Size window. For a really smooth effect, set the Edge to 100.

          4. Apply the brush the same way as in the original tutorial. Note that a new object is automatically created in the Layers panel, above the rectangle.

          5. Once the effect looks good on the rectangle, switch back to the Pointer tool (0). Click somewhere off-canvas to make sure that nothing is selected. Bring up the Canvas Size dialog as previously described. Subtract 200 from the height value and make sure that the bottom middle anchor is still selected. Click OK and the canvas returns to the size we started out with, automatically cropping any unnecessary parts of the brush.

          6. As an additional step, you could now set the blend mode to Overlay as the tutorial suggests.


          I hope this helps.






          Innovative Fireworks Tutorials

          • 2. Re: Layer set to overlay
            Fiona Hayward Level 1


            Thankyou very much SiamJai for your help and taking the time to look at it. 

            I think I get the idea. 

            Im going to go and give it a try!




            • 3. Re: Layer set to overlay
              SiamJai Level 2

              You're welcome, Fiona.