*** From the Archives ***

This article is from April 29, 2015, and is no longer current.

Review: Specctr 2.0

4

I earn my bread and butter, and the occasional Belgian ale, by turning designer-created prototypes into templates, and templates into detailed style guides that composition teams use to create lengthy and complicated textbooks for print. And then those print books are turned into digital publications that range from digital books to complex ePubs or apps.

Much of the time I spend earning that bread and butter involves creating callouts on InDesign pages. I’m intimately familiar with the Measure tool, the Info panel, and other tools used in Adobe Photoshop, Illustrator, and InDesign to gather a wide variety of spec information necessary to manually create callouts on separate layers for use by vendors, internal composition teams, and our internal and external editorial and design staff.

So when I heard about a plug-in called Specctr that gathers information about page objects and builds a variety of callouts for InDesign, I was eager to give it a whirl. The fact that they also have similar plug-ins for Adobe Illustrator, Photoshop, and Fireworks just made me want to try it even more.

SpecctrFb2

Setup and options

Once I downloaded the InDesign plug-in, the setup and installation went quickly. I downloaded the tool, which launched Extension Manager, clicked Install, restarted InDesign, plugged in my 16-digit license key, and was ready to work. Creating my preferred settings required a little tweaking to get the colors to work well with my file so they would contrast against my document background, but even so, it took me less than 10 minutes to get the plug-in installed and choose my desired settings.

Specctr’s settings allow you to select any font you own, in any weight, and any size or color to create the callout specs (Figure 1). You can combine these options to create different looks to distinguish shape, type, and spacing callouts. You can choose to have the specs appear on the edge of your canvas, and scale the specs if desired.

Settings-1

Figure 1: Spec Options let you customize the display of callouts, using any font at your disposal.

If the job you’re working on will later be reproduced as a responsive web design, you can set a few helpful options (Figure 2). You can choose to spec distance by percent, plugging in the max width and height of your design so you can determine how proportions will balance as things adjust. You can also set your typography to be spec’d in em measures with your desired font size and line height.

ResponsiveOptions-2

Figure 2: Responsive options allow you to spec distances by percentage and type in ems.

And since of course each project is different, you can choose from several options to tailor callouts to your specific needs (Figure 3). The sizing callouts are determined by the Ruler Units and Keyboard Increments you have set in your InDesign Preferences. Color callouts are determined by the Color Mode you choose in the Spec Options pane. It would be a huge benefit if paragraph, character, table, cell, and object style names were also an option in this pane, but alas, they are not.

SelectDetails-3

Figure 3: The many options for customizing callouts

Calling all callouts

Creating callouts is as easy as selecting a frame (or pair of frames, if you’re creating distance callouts) and clicking a button. The specs will appear in a text frame on a new layer, and the color chosen in your Spec Options pane will be applied to the text. Unfortunately, you can’t apply a fill color to the frames, which would be good for distinguishing callouts in complex layouts. But the layers are clearly labeled, easy to delete, and it’s possible to set them as nonprinting layers, so they are visible only to InDesign users and never visible in PDFs created for content approval (Figure 4).

Layers-4

Figure 4: Specctr automatically creates layers for each kind of callout.

Specctr’s Shape/Text function is the tool with room for the most improvement. When selecting a square, a circle, or a polygon with color fills, it creates a callout that lists fill and stroke colors (by definition, not swatch name), stroke weight, and opacity. Unfortunately, it doesn’t include information about the shape itself. For example, when I create a rectangle and apply corner effects, it doesn’t include a corner radius. And while it does include the Opacity of the fill, it doesn’t seem to call out any of the other items that can be chosen under the Effects menu. Adding information for drop shadow, inner glow, etc., would be helpful.

The Width/Height, Spacing, and Coordinates functions are pretty straight-forward. That said, I should point out that measurements for some ruler options display differently in the callouts than they do in InDesign. For example, when your rulers are set to picas, instead of showing a measurement in picas and points, Specctr displays it in picas with a decimal. InDesign would have a frame width displayed as 4p6 (4 picas and 6 points, as seen in Figure 5), but these callouts would label this as 4.5 pc (I’m rounding—so sue me).

Picas-5

Figure 5: Specctr’s insistence on showing decimals instead of points could make it a little harder to use.

In addition, Inches Decimal, Ciceros, and Agates measurements all seem to revert to pixels (Figure 6).

InchesDecimal-6

Figure 6: Measurements like inches decimal (or Ciceros or Agates) are automatically converted to pixels.

Despite this glitch, the callouts Specctr creates are almost worth the cost of the plug-in just by themselves. The Width/Height feature provides a callout of the two measurements as well as barbell-shaped guides that align to the edges of the frame. And you can choose where, in relation to the frame, you want the measurement text and lines to appear (Figure 7).

MeasurementOptions-7

Figure 7: You can place width and height callouts on any side of an object.

Still, there is still a bit of room for improvement. If you have an element on an angle, Specctr will show the measurements based on a squared grid or “bounding box” of the object on the page; that is, the measurements will not angle to match your item (Figure 8). Depending on your needs, this could be an advantage or a disadvantage, so it would be better if Specctr offered an option to display the measurements for the bounding box or the object’s true dimensions.

Bunneh-8

Figure 8: When an item is rotated, width/height callouts show the dimensions of the bounding box, not the actual object.

The Spacing function is great, and the one that I’m most thrilled about. Not only do I see using this to create spec callouts for production teams, but also as a quality-control tool to verify that frames are spaced correctly. As with the Width/Height pane, the Spacing pane (Figure 9) also gives you options to determine which directions you want it to measure.

Spacing-9

Figure 9: Specctr’s Spacing pane

