Web Design Redlines with Fireworks CS5

A common issue in the interactive design industry is that we always wish our Photoshop mockups look exactly the same when they go to development. Usually we get that first HTML file back and we feel a small piece of us is broken inside.

Little elements of your hard work have either been overlooked or ignored and thus begins the back and forth task of providing quality assurance of your designs and telling your developer what was missed and what needs to be adjusted.

We end up spending extra time screen capping their files, pasting it into Photoshop, using the marque tool to re-measure, and so on… It doesn’t have to be that way. Queue up what what like to call redlines, they will be your developers best friend and will be the bridging gap between amazing designs and pixel perfect code.

Lets first take a look at our finished design with our guidelines turned on in Photoshop:

Great, so now we can see we have a perfect design aligned to the spacing that we want, naturally a developer would take our file form here and measure out spacing but I find theres usually margin for error having a developer working within our files, lets minimize that.

Save out a JPG of your full page and open it with Adobe Fireworks, also be sure to turn on your rulers:

Now add your basic outline guides to define your major components like you had in your Photoshop file (navigation, banner, body content, footer, buttons, etc).

Now inside the tool bar, select and hold on the ‘Rectangle Tool‘ until you see the drop down and select the ‘Measure Tool

Start with one area, for this example I will show you how to do the banner. Zoom in and click and drag, you will now see that a red line will be drawn with the pixel dimensions. Make sure it aligns nicely to your grid and voila!

If you find the numbers are a bit snug, play around with the selection diamonds and you will notice you can move the pixel count and easily change the position of the measure tool.

Continue applying the redlines to the rest of the document and save out a JPG of the file, ready for your happy developer.



Here’s a tip: Create new ‘States’ in Fireworks and paste in new JPG’s for additional website pages.


Comments

  1. Cory    October 1st, 2011 at 11:28am

    Cool Article. You could also encourage the developer(s) to use something like this: http://revision3.com/pixelperfect

    Cheers

  2. Cory    October 1st, 2011 at 11:29am

    My Bad. I meant to paste in this link: http://pixelperfectplugin.com/