Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | SPECCTR Blueprints for the web
single,single-post,postid-4450,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

SPECCTR Blueprints for the web



Often as designers once we finish designing an app, we think our job ends after cleaning up our design files and handing off to the developer. As professionals we strive to become more effective with our time and the time of others.

Over time i learned that it is good practice to provide the developer working on your design files with a blueprint of your work, a sort of road map that allows him/her to look at the specs needed to build the design files without having to poke around your design file in order to get font sizes, pixel dimensions, distance between objects, opacity values etc…

I know what you are thinking and i agree too. “This good practice could take forever, providing a developer with a layer they can look at that contains all those specs can consume hours upon hours of precious billing time, and because we are efficient professionals, we don’t want to waste time ( unless it is a hilarious photoshopping contest, or a YouTube Goat Video of sorts)

Then I found SPECCTR, a handy Photoshop, Illustrator, and fireworks extension that will automatically do all this for you, Yes… it will even dra the little red pointer lines – 4Th Dimension MAGIC!


SPECCTR provides a Pro Version ($49) or a lite version (free) for Photoshop, Illustrator, Fireworks the pro version will have way more features unlocked which will allow you to provide your dev with granular details about your handy work.

Screen Shot 2013-12-10 at 4.33.44 PM

in this case we will work with the Fireworks version of SPECCTR

after downloading use Adobe Extension Manager  to install the SPECCTR extension to your preferred design program
NOTE: SPECCTR extensions will only work as far as Abode CS6 sofware as of now. Abode CC is not supported yet.

Screen Shot 2013-12-10 at 4.32.54 PM

after that all you need to do is run your program and open the SPECCTR panel from the window menu and start making your Dev’s lifeeasier!

Screen Shot 2013-12-10 at 4.43.22 PM

THE SPECCTR panel has a series of tabs that let you customize what you want to provide your dev with some include:
Expand Canvas (to make space for your specs), Shape Color, Shape Stroke, Opacity, Filter, Text Size, Color distance between layout objects and more
Select some text in your design file and press the SHAPE/TEXT button. this will create a spec field with all the custom spects you want to provide.

Screen Shot 2013-12-10 at 5.22.03 PM

you can drag the created spec around and the red lines will auto adjust and update as if the magic of gandalf was running this darn thing! – So awesome!

next up select a shape and click WIDTH & HEIGHT button isn’t it awesome?!

Screen Shot 2013-12-10 at 5.23.26 PM

And distance between objects.

Screen Shot 2013-12-10 at 5.26.30 PM

in conclusion. we design things with an specific vision in mind, we often spend valuable time shifting things around and around by a matter of pixels creating vesual harmony. It is our job to ensure that our designs are translated to real things the way we intended them to be ( those PIXELS matter) as well as making sure everything we design is good a kosher with the development team. and lastly that we are providing our clients with the best and most accurate work we can make.

SPECCTR enables you to spend little time making sure that everything will be translated correctly making the web a better place

we can all thank gandalf and the fellas at SPECCTR for this work of Magic beyond grasp.