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.
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.
With this technique you can change the colour of a particular part of a bitmap image or photo. The tutorial uses a photo as an example but remember that this technique can be used with elements of graphic design, icons or even web graphics.
After seeing how many of you downloaded the 3D text effect source file, I thought I use this opportunity to release the first of our premium products.
One of the most time saving aspects of Fireworks is the ability to apply styles to objects on the canvas with one click. I have put together a library of 42 3D effect styles to use in Fireworks. These effects can be used with text or vector elements, if you need any help with styles you can view a guide from Adobe.
Click image to view a real pixel example of the styles.
Click image to view list of all included styles.
How to import styles
- Select Import Style Library from the Styles panel options menu.
- Select the Firetuts 3D Effect style library (*.stl) file to import. This will make the style library available across multiple documents and multiple sessions of Fireworks.
Now that we can open SVG in Fireworks, I wanted to write a post to draw attention to Aaron Beall’s export extension as it supports exporting vectors within fireworks to a SVG file.
Export SVG with Fireworks
Once you have downloaded and installed the plugin, click Command -> Export -> Export SVG to export your vectors as a SVG file. Please note that if your canvas contains bitmap images these bitmaps will be exported to the same folder you are exporting the SVG file.
If you want to learn about more about how to use SVG in context to webdesign try reading css-tricks.com section on SVG.
NOTE: There has been a fork of Aaron’s code that enables the export of single selected items from the canvas to SVG files. Check out the command on Github.
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.
Joshua Mauldin over at smashing magazine has release an iOS Grid System for Fireworks. The extension is command based and will create guides and guide layers to your canvas.
Using the iOS Grid System
Once you have downloaded the plugin and installed it, simply run the extension by clicking Commands -> iOS grid system. You can pick the iOS device you wish to design for and the command will configure the canvas to the dimensions of the device and layout the grid and guides to the appropriate spacings.
Here’s the devices included with the extension :
- Non-Retina iPhone (3GS) grid command – Grid size: 320 × 480 pixels
- Retina iPhone (4, 4S) grid command – Grid size: 640 × 960 pixels
- Retina iPhone (5) grid command – Grid size: 640 × 1136 pixels
- Non-Retina iPad (1, 2, Mini) grid command – Grid size: 1024 × 768 pixels
- Retina iPad (3, 4) grid command – Grid size: 2048 × 1536 pixels
In this tutorial I’m going to show you how, with some basic font choices and a few filters we can get really slick solid 3D text effect.
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…)
Check out this free data grid template from Webportio.
free data grid template
If your developing a web app or simple table, this template will be a worthwhile download.
Check out this Free Mobile Wireframe Template from Webportio.
Free Mobile Wireframe Template
This is another resource to help Fireworks users to design and prototype mobile apps. If you need to design for more viewports on iOS then you can download the iOS grid system for more options.