The Coordinates function doesn’t have options, but it is great for letting you know where something falls in relation to the 0,0 point (Figure 10).

CoordinatesCallout

Figure 10: An object’s position on the spread is shown with a coordinates callout.

It’s a good idea to make sure that you have this positioned where you desire it, because if you move the 0,0 point of the rulers in InDesign, these callouts will auto-update (Figure 11).

2 bunnehsA

Figure 11: If you move the zero point of InDesign’s rulers, a coordinates callout is automatically updated.

This auto-update feature is one of the best features of this plug-in. If you decide you want a callout to appear on the left of an element instead of the right, just drag it, and any lines that Specctr has created will reposition. If the placement of the line conflicts with content on the page (e.g., if the line is hard to see over a complex image), you can adjust it to be more visible. If you change the color applied to the fill or stroke of a frame, your callout will update. If you select two frames, create a distance callout, and then move one of the frames, the info in the callout will auto-update. No longer will you need to check callouts “one last time” to make sure they were all updated while you were furiously working.

On the other hand, because the callouts are based on frames only, this tool can’t be used to determine the spacing of any items within a frame. However, there is no such limitation when it comes to working with groups. If you use the Selection tool, your coordinates will be based on the group of items. If you use the Direct Selection tool, they will be based on the specific frame you selected.

Another downside I discovered is related to text callouts: All of the text information gets listed in a single text frame, in the order it appears in your file. If you have just a few different paragraph styles used, as shown in Figure 12, it is pretty easy to determine what information is related to which paragraph.

specctrreview-figure12

Figure 12: A text callout shows formatting information for all the text in a frame.

However, the order of the items in the text frame is different than the order of the items in the Select Details pane. It seems it would be a simple UI fix to get them to appear in the same order.

Unfortunately, if you have several paragraph and character styles in a single text frame, as in Figure 13, the information listed can be almost impossible to parse.

ManyTextStyling-11

Figure 13: When several styles are used in a text frame, the information in a callout can be difficult to use.

Also, note that the callout info is related to the first character in the paragraph, not what is listed for the main paragraph style. This means you won’t get complete information for nested styles or for manually applied character styles that begin a paragraph.

Competitors

Specctr isn’t the only tool that creates callouts for InDesign users. Triple Triangle also has a plug-in that works exclusively for InDesign called Color Spec Cubed. It costs $149 per license, with site licensing and volume discounts available. Specctr is $49 for any one of the main Adobe applications, or $99 for all four: Adobe Fireworks (CS6 only), Illustrator, Photoshop, and InDesign (CS6, CC, and CC2014). There are also multi-seat discounts if you need 10 or more licenses.

I’ve used both plug-ins, and find Specctr to be the tool that provides more value and more features for less money, especially if you’re developing or working with files for a digital product. If you’re working on files for a print-only product, Specctr is still the better deal, but may not provide you all the functionality you need. For example, neither tool creates specs that include style names in callouts. If you need a tool that only creates style-name callouts, and only for paragraph and character styles, then you might find Style Reporter by Slendro to be the best tool for you. As of this writing, Style Reporter costs $95.99 per license for the more current versions of InDesign.

But if you’re looking for a plug-in that creates callouts full of information related to type, color, sizes, coordinates, and distances between objects, and if you specifically need information for responsive design and want to be able to export CSS, then Specctr is the most dynamic and easy-to-use tool of the bunch. This tool is undoubtedly the best plug-in I’ve seen for digital production markup.

The Test(s) of Time

When learning how to use Specctr, I was thrilled that I was able to watch a short video, download a tutorial PDF, install the plug-in, and be ready to use this plug-in as intended in less than an hour.

To put Specctr to the test, I took a simple one-page document and created callouts manually (as I’m used to doing) and timed myself. I was able to create the callouts this tool creates in 12 minutes. Using this tool, I was able to create callouts for the same information in 4 minutes. This included manually tweaking the placement of frames, resizing a few frames, and manually reducing the text size in a few frames to get it to fit in a smaller area. This savings of 8 minutes per page could save many hours for people who do this frequently. And for such a small investment, the savings should easily justify the purchase price to almost any accountant or schedule keeper.

I admit to using this plug-in during a testing phase and not a true production phase; however, InDesign CS6 and InDesign CC2014 were stable as I used the tool, with no crashing or significant slowdowns.

Scripts for Specs

In addition to commercial plug-ins, there are also some useful scripts to help you document your specs, including the following (both written by Dave Saunders):

Text Styles Reporter (originally created for CS2, but still works in CC 2014) will give you as much detailed information as you could ever need to know about your text styles.

Create Style List gives you a simple formatted list of each paragraph style in a document.

Conclusion

After playing around with the plug-in, I see the immense value it will have for people who work primarily on digital products. And with a few key enhancements for print folks, I could see Specctr quickly becoming the best tool for everyone who needs to spell out technical details in their InDesign documents. Despite my desires for some added functionality and other tweaks, the value created by this tool in time-savings and consistency across users alone should be enough to warrant buying this inexpensive plug-in.

Summary

Specctr Pro 2.0 by On Pixel, Inc.

$49

Mac and Windows, InDesign CS6–CC 2014

Rating: 8/10

  • Dmitriy Fabrikant says:

    Hey Cinnamon, I’m the co-founder of Specctr and just wanted to thank you for taking the time to write up this detailed review of the InDesign product. There is some really nice feedback for us here as well that we can use to improve. Really useful!

  • This was an excellent review, Cinnamon! Thank you for taking the time to document the good, the bad, the competition, the price, the set up, the whole shebang. Thorough, fair, and informative!

  • Lance Cheng says:

    Nice review. You should try Markly that is a modern and creative design spec tool for Photoshop and Sketch https://marklyapp.com

  • >