Specctr – Generate page specifications automatically.

Posted in Extensions > Automation by Firetuts

Introducing Specctr the specifications extension for Fireworks

Specctr is a plugin for Adobe Fireworks and Illustrator which automates spec generations for your designs. The term, “spec” is short for specifications — in the case of web design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Creating these specs is unfortunately very time consuming and boring but with specctr your designs can be specced in just a minute or two.

Video outlining Specctr’s functions

Who should use Specctr

Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development. Specs function not only as instructions to developers, but also as a reference point to make sure the whole team is on the same page.

How to use the extension

We designed the extension to be very easy to use. To use Specctr open the panel from the Fireworks Window menu. Set your Options and select which details to display by toggling them on or off.

Then prepare your document by making room for your specs. Select the size of your design’s border, and click on the “Expand Canvas” button: Specctr Pro will automatically display your spec with a single click.

To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Shape/Text” button. The specs will be outputted to the nearest edge of the canvas.

You can also spec the spacing between two objects by selecting them and then clicking the “Spacing” button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas.

Finally, you can also spec the width and height of any object.

Summing up

Specctr is a very useful tool and increases your design teams efficiency and happiness. Leave more time for creative work and let Specctr do the pixel counting. Learn more at Specctr.com.

Open SVG in Fireworks

Posted in Extensions > Automation by Firetuts

John Dunning has saved us all again, he has just released the first version of his SVG extension that lets us open SVG straight into Firewroks.

Open SVG file in Fireworks

Now complete support for SVG is a reality we can use this very flexible and lightweight image format with confidence. If you’re not familiar with SVG, its basically a text based image file that describes vector images and effects. In reality SVG supports very complex image types so be aware the extension has partial to no support for some parts of the SVG spec at this time. If you want to learn about more about how to use SVG in context to webdesign try reading css-tricks.com section on SVG.

The current version of the extension doesn’t have support for export, so download Aaron beall’s SVG export extension from his site.

Auto Arrange Rows and Columns with the Spacer Panel

Posted in Extensions > Automation by Firetuts

When trying to auto arrange rows and columns of objects it can be a consuming task, especially if you need precision and granular detail. (more…)