Fireworks popularity as a web design tool is increasing again, thanks to the exposure from various design-related websites, especially to Smashing Magazine. In this Fireworks tutorial, I am going to share a simple tip that you can use to ease your web design work flow in Fireworks – using a built-in tool called Guides.
Guides are those thin blue lines
As the name suggest, the Guides tool act as our guide – in terms of element positioning, layout arrangement and element sizing.
Guides on Guides
Starting up
During your design process, you can use unlimited number of guides (I suppose) to help you through. From the workspace, click and hold your pointer on the horizontal or vertical ruler on the left/top part of Fireworks. Then, drag it onto your working canvas. Now you have one guide. Yay!
Spaces in between
I normally use Guides to plan the width of my layout/elements; and the padding and margin between those elements. To do this, drag several Guides onto the canvas, and position them accordingly. To see the width/gap between each Guide, hover your mouse pointer on that area, and hold down the Shift key. Fireworks will show you the width and the height. Cool! Try to keep the Shift key down, and move your mouse pointer around.
Drag and display
You don’t want to keep on guessing the width/gap of certain part when you drag Guides onto your canvas. To avoid this, you can actually hold down Shift key while dragging your Guides horizontally or vertically. It will show you the width or height between those Guides, real-time.
Small pixel move
It was quite frustrating when you only want to move the line 1px to the left, but it is too small that it will move more than 1px further. I suffered that before – until one day I accidentally found out that there is a workaround. Double-click the Guides; a dialog box will appear with current location of the guide, based on the ruler. Vertical guide refers to the top ruler; horizontal line refers to the left ruler. Common sense, isn’t it? Now you just have to modify this current location value – either subtract 1px, or add 1px or any value.
Lock onto position
Since those Guides will be on top of your canvas, you might accidentally move it when you’re working, which is quite annoying. By locking the guides, this will not going to happen as I will not be able to moved. Great tip if you planned to build your custom grid system in Fireworks! Keyboard shortcuts: Cmd + Alt + ; (Mac) and Ctrl + Alt + ; (Win)
Hide/show the clutter
Sometimes when you had too much Guides on your canvas, it is going to be very messy – to a point where you cannot look at your design anymore! Not a problem. With Cmd + ; (Mac) or Ctrl + ; (Win), all the lines will be hidden from your view. The same shortcut will bring them back to live.. er, I mean, back onto the canvas. In fact, if you closed your Fireworks, to go out and get a life for a moment or two, the same guides will be preserved in your file (unlike Grid).
Those Guides will also be preserved if you send your source file to other people on different platform.
End of story
Personally, this Guide tool has been helping me a lot during my design phase in Fireworks – to be more precise with my layout arrangement and position, which going to help a lot through the coding phase, especially the CSS. The value for width, padding and margin has already being defined in Firework – just port them in to the CSS code.
Time saving in both design and coding phase. Awesome!
PreviousShirts all the way
yes. surely they helped A LOT!!
nice and easy to understand tutorial
Bagus la. Pasni leh ah try gak pakai FW.
@abdusfauzi: yep, a lot. thanks!
@eXo: sila sila pakai FW. heh
macam menarik!? boleh lah cuba lepas ni, main dengan rekaan grafik pulak he3.
selama ini aku hanya menggunakan notepad++ dan PS.
line tu sangat berguna.
PS pun ada gak kan? hehe
gambar baru tu.
@megat: yeahh boleh2. sila cuba. heh
@izzat: PS ade kot. x penah tahu. haha gambar baru
cool guide, bookmarked for future reference by web design lancashire – UK company
aa boleh tlg aku x? aku ni umur 16.
mcm mane ha nk buat website sendiri? blh tlg ajar aku x?
tak pena pakai firework…
tp kt ps mmg ade line2 tuh…
Quickly realized))))
good one bro
umm..mana lg bagus utk dev a web design; ps or firework?
buta sket la
good one bro
umm..mana lg bagus utk dev a web design; ps or firework?
xpnh pkai lg la fireworks..
gonna try 1 soon
Hi there, my home page is http://www.google.com