Building Design Specification In Photoshop With SpecKing

By . Filed in Web Design

Let’s say you are the web designer working with web developers who will translate your PSD into codes. Before handing the PSD to them, you will need to label your design with the right specifications such as the sizes, margin, and font property. This is so that your PSD file can be accurately translated into a web document by the programmer.

However, this task can be very tedious, not to mention time consuming, especially if you have a bunch of layers, text, and elements. SpecKing is a Photoshop plugin that can simplify this process by allowing you to measure and annotate your design in a single click.

Installation

Note that SpecKing requires, at minimum, Photoshop CS5 to run. To install it, double-click the SpecKing.zxp file, and follow the installation process.

Then, open Photoshop, go to Window > Extension menu, and select Specking. We can find the SpecKing panel on the sidebar.

Measuring Sizes

As mentioned previously, SpecKing allows us to measure the size of layers, group of layers, and selections. To do so, select the layer and click on the Measure Size button.

Dashboard UI Design by Asif Aleem

To change the label colors, we need to specify the background and foreground color on the toolbox before clicking on the Measure Size button.

The label position, as you can see above, will be placed outside the layer. But, SpecKing also allows us to place the label in the middle, like so.

We can also significantly increase our productivity by selecting multiple layers, and then give it a specification label with a single click.

Measuring Distances

With SpecKing, we can also measure distances. Select the layer, go to the second tab on the SpecKing Panel, and click on the Measure Distance button.

By default, it will measure the layer’s distances, relative to the document. Make a selection upon certain layers so that the measurement will be relative to the selection area, for example:

Text Specification

We can also show the text specification – font family, font size, font color, and line height etc – so that the developers can immediately pick them up, instead of selecting each and every text layer to check the specification in the Text Panel.

To show the text specification, select the text layer, and go to the third tab on SpecKing Panel and click on Get Text Property.

And we will get the text specification instantly.

By using Specking, you can generate your design specifications in a snap. This will help the project run along more smoothly, precisely and quickly.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Advertisement

Comments are closed. Contact Us.