4 Replies Latest reply on Jan 1, 2011 12:08 PM by Jim_Babbage

    Grid systems in Fireworks




      Does anyone know where a tutorial exists to demonstrate how to use one of the document

      presets in Fireworks? Say either the 4 , 8, 12, 16 columns? This is not to be confused with

      the 960 grid system.




        • 1. Re: Grid systems in Fireworks
          Jim_Babbage Level 4

          The Grid templates were added in CS5 to help with 960 grid layouts. The actual grid width is set to 960 pixels and the columns are all based on fitting wihtin that width.


          Make sure snap to Guides and Smart Guides are active, this will help you block out your layout more easily. That said, you can fine-tune your object positions within the Properties panel. I find that I can easily be off by a pixel or two when hand-drawing rectangles that represent my div's.


          The only true Guides in the template are vertical; the horizontal "guides" are a pattern fill used within a rectangle shape, found in th Leading layer. This is important to note, in case you increase the height of your canvas. In order to properly scale the pattern fill in that Leading rectangle, you will need to make sure that Scale Attributes is disabled. If you don't turn off this feature, the pattern fill will scale accordingly and the measurement gets messed up.


          You can enable/disable this option in the Fireworks Preferences. In the General category, disable the option called Scale strokes and effects.


          As for using the template, I would create a new layer or layers below the grid template layout and build your design in those layers. By putting your design layers beneath the grid, you can always see the grid while you're working. Keep the three grid layers locked so that you don't accidentally select the elements in those layers. The nice thing about locked layers is that FIreworks will ignore them when you select objects on the canvas, by-passing the locked layers and their contents and directly selecting your objects.



          • 2. Re: Grid systems in Fireworks
            jimfid45 Level 1



            Where you say, "Scale Attributes is disabled" is that the same thing as,

            "Scale strokes and effects"?


            Otherwise I cannot find that. I have FW CS5 version.



            • 3. Re: Grid systems in Fireworks
              jimfid45 Level 1

              Jim nevermind I see it AFTER I posted. Thanks for your help.


              • 4. Re: Grid systems in Fireworks
                Jim_Babbage Level 4

                You're welcome. You can access that setting from either the Preferences panel or the Options menu of the Info panel. The naming is different in both areas, hence my use of both.