SpecKing, a plugin to measure and create design specs in Photoshop
Once a design is finished, you have to measure most of the elements in order to transform them into nice and usable HTML/CSS: margin, padding, distance between elements and extract the typography properties. It’s usually the front-developer that will do all this time consuming work. With SpecKing, you can give him a little extra help. This little Photoshop plugin will help you create design specs directly in Photoshop with pixel precision.
The plugin is composed of three panels : sizes measurement (width and height), distance measurement (padding and margins) and typography specifications.
Here is what the plugin promises your :
- Creating measurements and design specs with a single click
- Measure any size, margin, and font property in your design
- Works on any PSD or flat file
- Generate all specs in editable overlays
- Great for designers, developers, and visual QA
- Supports Photoshop CS5, CS6 & CC, Mac and Windows
image from the SpecKing site
Measure Sizes – Width & Height
With this first panel you can measure all the element dimensions. You can either select a layer, or use a direct selection. Remember that you can use ctrl + click on any layer to get a perfect automatic selection of it.
You can choose width, height, or both, and also chose where you want to place the specs. The plugin uses the current foreground and background colors of your palette.
Measure Distances – Margin & Padding
With the second panel, you will be able to measure top, left, right and bottom distance of the selected layer relative to either the document, or a selected area.
In my test, I measured only bottom and right distance between the “call to action button” layer I selected and the button around selection. Again you can control the spec position
It’s important to understand that for the moment, the distance measured is relative to a “parent” element. This means that you can’t for the moment measure distance between two blocs of text without a little cheating like this :
The last panel enables you to get the typography specifications : font, size, color and line-height. The spec label is a text label, so can simply copy/ paste it into your CSS.
You can buy the plugin $19 for a single user license and it works on CS5, CS6 and CC.
My personal conclusion
I think that SpecKing can be a great help if you crafted pixel perfect PSDs and want to make the work of the front-developer more easy for certain elements. Unfortunately I’m not ashamed to admit it : I don’t craft pixel perfect Photoshop mockups. The mockup is not the final product. I create Photoshop mockups so that the client can see how it will generally look like. Sometimes my margins are not exactly the same, sometimes my padding is 1px too big on the right. But I don’t mind, because I know that I will correct this in the browser, and that the users will only see the end product, not my “nonpixelperfect” Photoshop mockups.
With Responsive Web Design we tend to use more and more fluid units (%, em). So you may ask: what’s the point of a plugin that will get me some px values ? Well, the front-developer has to start somewhere and will need pixels at some points to convert them in percentage or ems. Making her life easy by giving her this starting point, extracting her the typography values can still make here gain a little bit of time when she needs to measure things is still a cool idea.
This only thing I fear, is clients using this plugin to make sure that the front-developement is pixel perfect like on the .PSD mockup. But again, it’s our job to educate them about browser rendering and the squishiness of the web.