Browser Templates for Fireworks

posted on March 10th, 2006 by Anthony

Every site I do these days starts life on the old Fireworks canvas.

I don’t know how I ever managed in the old days of just faffing about with hard html.

While plugging away on reworking a design of a yet to be implemented redesign (or is that Realign – never mind) I started thinking (well it is Friday) about moving Fireworks mock ups into the real world.

It’s easy enough to set your canvas to a width 1004, or whatever, but it doesn’t give you much of a sense of the real browser environment. You can export previews into HTML, but again it’s not always quite right.

I thought it might be useful to get a feel for the finished product before you send it anywhere – never mind before you start bashing it out in solid angle brackets and selectors.

At the end of the day IE6, Firefox and the rest become the frames for your masterpieces.

The Templates

I’m sure someone has already done this, but I don’t remember seeing it anywhere before – so here we go!

I present to you four, readymade, Fireworks PNG templates that mock the actual display sizes and look for IE6 and Firefox at different resolutions.

For your designing pleasure we have:


Fireworks template for IE6 1024x768 screen shot

Internet Explorer 6

Fireworks template for Firefox 1024x768 screen shot

They are dead simple. Basically they’re screen grabs cut to pieces and pasted into a locked off layer. Simply draw your design into the second layer downwards – and way you go.

Instant browser gratification.

If they prove to be any use to anybody I’ll produce some for other resolutions and browsers. Bear in mind that I don’t have much access to a Mac so you won’t be getting them any time soon… (that’s why this site looks funny in Safari – I only found that out last week goddamit!)

I hoping somebody somewhere will get some use out of them. If you do, please let me know.