{"id":18973,"date":"2014-01-06T15:01:10","date_gmt":"2014-01-06T07:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18973"},"modified":"2024-03-22T17:52:50","modified_gmt":"2024-03-22T09:52:50","slug":"build-design-spec-with-specking","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/","title":{"rendered":"Creating Design Specifications in Photoshop Using SpecKing"},"content":{"rendered":"

Editor\u2019s note:<\/strong> SpecKing is no longer in service.<\/p>\n

Imagine you\u2019re a web designer, preparing to pass your Photoshop designs (PSD) to web developers who\u2019ll turn them into coded websites. It\u2019s crucial to mark your designs with precise specifications<\/strong> like size, margins, and font details. This ensures that the PSD files can be perfectly converted into web format by the developers.<\/p>\n

Yet, this task can become extremely challenging and time-consuming, especially when dealing with numerous layers, texts, and elements. SpecKing, a Photoshop plugin, revolutionizes this process by enabling you to quickly measure and label your designs with just a click<\/strong>.<\/p>\n

How to Install SpecKing<\/h2>\n

First off, SpecKing needs at least Photoshop CS5 to work. To install, simply double-click the SpecKing.zxp<\/strong> file and follow the prompts. After installation, launch Photoshop, navigate to the Window > Extensions<\/strong> menu, and select SpecKing. You\u2019ll find the SpecKing panel conveniently located on the sidebar.<\/p>\n

\"SpecKing<\/figure>\n

How to Install SpecKing<\/h2>\n

Remember, SpecKing needs Photoshop CS5 or newer to operate. Begin by double-clicking the SpecKing.zxp<\/strong> file and proceed with the setup. Once installed, launch Photoshop, head to the Window > Extensions<\/strong> menu, and choose SpecKing to access its panel from the sidebar.<\/p>\n

\"SpecKing<\/figure>\n

Measuring Element Sizes<\/h2>\n

SpecKing simplifies the process of measuring the dimensions of layers, groups of layers, and selected areas<\/strong>. Simply select the desired layer and click the Measure Size<\/span> button to apply.<\/p>\n

\"Size<\/figure>\n
\n
<\/i><\/div>\n
Dashboard UI Design<\/a> by Asif Aleem<\/div>\n
<\/div>\n<\/div>\n

To modify label colors, set your preferred background and foreground colors in the toolbox before hitting the Measure Size<\/span> button.<\/p>\n

\"Custom<\/figure>\n

Labels typically appear outside the layer. However, SpecKing offers flexibility by allowing labels to be positioned centrally within the layer, as shown here.<\/p>\n

\"Label<\/figure>\n

Boost your efficiency by selecting multiple layers<\/strong> at once, enabling you to apply specification labels to them all with just one click.<\/p>\n

Measuring Distances<\/h2>\n

SpecKing also excels in measuring distances. Simply select a layer, navigate to the second tab of the SpecKing Panel, and hit the Measure Distance<\/span> button.<\/p>\n

\"Measuring<\/figure>\n

By default, distances are measured in relation to the entire document. To measure distances relative to a specific selection, make your selection around the desired layers as illustrated below:<\/p>\n

\"Relative<\/figure>\n

Text Specifications<\/h2>\n

SpecKing can reveal detailed text specifications \u2013 such as font family, size, color,<\/strong> and line height<\/strong> \u2013 allowing developers to easily adopt these styles without the need to individually inspect each text layer in the Text Panel.<\/p>\n

To display text specifications, choose the text layer, proceed to the third tab on the SpecKing Panel, and click on Get Text Property<\/span>.<\/p>\n

\"Text<\/figure>\n

The text specifications are instantly available.<\/p>\n

With SpecKing, generating design specifications becomes effortless, streamlining the project for greater accuracy and speed.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"

Editor\u2019s note: SpecKing is no longer in service. Imagine you\u2019re a web designer, preparing to pass your Photoshop designs (PSD) to web developers who\u2019ll turn them into coded websites. It\u2019s crucial to mark your designs with precise specifications like size, margins, and font details. This ensures that the PSD files can be perfectly converted into…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreating Design Specifications in Photoshop Using SpecKing - Hongkiat<\/title>\n<meta name=\"description\" content=\"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Design Specifications in Photoshop Using SpecKing\" \/>\n<meta property=\"og:description\" content=\"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-06T07:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T09:52:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating Design Specifications in Photoshop Using SpecKing\",\"datePublished\":\"2014-01-06T07:01:10+00:00\",\"dateModified\":\"2024-03-22T09:52:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/\"},\"wordCount\":466,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-design-spec-with-specking\\\/specking-panel.jpg\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/\",\"name\":\"Creating Design Specifications in Photoshop Using SpecKing - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-design-spec-with-specking\\\/specking-panel.jpg\",\"datePublished\":\"2014-01-06T07:01:10+00:00\",\"dateModified\":\"2024-03-22T09:52:50+00:00\",\"description\":\"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-design-spec-with-specking\\\/specking-panel.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/build-design-spec-with-specking\\\/specking-panel.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/build-design-spec-with-specking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Design Specifications in Photoshop Using SpecKing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Design Specifications in Photoshop Using SpecKing - Hongkiat","description":"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/","og_locale":"en_US","og_type":"article","og_title":"Creating Design Specifications in Photoshop Using SpecKing","og_description":"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll","og_url":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-01-06T07:01:10+00:00","article_modified_time":"2024-03-22T09:52:50+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating Design Specifications in Photoshop Using SpecKing","datePublished":"2014-01-06T07:01:10+00:00","dateModified":"2024-03-22T09:52:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/"},"wordCount":466,"commentCount":2,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/","url":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/","name":"Creating Design Specifications in Photoshop Using SpecKing - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg","datePublished":"2014-01-06T07:01:10+00:00","dateModified":"2024-03-22T09:52:50+00:00","description":"Editor's note: SpecKing is no longer in service. Imagine you're a web designer, preparing to pass your Photoshop designs (PSD) to web developers who'll","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/build-design-spec-with-specking\/specking-panel.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/build-design-spec-with-specking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating Design Specifications in Photoshop Using SpecKing"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4W1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18973"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18973\/revisions"}],"predecessor-version":[{"id":71568,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18973\/revisions\/71568"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18973"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}