Documentation

What is Specees?


Specees is an extension for Adobe Illustrator(AI) which helps you to ease the pain of making specifications on a layout document for your team/developers. It helps you to specify dimensions, fonts and color information of objects drawn in AI. It supports specifying multiple objects at a time to boost the speed of the whole specification process.


Getting started


The Panel will be installed through the Creative Cloud App.

Restart Illustrator and navigate to “Window” → “Extensions” → “Specees” to access the extension.


Specifying


You can specify objects’ dimension or style (color, stroke weight, fonts, etc.) with Specees.


Specifying Dimension


You can select single or multiple objects to specify the width and height. Choose to display the dimension on the left or right to specify object(s) height, and/or choose to display the dimension on top or bottom to specify object(s) width. Click on the generate button to specify the dimension.


Types of Dimension


By switching on and off the icons on the “Types Column”, you can specify:


  • Selected object’s height and/or width
  • Length of line segment

    Show the length of all straight lines in the selected object. You can also select any straight line(s) with the direct selection tool to specify the length of the selected line(s) only. Length of line segment only support all path items and clipped path.

  • Distance / Difference between objects:

    When more than one object are selected, Specees can specify their distance or difference between them according to the following scenario:

    1. Distance
    2. Difference

    When more than 2 objects are selected, Specees will try to filter out less meaningful dimension and give the specification a much cleaner look.

  • Selection’s height and/or width:

    Only applicable when you select more than one object.

  • Includes artborad in selection:

    Add the Current artborad in the selection when specifying dimension.

  • Specifies radius of round corners:

    Specify the radius of round corners in selection. Only applicable to corners of a right angle.


Visual bounds VS. Geometric bounds


AI has 2 different approaches to measure the boundary of an object: visual bound and geometric bound.

When visual bounds is checked, stroke weight of an object is also measured as part of the dimension. Otherwise, stroke weight is not counted as the dimension of an object. For instance, a 100px x 100px square with a 1px stroke aligned to centre will be measured as 101px in height and width when visual bounds is checked.

Specification with visual bounds checked is more suitable for web / mobile layout while for print layout, you may find visual bounds unchecked more useful in specification.

*Unfortunately AI also measures effects (e.g. drop shadow, glows, etc.) as part of the dimension when visual bounds is checked. Please turn off the effect of the object in “Window” → “Appearance” first before you do specification.


Settings


Scale & Units


You can set the unit in the setting area (px, mm, cm, inches & pt). Specees will automatically convert the dimension to the unit you selected. To help you to have a cleaner specification document, units are set to be hidden as default. You can turn it back on in settings or hold Option in Mac / Alt in Windows while clicking the generate button to temperately toggle units display on and off.

You can also set the scale in when you specify dimension. The default scale is 1. You can set the scale to any positive number.


Using variable in scale


You can also set scale as a variable, e.g. “x=10”. This variable will be used together with the unit you set, i.e. if you set the unit as px, an object with 100px high will be displayed as “10x” in the dimension. You can also add a multiplier to the variable, e.g. “2x=10”. In the above case “20x” will be displayed.

Tips: You can specify dimensions of an object as percentage to any number. For example, if you have an artboard with 1024px wide and you have drawn 4 rectangles with same width to fill up the artboard as columns. You can then set “100%=1024” in scale and px as unit and generate the width and Specees will convert and display the width of the column as “25%”.

*Math expression is NOT supported in scale. You cannot set something like “x=1+1” in scale.


Decimal places


Set the number of decimal places displayed in dimension.


Font size, stroke weight & color


You can set font size of the dimension displayed as well as the stroke weight of the dimension line. Their color can be set independently and you can click on the Copy Color button to copy the color set to font to dimension line, or vice versa.


Distance between dimension line and the object


This will set the distance between the dimension line and the object.


End of dimension line


You can set the end of dimension line to point to different parts of an object (outside, to the middle or to the end of the object)


Label background


You can also add a label background and set its color behind the value displayed in the dimension.


Specifying Style


You can select single or multiple objects to specify the style properties of an object. The following properties are supported to specify in Specees:


  • Filled color
  • Stroke color
  • Stroke weight
  • Opacity (will only show it when it is below 100%)
  • Filename of linked image
  • Font family
  • Font size
  • Leading

When more than one object is selected, Specees will group those objects with exactly the same properties to display.

*Group or clipped object will have no property generated. Please use the Direct Selection Tool to select object in a group or in a clipped object to generate specification.


Color


Specees specifies color according to the “File” → “Document Color Mode (RGB / CMYK)”. Object’s color set to greyscale will be also specified in greyscale. HSB color will be specified as RGB of CMYK color according to the document color mode.

Specees will also specify properties in a gradient color.

Specees will display the name and the opacity for swatch color and pattern.


Font style


When specifying a text item, you can choose to display both the font and the color properties, or either one of them.


Notes on specifying Font style:

Specees will only display the properties of the first character of any text selected. If you have a text box or text area with characters of different properties, you can highlight the character and click the generate button to specify its properties.


Issues in properties set in Appearance Window


By default, Specees will ignore the following properties set in the Appearance Window:


  • Opacity
  • Extra fill or stroke color added

You can hold Option in Mac / Alt in Windows while clicking the generate button if you want to specify the above properties. Specees will temperately expand all the objects selected and look for the properties stored in the Appearance Window.

*This process need more computer resources and will take longer time to finish specifying. This mode also have limitation. You cannot specify store weights if you have set them aligned outside of inside the object. We will try to fix this issue in the future.


Settings


Font size, stroke weight & color


You can set font size of the dimension displayed as well as the stroke weight of the dimension line. Their color can be set independently and you can click on the Copy Color button to copy the color set to font to dimension line, or vice versa.


Hex / RGB


You can choose to display RGB color in Hex code or in RGB numbers.


Distance between the label and object


Set the distance between the label and object in pixel. When objects are grouped because of their same properties, it will be the distance between the label and any one object in the group.