John Maravelakis's picture

Spec your brains out

Blueprinting the web

Spec'ing. The hard labour that a designer has to do to create a blueprint of his design. A translation of what you see in a design converted in colors, fonts, sizes, distance between items and so on. A "translated" design is a huge help to every developer. With one look, he knows exactly how big the H1 should be or what font family should be used in the body. Having all the details beforehand, makes the front-end developer a very happy man. But what about the poor designer? Creating a precise and detailed blueprint might take hours of hard work to achieve it. Repeating the same actions again and again. Consuming important time from designing something or improving the current design even more. Here's where Specctr comes to save the day (literaly)! Why? Because it automates the process and reveals every detail of an asset on your design and taking just a few seconds to register everything! Even what alignment you specified in your body text! A few basic examples: Properties of an object To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Spec Object” button. The specs will be outputted to the nearest edge of the canvas. Properties of an objectMeasuring the space between objects You can also calculate the spacing between two objects by selecting them and then by clicking the “Spacing” button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas. Measuring the space between objectsWidth and Height of an object Measuring top to bottom, left to right an object no matter how complex it is. Even the text fields. Width and Height of an object Lets see a quick test and convince anyone that is still sceptic about it.

Currently available for Adobe Fireworks and Adobe illustrator but hopefully available for Adobe Photoshop too.

A great solution for every freelancer or team. Letting everyone to focus more intently on his core mission.